All you need to know about Supabase

  • img
    Aashik NR
  • April 21,2021

Today in this blog i am going to introduce you to something which is better than firebase. Yes you heard it right,Now without a further due let's jump right into it

What it is?

Supabase is an open-source Firebase alternative. The technological choices are quite different from Firebase. Supabase uses and supports existing tools in the ecosystem, rather than developing them from scratch. Due to the scalability and functionality required to legitimately compete with Firebase, Supabase use Postgres rather than a NoSQL store. It provides services to:

Supabase can be used without without installing anything. Under the hood, it is a combination of open-source tools to build a seamless developer experience.

Why Supabase?

Supabase can be referred to as an alternative to the Firebase. Because, Firebase has some scaling issues. Supabase uses Postgres because it's well-trusted and it has phenomenal scalability. It is to make Supabase as easy as Firebase so that no longer have to choose between usability and scalability. (No other DB support other than PostgreSQL at the moment, maybe in the near future it might come up with a multiple DB support)

Client libraries

Supabase client library is modular and it has only javascript library support at the moment.

Even though it is officially javascript ,it has various community supports such as:

Supabase is a combination of 5 open source tools. Each tool can be installed separately. Some of these tools are made by Supabase and some are supported indirectly. Realtime Server and PostgREST respectively. Also, yes there are some 3rd-party tools like Kong too.

Click here to know more about Supabse

Now lets deep dive into Supabase with an to-do example

This is the official github repo for all the examples using supabase. I will show the React to-do among them. Yes, you guessed it right, React is my favourite!

Remember, you need a node version above 10 in order to go with the codes available in the repo. Or else some errors will occur and you will have to change the code. Why bother when you can upgrade the node in a single command.

First thing first

You will see a table like this when you run the TODO LIST: Build a basic to-do list with Row Level Security from the dashboard (Initially, it will be empty).

The service_role key has to be kept secret and used only in server environments since it has full access to the data and it can be used to bypassing any security policies.

Now lets see how we set the environment

Install CLI

npm install -g supabase

Now clone the react-todo from github repo and run the below command to install all the dependencies

npm install

Now goto the file where you want to connect the dashboard with your application. For this example, edit the file named Api.js as shown below
You can connect your dashboard with your favourite front-end application like this:

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = 'http://localhost:8000'
const anonKey = 'Your key here '

const supabase = createClient(supabaseUrl, anonKey) 

supabaseUrl and anonKey can be found in the API section under settings ( Yh i am good with drawing)

Once these steps are done,you are good to go!

Nothing special here, write code like a pro:

//Data insertion
import { supabase } from "../lib/api";
const data = await supabase
            .from("todos")
            .update({ is_complete: !isCompleted })
            .eq("id", todo.id)
            .single();

And we can perform delete like this

//data deletion
 await supabase.from("todos").delete().eq("id", id);

Pretty Simple right? .Do check-out their official github repo .for more codes that are much more exciting than these. also, don’t forget to go through their official doc

Subscribe to newsletter
Need more tech news? Tune in to our weekly newsletter to get the latest updates