DRP 48

Developing

Prerequisites

• You must have Docker installed.
• You must have NodeJS installed (version doesn't matter too much, but ideally make sure it's not something insanely old like v16).
  • Also make sure you have npm installed (this usually, but not always, comes with nodejs).
• Use vscode for the smoothest experience, otherwise you'll need to configure your IDE manually.
  • VSCode will prompt you to "Install recommended extensions". Allow it to do so.

Getting started

1. Install dependencies with npm install.
2. Start the local Supabase (Database + Authentication) with npx supabase start.
   • You must have Docker installed and running.
   • Visit the dashboard at http://127.0.0.1:54323
3. Copy .env.example into .env, and replace "your-anon-key-here" with the anon key from step 2.
4. Start a local development server with npm run dev.

Useful commands

• npm run dev to run a local development server.
• npm run build to build a production server (output in build/).
• npm run check will type-check the codebase.
• npm run lint will style-check the codebase.
• npm run format will auto-format the codebase.
  • Note that if you're using VSCode with all the suggested extensions, VSCode should be formatting all your files on save.
• npm run gen:types will generate the types for the database.

Database management

• npx supabase start wil start a local dev database
• npx supabase stop will stop the local dev database (data is persisted unless you do a reset).
• npx supabase db push --local will apply migrations to your local dev database. Useful if someone else has made new SQL migrations.
• npx supabase db reset will completely reset the local dev database.
• npx supabase db diff -f <migration-name> will generate a new migration file based on the current state of the database. This isn't 100% foolproof, so don't use it blindly.

What's where?

• supabase/ contains Supabase configurations and database schemas. See the READMEs in there fore more info.
• static/ contains static files. This will probably only ever be favicon.
  • The favicon is the small icon you can see for the website in its browser tab.
• e2e/ contains end-to-end tests. We'll start looking into these a little later.
• .gitlab-ci.yml contains CI scripts.
• src/app.html is the base template HTML file for ALL pages.
• src/lib/ contains any code that isn't specific to some page.
• src/routes/ contains page-specific code.

The reset are just config files that you shouldn't need to read/edit.