Skip to content

Project Setup

Jump to bottom
F.S. Koulen edited this page Jun 15, 2023 · 12 revisions

Icons for the instruments are provided by Icons8

Supabase

We are using Supabase in this project. It provides the database, authentication and plans to provide functionality through edge functions for push notifications as well. On this page you can find out more about how to develop with Supabase in this project.

Links

The Dashboard

We currently only have one 'dev' environment for Supabase but are planning on creating another one for ' prod'.

The Supabase dashboard has lots of functionality. Here are some of the most important ones but feel free explore it yourself.

  • Table editor
    Quickly view and edit data in the tables of the Database.
  • SQL editor
    Run PostgreSQL queries on the tables.
  • Databases
    View all tables, triggers, functions & more.
  • Authentication
    View all users & table policies.
  • Storage
    View stored files.
  • Project Settings
    View billing (Usage is mostly interesting to us) & all kinds of settings for the API, auth & database.
Working locally with Supabase

We're using the free tier of Supabase. This has some limits so while developing locally it is smart to use the Supabase CLI.
The CLI provides tool to run Supabase locally and manage database migrations. It also has tools to generate TypeScript types directly from the database schema.

Setting up Supabase locally

Important: You must have Docker installed and running to start up Supabase locally.

More info on working locally can be found here. More info on managing environments can be found here.

The Supabase CLI has already been downloaded and initialized. Just run npm install and you should be able to follow along with these steps.

 Run the following commands in your terminal to set up supabase locally.
  1. Run supabase login to login to Supabase. Provide the access token you have created.
  2. Run supabase link --project-ref $PROJECT_ID. Replace $PROJECT_ID with the project id. You can find it in the Dashboard settings. Then fill in the database password. You can retrieve this from doppler in the staging environment.
  3. Run the following command to update your local schema with the one online: supabase db remote commit. This will create a new migration. Migrations are applied every time your local database starts. They contain information about how the tables should be created.
  4. You can now run supabase start to start up Supabase. In the terminal you will find information containing the link to your local dashboard (studio), your local Supabase URL & Supabase anon key.

You can run supabase stop to stop the Supabase instance.

Pushing your changes to the dev Supabase

Information on creating a new migration from your local database can be found here.

Populating the local database with data

The supabase/seed.sql contains PostgreSQL queries that are run after the migrations are applied. This file also contains the users for the Cypress tests. Please don't remove this. However, you are free to supply more data in this file.

Supabase in code
  • Check this to find out how to access the Supabase client in your code. The client is used to make calls to Supabase.
  • Check the docs to find out what you can do with this client.

For row level security to work properly when fetching data client-side, you need to make sure to use the supabaseClient from the useSupabaseClient hook and only run your query once the user is defined client-side in the useUser() hook. [source]

Set up Cypress

  • Use cy:open to run the tests in the GUI and cy:run to run the tests in your CLI.
  • Before starting Cypress make sure to have done the following:
    • Run the project locally using either npm run dev or npm run start.
    • Populated your env files with the necessary Cypress environment variables.
      You can check the doppler to find out more about the purpose of some of these variables.
    • Have your Supabase instance running and make sure that your Cypress variables point to it.
    • Use supabase db reset if you have made any changes to the @cypress.com users.
Generating TypeScript types
  • Run supabase gen types typescript --local > src/types/database.ts to create types of your local Supabase instance.
  • Change the file encoding from UTF-16LE to UTF-8 (because of https://github.com/supabase/supabase/issues/9215)
  • To make it easier to call these types, you can create another type for it. Check src/types/database-types.ts on how I've done this. An explanation for this can be found here.
Granting Users the admin claim (JWT)
  • Check this to read more about this topic.

In the Supabase Dashboard, navigate to the SQL editor and write a query with following format: select set_claim('UUID', 'claims_admin', 'true'). The UUID is gathered from the Authentication panel.

After the user logs in (again), admin access exists.

Other

Environment Variables Check the doppler.
NPM Packages

General

  • next-pwa
  • @heroicons/react
  • sharp (for next.js image optimization)
  • react-hook-form
  • date-fns to format Date object

Supabase

  • supabase
  • @supabase/supabase-js
  • @supabase/auth-helpers-nextjs
  • @supabase/auth-helpers-react

Jest

  • jest
  • ts-jest

Prettier

  • eslint-config-prettier
  • husky (for pre-commit hook)
  • lint-staged (to run linters against staged files)
  • prettier
  • prettier-plugin-tailwindcss

Cypress

  • cypress
  • dotenv (Required for retrieving environment variables in Cypress config)

Redux

  • @reduxjs/toolkit
  • next-redux-wrapper
  • react-redux

Initial packages

  • @types/node
  • @types/react
  • @types/react-dom
  • autoprefixer
  • eslint
  • eslint-config-next
  • next
  • postcss
  • react
  • react-dom
  • typescript

Clone this wiki locally