Skip to main content

Local Development

Supabase provides a CLI so that you can develop your application locally, rather than connecting to a live project.

Prerequisites#

You will need to have these in your environment:

  • Git
  • Docker (make sure the daemon is up and running)
  • Supabase CLI (instructions here)

Initialize your project#

supabase init

This command will create a supabase folder which holds all the configuration for developing your project locally.

Start#

supabase start

This command uses Docker Compose to start all the open source services of Supabase. This command will take a while to run, there are a lot of services to build.

Once this is running, you will see an output that contains your local Supabase credentials:

Started local development setup.
API URL: http://localhost:54321
DB URL: postgresql://postgres:postgres@localhost:5432/postgres
anon key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW5vbiJ9.ZopqoUt20nEV9cklpv9e3yw3PVyZLmKs5qLD6nGL1SI
service_role key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoic2VydmljZV9yb2xlIn0.M2d2z4SFn5C7HlJlaSLfrzuYim9nbY_XI40uWFN3hEE

Accessing Services Directly#

# Default URL:
postgresql://postgres:postgres@localhost:5432/postgres

The local Postgres instance can be accessed through psql or any other Postgres client, such as pgadmin.

For example:

psql 'postgresql://postgres:postgres@localhost:5432/postgres'

Example application#

Now that we've learned how to install and start Supabase locally, let's see how you can use it with a frontend application. This quick-start guide will show you, how you can configure a React app which uses the Supabase stack.

# create a fresh React app
npx create-react-app react-demo --use-npm
# move into the new folder
cd react-demo
# set up Supabase
supabase init
# Save the install supabase-js library
npm install --save @supabase/supabase-js

Now that your application is prepared, start the backend:

supabase start # Start Supabase

You can use Supabase anywhere in your application. Copy this snippet into App.js:

import { createClient } from '@supabase/supabase-js'
const SUPABASE_URL = '<your API URL>'
const SUPABASE_ANON_KEY = '<your anon key>'
const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY)

Then start the frontend in a separate terminal:

npm start # Start the React app

If everything is working, you should have a React app running on http://localhost:3000 and Supabase services running on http://localhost:54321

Stop#

When you're finished with Supabase, send Ctrl-C to stop the Docker services.

Migrations#

You can also use the CLI to manage your migrations. Follow the tour here to get started.

Next steps#