🧊 Template Project Next.js (Tailwind CSS v3), Prisma ORM, and AWS S3 for Cloudflare R2

Note

Template Project Next.js (Tailwind CSS v3), Prisma ORM, and AWS S3 for Cloudflare R2 for Bootcamp devscale.id.

This is an example template, already set up:

• HeroUI
• Prisma
• Cloudflare R2
• bcrypt
• Arctic

Environment Variables

• DATABASE_URL
• JWT_SECRET

OAuth Google Cloud Console

• GOOGLE_CLIENT_ID
• GOOGLE_CLIENT_SECRET
• GOOGLE_REDIRECT_URI

Cloudflare R2

• R2_CLIENT_ID
• R2_CLIENT_SECRET
• R2_S3_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-r2.git <project-name>
# at current directory/folder
git clone https://github.com/Devscale-Indonesia/devscale-nextjs-r2.git .

# using ssh
git clone [email protected]:Devscale-Indonesia/devscale-nextjs-r2.git <project-name>
# at current directory/folder
git clone [email protected]:Devscale-Indonesia/devscale-nextjs-r2.git .

• Create project with template.

npx create-next-app@latest -e https://github.com/Devscale-Indonesia/devscale-nextjs-r2 <project-name>
# at current directory/folder
npx create-next-app@latest -e https://github.com/Devscale-Indonesia/devscale-nextjs-r2 .

2. Move to directory

cd <project-name>

3. Install dependencies:

npm install

4. Copy the .env.example to .env:

cp .env.example .env

5. Setting provider database and create database model in the schema.prisma file.

prisma
    └── schema.prisma

6. Do prisma migration:

Warning

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

npm run db:migrate

7. Use db push to push the initial schema to the database:

npm run db:push

8. Do prisma generate:

npx prisma generate

9. Run the development server:

npm run dev

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

11. Do prisma studio:

npm run db:studio

12. 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:

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

prisma generate && next build

Reference: Vercel build dependency caching workaround