Simplify Your Development Process with Supabase Local

Before beginning any development that might require significant changes to the UI or database, it is recommended to set up Supabase Local. Supabase Local is an open-source, realtime platform that makes it easy to build and deploy cloud-native applications, and its Supabase CLI feature allows for a local instance of Supabase to be run for development and testing purposes. In this post, we will walk through the steps to set up Supabase Local and get it up and running on your local machine.

Why Supabase?

Supabase is an open-source, realtime, and fully-featured platform that makes it easy to build and deploy cloud-native applications. One of the key features of Supabase is Supabase CLI, which allows developers to run a local instance of Supabase for development and testing purposes. In this post, we will walk through the steps to set up Supabase Local and get it up and running on your local machine.

Keeping this article as a micro blog as the main documentation is more than enough

Setting up Supabase CLI

To set up Supabase CLI, run the following command globally:

js
npm install supabase --save-dev

Alternatively, for MacOS users, run:

js
brew install supabase/tap/supabase

Logging in to Supabase

Before logging in to Supabase, make sure you have signed up on the Supabase website and completed any necessary verification steps. Then, run the following command in the terminal:

js
supabase login

Follow the provided link, generate a token, and use it to log in to the terminal. Do not save the token unless absolutely necessary.

Creating a New Project

Now once the Supabase account is linked with your local setup then I deviated from the original documentation to create a new project, and decided to embed it in the frontend project that I already have.

Just created a server directory at the root level, cd server then ran the following command

js
supabase init

This created the following files

Post this ran the following command:

console
supabase start

This will download and start the necessary containers to run Supabase locally. This process may take some time, as some of the containers are large.

Once completed, you will see the following output, which can be used to set up Supabase in your NextJS application:

js
Started supabase local development setup.
 
API URL: http://localhost:54321
DB URL: postgresql://postgres:postgres@localhost:54322/postgres
Studio URL: http://localhost:54323
Inbucket URL: http://localhost:54324
JWT secret: super-secret-jwt-token-with-at-least-32-characters-long
anon key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0
service_role key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImV4cCI6MTk4MzgxMjk5Nn0.EGIM96RAZx35lJzdJsyH-qQwv8Hdp7fsn3W0YpN81IU

You can checkout the Studio URL link, yes there are limitations on local studio which you can find on the official website:

Local Development

I decided to add this folder to gitignore.

Local setup additional steps performed

As mentioned earlier this is not a much for people who are setting things up on LOCAL first. Since I had a project created on the Supabase Dashabord (PROD) - I had to do the following steps to reproduce the project locally.

1. DB setup
   1. migrated the table schema from PROD to local using the DDL scripts which I was able to retrieve using DBeaver tool and connecting to the PROD DB
2. Policy definitions
   1. Apply the policies from the PROD to LOCAL
3. RPC calls setup
   1. If any add those too
4. Authentication enablement
   1. If anything defined then add those too
5. Storage buckets
   1. Create the same storage buckets

Ideal way

For setting up local and making sure you have promote systems to prod you can follow the instructions on the main documentation

But apart from the above hiccup I was able to set things up locally by manually migrating the DB schema and setting up things.

Deploying to Production

Before deploying to production, it is important to make the necessary changes to your project, including:

1. DB migrations
2. RPC calls migrations
3. Edge functions
4. Other policy updates
5. Authentication enablement
6. Storage buckets

Conclusion

In summary, Supabase Local is a useful tool for developing and testing cloud-native applications. By following the steps outlined in this post, you can easily set up Supabase Local on your local machine and use it in your NextJS application. Before deploying to production, remember to make the necessary changes to your project to ensure a smooth deployment.