Building Backend Website With Supabase

If you’re a front end web developer, you definitely doesn’t have any difficulties while deploying web app to hosting services like github pages, vercel, etc.. Especially if it is only static website, portfolio, or landing page.

But when it comes to uploading the back end part, I sometimes get confused how to do it. I know I could upload the database to heroku using postgres, but another problem comes in when mostly we developing the database using mysql in local environment, and many other things related to backend that I don’t really familiar with.

Lately I have a personal project that need a user authentication, a database to store some data. I know I could use firebase to make it happen, but I think it’s too much for a personal project. Not long after that, I see someone from twitter that recommended someone else to use supabase just to store some simple data. I got curious, and finally I found solution for my personal project.

Supabase is a backend as a platform (BaaS) service, where you can directly create your database there, having user authentication for your website, etc.. They offer three main product such as database, storage, authentication. I personally only use database and authentication.

So basically we just call API that supabase generated automatically for us to do any operation we want, and we can keep easily deploying website in github pages, vercel, or other web hosting.

In my opinion, their interface is good, especially in table editor section, I could get started quickly with it to arrange database design like I want. They also provide feature like foreign key relation in our tables, which is good for me.

They also provide auto generated docs for us on how to fetch data from our tables and other operation like edit, update, delete data. It’s really simple to read all rows from your table, you can just like

let { data: blog, error } = await supabase
.from('blogs')
.select('*')

DISCLAIMER: I made the project in react

I need the foreign key relation to link between post and comments, and also maintaining the ‘comment tables’. So when particular post is deleted, the comment attached with that post is deleted too.

Another thing I’ve done with supabase is authentication. They provide many method like signIn, signUp, session , etc.. It’s really convenient for us from front end to do it. For example, when someone wants to login, we can just write code this simple

const { user, session, error } = await supabase.auth.signIn({
email: 'emailFromUser',
password: 'passwordFromUser',
})

Conclusion
I finally able to create backend without having to upload my own backend code and all the configuration that I need to do. I hope this article help you, thank you for reading this post.