In our project, we utilize Supabase as it complements our use of Next.js, which deploys apps in a serverless environment. This approach can lead to numerous connections, potentially causing database pooling issues. However, with Supabase, we can confidently avoid such problems. Additionally, we employ Prisma to streamline database setup in test environments or for other contributors.
For more information on the installation process, please refer to the #installation section.
-
Create Supabase project
-
Set alias in your bash and set supabase project reference id
alias SUPABASE_PROJECT_DOOBOOIO =
Now, you can generate supabase types with our script.
generate:supabase
Run yarn migrate:dev
to you local database then when every is done right, you can then run yarn migrate:prod
to update production database in Supabase.
Add below script in supabase
to use @default(dbgenerated("gen_random_uuid()"))
.
CREATE EXTENSION IF NOT EXISTS pgcrypto;
Create storage bucket public
as Public bucket
and create new policy to public
with custom rule as shown below.
cp .env.sample .env.local
Check the environment variables stated in Environment variables and replace to your own.
We recommend to have 3 environments as shown below.
- .env.dev
- .env.local
- .env.prod
Try migrating database to
.env.dev
then run on.env.local
when developing and in staging. If everything is done,.env.prod
is for you for production.
NEXT_PUBLIC_ROOT_URL
Base url of your web app.
JWT_SECRET
Used in server-side when you want to encode & decode data when communicating with client.
DATABASE_URL
Database connection url to access database in Supabase. You do not need to set this variable in Vercel.
NEXT_PUBLIC_SUPABASE_URL
Supabase database url. NEXT_PUBLIC_
prefix is needed because this is used in both browser and server.
NEXT_PUBLIC_SUPABASE_ANON_KEY
Supabase api key. NEXT_PUBLIC_
prefix is needed because this is used in both browser and server.
GITHUB_CLIENT_ID
The github client id to access github api.
GITHUB_CLIENT_SECRET
The github client secret to access github api.
GH_TOKEN
The github token to use github authentication.
We strongly recommend to organize multiple environment files for prisma migration or testing.
cp `.env.sample` `.env.dev` // For Prisma migration
cp `.env.sample` `.env.test` // For testing
cp `.env.sample` `.env.local` // For developing
yarn set version berry
yarn
yarn dlx @yarnpkg/sdks vscode
yarn plugin import typescript
yarn dlx @yarnpkg/sdks vscode
- Useful when prettier extension is not working.