/supabase-playground

Playing with Supabase

Primary LanguageJavaScript

Setup

  1. npm create vite and install the dependencies.
  2. Add server config to vite.config.js:
export default defineConfig({
	plugins: [react()],
	server: {
		hrm: {},
		port: 1337
	}
});
  1. Remove "type": "module" from package.json.
  2. Run npm i -D supabase to add superbase (run npx supabase --help to confirm installation).
  3. Run npx supabase init to initialize supabase.
  4. Run npx supabase start to run the supabase instance(make sure Docker daemon is running).
  5. Create a .env file in the root directory and add the following:
VITE_SUPABASE_ANON_KEY=xxx
VITE_SUPABASE_URL=xxx
  1. Go to Supabase Projects and create a new project.
  2. Create .env.production and add the following based on the project created in step 8:
VITE_SUPABASE_ANON_KEY=xxx
VITE_SUPABASE_URL=xxx
  1. Go to Local Supabase Dashboard and go to Authentication tab and turn off Confirm Email locally.
  2. Open up supabase/config.toml and change double_confirm_changes and enable_confirmations to false. (Leave those on for prod environment.)
  3. Create a migration file using npx supabase migration new original-ddl.

E2E Testing(Optional) Using Playwright

  1. Run npm create playwright to add playwright.
  2. In playwright.config.js, uncomment the following(also turn on Chrome and Mobile Chrome):
webServer: {
	command: 'npm run dev',
	port: 1337,
	reuseExistingServer: true
},
  1. Install detect-port using npm i -D detect-port, then create e2e/utils.js with the same content.
  2. Create supabase/clear-db-data.sql with the same content.

Routing

Connect to Supabase

  1. Install auth with npm i @supabase/auth-ui-react.
  2. Install API connector npm i @supabase/supabase-js.
  3. Write Postgres schemas in supabase/migrations/xxx_original_ddl.sql.