Skip to content

Installation

Jump to bottom
Arpan Dhakal edited this page Aug 26, 2025 · 12 revisions

Supabase local setup

About supabase CLI

  • The Supabase CLI enables you to run the entire Supabase stack locally, on your machine or in a CI environment. ref : Supabase CLI.
  • Enabling supabase CLI helps us run many features of supabase locally during the development of the Tasks app. Enabling realtime, storage and supabase postgres features locally makes the development experience smooth and easy.

Supabase CLI initiation and config.toml (Already in the Tasks app repo)

  • Make sure you have supabase installed in you repo: yarn add supabase --dev
  • Initialize supabase project in your repo : yarn supabase init This creates a folder "Supabase" in our repo with a file named config.toml. The config.toml file is used in the Supabase CLI to configure your project's settings and customize your local development environment. It contains configuration of many features of supabase application that we need in our local development. We have boiled down an ideal _config.toml _ file that only configures the necessary features required to run Tasks app locally.

Running the Supabase CLI

  • Please make sure you have Docker Desktop installed in you machine. Docker Desktop is a prerequisite for running the Supabase CLI.
  • Run yarn supabase start, if you are running this command for the first time, this will take some time to download all the required images in Docker. Once its done, the terminal will provide us with some necessary configurations which looks like :

image

Note : These keys will always be the same for a machine. Run yarn supabase status to view your keys.

  • Once we have the keys, replace our .env file with the relevant values.
    1. Use the anon key value for NEXT_PUBLIC_SUPABASE_ANON_KEY.
    2. Use the DB URL value for DIRECT_URL and DATABASE_URL.
    3. Use the value for NEXT_PUBLIC_SUPABASE_PROJECT_URL.
  • Navigate to Studio URL to access the supabase dashboard. Now you can setup you local supabase in the dashboard just like remote. Documentation here
  • Make sure you run yarn db:grant-supabase-privileges while building. Its purpose is to grant the necessary privileges to the Supabase roles, users, or schemas to allow the Supabase backend to function correctly with the database on each build or migration changes locally.

Project setup

Supabase Remote Setup

Create or select an existing supabase project.

  • Sign in to supabase.com and select/create an organization.
  • Inside that organization, you can select/create a project. image

Supabase setup for our application

  • To integrate the supabase project in our application, we need some important configuration and keys of the project to add in our .env file. Inside settings>API, we can find many configuration key to be added in our .env file.

    1. Anon key : We are currently using the Anon key instead of service role key for authenticating users to interact with the database.

      image

      Add the value of the Anon key for NEXT_PUBLIC_SUPABASE_ANON_KEY in the .env file.

    2. Supabase Project URL : Supabase project url is the base url to connect into the supabase project from the tasks app. It is found inside Project URL section under API settings.

      image

      Add the value of Project URL for NEXT_PUBLIC_SUPABASE_PROJECT_URL in the .env file.

  • Next step is to add database URL of the supabase project in our .env file. The database configuration keys are found inside settings>Database in our supabase project.

    1. Database connection string : Database connection string is used to connect to the Postgres database for accessing and making changes, running migrations to our database on supabase from the tasks app. Inside the Database settings route, clicking the connect button reveals the connection string.

      image

      Replace the DIRECT_URL and DATABASE_URL in our .env file with the provided connection string from pooler. To sync the migration with the remove supabase database, we should run prisma migrate dev.

  • Other setups includes the name of supabase bucket which is generally 'media'. Replace the NEXT_PUBLIC_SUPABASE_BUCKET in our .env with the supabase bucket name.

Supabase Realtime configuration

  • Enabling access to the realtime channels. Navigating to Database>Publications, we can provide access of tables to our realtime channels.

image

Tasks app relies on postgres_changes for achieving realtime. Make sure to provide relevant access to the tables : Tasks, ActivityLogs, Templates. The realtime channel will require permission on these tables to reflect realtime payload for the changes on these tables.

We can verify that the realtime is enabled on a table by going through the table in the Table Editor section :

image

Supabase Bucket configuration

  • Under the Storage section in our supabase project, create a bucket with the name we applied on NEXT_PUBLIC_SUPABASE_BUCKET in our .env file. We need to add policies on this bucket so that our different functions of creating signedURL, uploadURL, downloadURL and many more works in the tasks app. Right now, we are configuring policies which allow all actions on supabase bucket to users with the Anon Key :

image

Note

  • Make sure you run yarn db:grant-supabase-privileges while building. Its purpose is to grant the necessary privileges to the Supabase roles, users, or schemas to allow the Supabase backend to function correctly with the database on each build or migration changes.

Clone this wiki locally