/devscale-nextjs-canary-r2

🧊 Template Project Next.js (Canary Version), Prisma, and Cloudflare R2 for Bootcamp devscale.id

Primary LanguageJavaScriptMIT LicenseMIT

🧊 Template Project Next.js (Canary Version), Prisma ORM, and AWS S3 for Cloudflare R2

Note

Template Project Next.js (Canary Version), Prisma ORM, and AWS S3 for Cloudflare R2 for Bootcamp devscale.id.

This is an example template, already set up:

Environment Variables

  • JWT_SECRET

Vercel Postgres

  • POSTGRES_URL
  • POSTGRES_PRISMA_URL
  • POSTGRES_URL_NO_SSL
  • POSTGRES_URL_NON_POOLING
  • POSTGRES_USER
  • POSTGRES_HOST
  • POSTGRES_PASSWORD
  • POSTGRES_DATABASE

OAuth Google Cloud Console

  • GOOGLE_CLIENT_ID
  • GOOGLE_SECRET_KEY
  • GOOGLE_REDIRECT_URI

Cloudflare R2

  • R2_BUCKET_NAME
  • R2_ACCESS_KEY
  • R2_SECRET_KEY
  • R2_UPLOAD_ENDPOINT
  • R2_PUBLIC_URL

How to use it:

  1. Clone this repo or use as template:
  • Clone the repo.
git clone https://github.com/Devscale-Indonesia/devscale-nextjs-canary-r2.git <project-name>
# at current directory/folder
git clone https://github.com/Devscale-Indonesia/devscale-nextjs-canary-r2.git .

# using ssh
git clone git@github.com:Devscale-Indonesia/devscale-nextjs-canary-r2.git <project-name>
# at current directory/folder
git clone git@github.com:Devscale-Indonesia/devscale-nextjs-canary-r2.git .
  • Create project with template.
npx create-next-app@latest -e https://github.com/Devscale-Indonesia/devscale-nextjs-canary-r2 <project-name>
# at current directory/folder
npx create-next-app@latest -e https://github.com/Devscale-Indonesia/devscale-nextjs-canary-r2 .
  1. Move to directory
cd <project-name>
  1. Install dependencies:
npm install
  1. Copy the .env.example to .env:
cp .env.example .env
  1. Setting provider database and create database model in the schema.prisma file.
prisma
    └── schema.prisma
  1. Do prisma migration:

Warning

This step if the database provider used is SQLite, otherwise ignore it and skip this step.

npm run db:migrate
  1. Use db push to push the initial schema to the database:
npm run db:push
  1. Do prisma generate:
npx prisma generate
  1. Run the development server:
npm run dev

  1. Open http://localhost:3000 with your browser to see the result.

  2. Do prisma studio:

npm run db:studio
  1. Open http://localhost:5555 with your browser to see the result.

Deployment

Tip

Don't forget adding prisma generate to the existing script build command Vercel.

Vercel UI's build script field

Another way to configure prisma generate to be run on every deployment is to add the command to the build settings via Vercel's UI.

Within your project's dashboard, go to the Settings tab and find the General section. In that section you will find a box labeled Build & Development Settings that contains an input field named Build Command:

build-command-1

Within that field, prepend prisma generate to the existing script:

prisma generate && next build

build-command-2

Reference: Vercel build dependency caching workaround