DEVELOPMENT.md

Development

• Development
  • Documentation
  • Common commands
    • Types
    • Testing
    • Production build
  • Github OAuth - admin dashboard access
    • Development
    • Production
  • Supabase development
    • Creating migrations
    • Connecting to the external Supabase DB (production)
    • Pushing migrations
    • Pulling changes
  • Testing

Documentation

• Supabase - local development
• Nuxt Supabase - documentation
• @supabase/supabase-js - documentation

(back to top)

Common commands

# Start the development server
yarn supabase start

# Stop the development server
yarn supabase stop

# Reset the database from the migrations
yarn supabase db reset

Types

# Login to Supabase
yarn supabase login

# Generate types
yarn types:supabase

# Generate types from the local database
yarn types:supabase:local

Testing

# Run the tests
yarn test

Production build

# Build the application for production:
yarn run build

# Locally preview production build:
yarn run preview

(back to top)

Github OAuth - admin dashboard access

Official documentation

(back to top)

Development

To enable Github OAuth locally, you need to create a new OAuth application on Github.

1. Go to your Github account settings by clicking on your profile picture in the top right corner and selecting Settings.
2. Navigate to Developer settings -> OAuth Apps.
3. Select New OAuth App.
4. Fill in the form with the following data:
   • Application name: your dev app name
   • Homepage URL: http://localhost:3000
   • App description: your app description
   • Authorization callback URL: http://localhost:54321/auth/v1/callback
   • Enable Device Flow (empty)

Now you can add the GITHUB_CLIENT_ID and GITHUB_SECRET to your .env file.
These are needed only for the development environment.

(back to top)

Production

For the production environment, you need to create a new OAuth application on Github.

1. Open the Supabase admin panel and navigate to Authentication -> Providers.
2. Enable the Github provider (keep this tab open for later).
3. Go to your Github account settings by clicking on your profile picture in the top right corner and selecting Settings.
4. Navigate to Developer settings -> OAuth Apps.
5. Select New OAuth App.
6. Fill in the form with the following data:
   • Application name: your app name
   • Homepage URL: your final domain
   • App description: your app description
   • Authorization callback URL: your final domain/auth/v1/callback (provided by Supabase in the Github Auth Providers settings)
7. Click Register application.

Note

Domain changes and redirection issues
If you need to change the domain, from some temporary to the final one, you can encounter issues with the incorrect redirection.
In this case, you need to change the Authorization callback URL in the Github OAuth App settings but also
the Site URL in the Supabase settings Authentication -> URL Configuration -> Site URL.

(back to top)

Supabase development

To access the Supabase admin panel, open http://127.0.0.1:54323 in your browser.

(back to top)

Creating migrations

# Create a new migration
yarn supabase migration new <migration-name>

Write the migration in the newly created file in the /supabase/migrations directory.

# Apply the migration
yarn supabase db reset

More about possible ways to manage migrations can be found in the Supabase documentation.

(back to top)

Connecting to the external Supabase DB (production)

# So far the Supabase CLI should be installed as a dev dependency.
# If "supabase" is not recognized, you can force it by reinstalling the package
yarn install supabase -D

# Login to Supabase
yarn supabase login

# Link the project to the Supabase project
yarn supabase link --project-ref <project-id>

(back to top)

Pushing migrations

Assuming that a new migration was created locally, you can push it to the production environment.

# Pull the database schema first public
yarn supabase db push

(back to top)

Pulling changes

In case you've made some changes to the database schema in the production environment,
you can pull these changes to your local environment.

# Pull the database schema first public
yarn supabase db pull
# Update remote migration history table? [Y/n] 
Y

# Pull the database schema for auth, storage
yarn supabase db pull --schema auth,storage
# Update remote migration history table? [Y/n]
Y

# Apply changes locally (including seeding the buckets)
yarn supabase db reset

# To seed buckets manually run
yarn supabase seed buckets

(back to top)

Testing

To start with testing you will need a .env.test file.

1. configure .env file as mentioned in the README.md in the section Installation
2. copy it
3. rename to .env.test.

To run the tests, use the following command:

# Prepare the test environment
yarn playwright install

# Start the local project - required for the e2e tests
yarn dev

# Run the tests
yarn test

(back to top)