Supabase: A Guide to Setting Up Your Local Environment

Supabase, an open-source alternative to Firebase, offers a comprehensive suite of tools to streamline your development process. In this guide, we'll walk through the steps to set up your local environment with Supabase, empowering you to build and test your applications with ease.

Why Develop Locally with Supabase?

Before we delve into the setup process, let's explore why developing locally with Supabase is advantageous:

1. Faster Development: Eliminates network latency and internet disruptions, speeding up the development process.
2. Easier Collaboration: Facilitates seamless collaboration with team members on the same project.
3. Cost-Effective: Allows for unlimited local projects, reducing costs compared to using multiple live projects.
4. Configuration in Code: Stores table schemas in code for better organization and version control.
5. Work Offline: Enables developers to work from anywhere without requiring constant internet access.

By setting up a local development environment with Supabase, you can streamline your workflow, improve productivity, and ensure a more reliable and cost-effective development experience.

Sources

Supabase documentation and developer resources.

• Supabase CLI
• Local Development
• Supabase Local Dev: migrations, branching, and observability

Prerequisites

Before proceeding with setting up the local development environment for Supabase, ensure that the following prerequisites are met:

1. Node.js and npm:
   • Your local development environment should have Node.js and npm (the Node.js package manager) installed.
   • These dependencies are necessary for managing Supabase-related packages and running the Supabase CLI.
2. Docker Installed and Running:
   • Docker is required to run the Supabase stack locally.
   • Ensure Docker is installed on your local machine.
   • Start Docker to ensure it's running and accessible.

If Docker is not installed, you can download and install it from the official Docker website: https://www.docker.com/products/docker-desktop

Once Docker is installed, start the Docker application to ensure it's running in the background

Setting Up the Local Development Environment

Now that we've ensured our prerequisites are in place, let's proceed with setting up the local development environment for Supabase:

• Install the Supabase CLI: - Open your terminal or command prompt. - Install the Supabase CLI using npm:

npm install supabase --save-dev

Initialize Your Project:
- Create a new directory for your project and navigate into it:

mkdir my-supabase-project
cd my-supabase-project

• Initialize your project with the Supabase CLI:This will create the necessary files and folders for your Supabase project, such as config.toml where you can customize your local development environment settings.

npx supabase init

Start the Supabase Stack:

• With your project initialized, you can now start the Supabase stack locally:

npx supabase start

• This command will pull all necessary docker images and start the docker containers for the Supabase stack. You can access your local Supabase services locally, including the database, API server, and Supabase Studio.

  Started supabase local development setup.

  API URL: http://127.0.0.1:54321
  GraphQL URL: http://127.0.0.1:54321/graphql/v1
  S3 Storage URL: http://127.0.0.1:54321/storage/v1/s3
           DB URL: postgresql://postgres:postgres@127.0.0.1:54322/postgres
        Studio URL: http://127.0.0.1:54323
     Inbucket URL: http://127.0.0.1:54324
        JWT secret: super-secret-jwt-token-with-at-least-32-characters-long
        anon key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
  service_role key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
     S3 Access Key: 625729a08b95bf1b7ff351a663f3a23c
     S3 Secret Key: 850181e4652dd023b7a98c58ae0d2d34bd4
        S3 Region: local

• Access Your Local Development Environment: Once the Supabase stack is running, you can access various components via their respective URLs: - API URL: http://localhost:54321 - Database URL: postgresql://postgres:postgres@localhost:54322/postgres - Supabase Studio: http://localhost:54323 - Inbucket: http://localhost:54324

1. Replace Environment Variables (Optional):
   • If needed, replace environment variables in your project's configuration files with the appropriate URLs and keys provided by the Supabase CLI.
2. NEXT_PUBLIC_SUPABASE_URL: Set this variable to http://localhost:54321. This URL points to the local Supabase instance.
3. NEXT_PUBLIC_SUPABASE_ANON_KEY: Obtain this key from the terminal output when running supabase start. It is generated dynamically and is specific to your local Supabase instance.

With these steps completed, your local development environment with Supabase is up and running, ready for you to start building and testing your applications.

Conclusion

Setting up a local environment with Supabase is a straightforward process that empowers developers to build and test their applications with confidence. By following the steps outlined in this guide, you can harness the full potential of Supabase and accelerate your development workflow.

Happy coding with Supabase!

Comments

[Gustavo Guichard (Guga)]

Hey Sreejin, great guide! For anyone working with local Supabase environments, I’d also recommend Flashboard. I’m one of the creators, and it’s a web-based admin tool for PostgreSQL (including Supabase DBs) that simplifies database management without requiring extra setup. It could complement your local development, through tools such as ngrok or serveo, by offering a streamlined admin UI. Would love to hear your thoughts!