A demonstration using Nuxt with server-side rendering on the edge, authentication and database querying using SQLite in production.
Demo: https://nuxt-guestbook.pages.dev
- Server-Side Rendering on the Edge
- Authentication backed-in using nuxt-auth-utils
- Leverage SQLite as database with migrations using drizzle ORM
- User interface made with Nuxt UI and Nuxt UI Pro
Make sure to install the dependencies using pnpm:
pnpm i
Create a GitHub Oauth Application with:
- Homepage url:
http://localhost:3000
- Callback url:
http://localhost:3000/auth/github
Add the variables in the .env
file:
NUXT_OAUTH_GITHUB_CLIENT_ID="my-github-oauth-app-id"
NUXT_OAUTH_GITHUB_CLIENT_SECRET="my-github-oauth-app-secret"
To create sealed sessions, you also need to add NUXT_SESSION_SECRET
in the .env
with at least 32 characters:
NUXT_SESSION_SECRET=your-super-long-secret-for-session-encryption
Start the development server on http://localhost:3000
npm run dev
Create a CF pages deployment linked to your GitHub repository and select the Nuxt.js preset.
To build the guestbook in production, you need a Nuxt UI Pro license.
NUXT_OAUTH_GITHUB_CLIENT_ID=...
NUXT_OAUTH_GITHUB_CLIENT_SECRET=...
NUXT_SESSION_PASSWORD=...
NUXT_UI_PRO_LICENSE=...
Set the build command to:
npm run build
And the output directory to dist/
Lastly, in the project settings -> Functions, add the binding between your D1 database and the DB
variable:
Copy the contents from server/db/migrations/0000_absent_nightshade.sql
into the D1 console to seed the database.