This project is a Nuxt starter app with auth and Naive UI using Prisma with D1 database deployed on Cloudflare pages.
Cloudflare offers a worlwide network to serve static content and run serverless code with native object storage and database binding. Nuxt is a fullstack framework for building server-rendered Vue apps and runtime agnostic web services. To get started building Nuxt apps on Cloudflare it's recommended to use Nuxt Hub platform.
Prisma is an ORM that supports edge deployment either via a proxy runnig on Prisma accelerate or via driver adapters. This project uses Cloudflare D1 driver which is introduced on version 5.12.0. The limitations are:
-
This feature is in currently in preview.
-
The query engine is bundled with currently 782kB which limits the app size for the free tier where the server bundle size cannot exceed 1mB.
-
The database migration should be made with Wrangler instead of Prisma migrate command. This project handles the migration workflows via
migrate
scripts.
To get started you will need to have a Cloudflare account.
- Install dependencies.
pnpm install
-
Rename
.example.env
to.env
and set env variables, check @bg-dev/nuxt-auth. -
Deploy the project on Cloudflare Pages and add the env variables.
-
Create a new D1 database and bind it to the Page project.
-
Rename
ex.wrangler.toml
towrangler.toml
and setdatabase_name
anddatabase_id
. This will be used by Wrangler. -
Generate Prisma client
npx prisma generate
- Apply migration on local database.
pnpm migrate:apply
- Apply migration on remote database.
pnpm migrate:apply --remote
- Generate new migration file after updating Prisma schema (optional).
pnpm migrate:generate