Nuxt Guestbook

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

Features

• 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

Setup

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

Development

Start the development server on http://localhost:3000

npm run dev

Deploy on CloudFlare Pages

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.

Environment variables

NUXT_OAUTH_GITHUB_CLIENT_ID=...
NUXT_OAUTH_GITHUB_CLIENT_SECRET=...
NUXT_SESSION_PASSWORD=...
NUXT_UI_PRO_LICENSE=...

Build command

Set the build command to:

npm run build

And the output directory to dist/

D1 Database

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.

License

MIT License