Complete Setup to running Supabase Locally - Next.js + Supabase + Github Actions 
Tags: javascript, nextjs, supabase, githubactions
Published: 2021-11-06 11:20:27

In this blog, we are using NextJS and Supabase. I struggled find any resources on setting up a local environment which worked well and any decently sized production application should be recreate from scratch using the repo. I have been using Laravel for a while and I love how database migrations are done easily.

In this blog post we setup a simple local dev enviroment and create a Github action script to migrate it to the production database in [Supabase.io](http://Supabase.io).

## Create repo

```bash
npx create-next-app supabase-local --typescript

cd supabase-local

npm install --save @supabase/supabase-js
```

## Download and Install Docker desktop

You will have to download Docker Desktop.

For Mac OS using brew.

```powershell
brew install --cask docker
```

For other operating systems: [https://www.docker.com/products/docker-desktop](https://www.docker.com/products/docker-desktop)

## Install Supabase CLI

The Supabase team has created a great CLI to setup all the with Docker Compose.

```bash
// Install Supabase Globally
npm install -g supabase
// Initalize Supabase, this creates a .supabase folder with all the docker files.
supabase init
```

You will get something like this. 

```
✔ Port for Supabase URL: · 8000
✔ Port for PostgreSQL database: · 5432
✔ Project initialized.
Supabase URL: http://localhost:8000
Supabase Key (anon, public): eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJzdXBhYmFzZSIsImlhdCI6MTYwMzk2ODgzNCwiZXhwIjoyNTUwNjUzNjM0LCJyb2xlIjoiYW5vbiJ9.36fUebxgx1mcBo4s19v0SzqmzunP--hm_hep0uLX0ew
Supabase Key (service_role, private): eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJzdXBhYmFzZSIsImlhdCI6MTYwMzk2ODgzNCwiZXhwIjoyNTUwNjUzNjM0LCJyb2xlIjoiYW5vbiJ9.36fUebxgx1mcBo4s19v0SzqmzunP--hm_hep0uLX0ew
Database URL: postgres://postgres:postgres@localhost:5432/postgres
```

Save these values in a environment variable, `.env.local`

```bash
NEXT_PUBLIC_SUPABASE_URL=http://localhost:8000
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJzdXBhYmFzZSIsImlhdCI6MTYwMzk2ODgzNCwiZXhwIjoyNTUwNjUzNjM0LCJyb2xlIjoiYW5vbiJ9.36fUebxgx1mcBo4s19v0SzqmzunP--hm_hep0uLX0ew
NEXT_SUPABASE_SERVICE_ROLE_KEY=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJzdXBhYmFzZSIsImlhdCI6MTYwMzk2ODgzNCwiZXhwIjoyNTUwNjUzNjM0LCJyb2xlIjoiYW5vbiJ9.36fUebxgx1mcBo4s19v0SzqmzunP--hm_hep0uLX0ew
DATABASE_URL=postgres://postgres:postgres@localhost:5432/postgres

```

## Install Flyway

We are using Flyway to keep track of our changes database changes using migration files. 

If you are using windows you can checkout the [https://flywaydb.org/](https://flywaydb.org/) guide on setting up.

To install on Mac OS (using brew):

```bash
brew install flyway
```

Create a file in your root directory called `flyway.conf`

```
flyway.url=jdbc:postgresql://localhost:5432/postgres
flyway.user=postgres
flyway.password=postgres
flyway.baselineOnMigrate=true
flyway.schemas=public
```

Run the project and start Supabase DB locally.

```powershell
supabase start
npm start 
```

## Create Table using Flyway

Create a folder called `sql` in your root directory with your first migration in the folder  called`V1__create_projects_table.sql`

```sql
create table projects (
	id serial not null primary key,
	name varchar(255) not null
);
```

Run Flyway migrate to create tables using the migration files:

```bash
flyway migrate
```

## Setup Supabase Client

Create a folder called `utils` to contain all your helper functions and api services. In this folder, create a `supabase-client.ts`

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

export const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL ?? '',
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY ?? '',
)q
```

## Write Github Actions to migrate the DB when to pushed to master

You will need to setup a CI/CD script to the migration you push to master. To create the new tables in the database 😃 . I am using Github actions in this instance. 

Create file called in `.github/production.yml`.

You will need to define `SUPABASE_PASS_PROD` in your Github secrets.

```jsx
name: 'Migrate database schema - production'

on:
  push:
    branches:
      - main

jobs:
  migrate-database:
    name: Run Flyway migrations
    runs-on: ubuntu-20.04
    env:
      SUPABASE_HOST: db.yimvzlnhgkmjsdknvbyoths.supabase.co // This a example URL
      SUPABASE_PORT: 5432
      SUPABASE_USER: postgres
      SUPABASE_DB: postgres
    steps:
      - uses: actions/checkout@v2
      - run: >-
          docker run --rm
          --volume ${{ github.workspace }}/sql:/flyway/sql:ro
          flyway/flyway:7.12.1-alpine
          -url="jdbc:postgresql://${{ env.SUPABASE_HOST }}:${{ env.SUPABASE_PORT }}/${{ env.SUPABASE_DB }}?sslmode=require"
          -user="${{ env.SUPABASE_USER }}"
          -password="${{ secrets.SUPABASE_PASS_PROD }}"
          migrate
```


Thanks for reading. You have any questions, 📥 DM me on [Twitter](https://twitter.com/ahmedfmire)