D1 Northwind Demo

This repo has the code for https://northwind.d1sql.com/

What we use

• Cloudflare Workers for computing
• D1 for database
• Wrangler for building
• Typescript for better Javascript
• Tailwind CSS for the UI
• React for DOM interaction
• Rollup and plugins for bundling the project

Get the demo running

Requirements:

• You need a Cloudflare Account
• You need to get D1 enabled for your account
• Please join our developers Discord
• Please install nodejs (we're using v18.8.0), npm and npx

Clone this repo

git@github.com:cloudflare/d1-northwind.git

Install packages

npm install

Creating the database

npx wrangler d1 create d1-northwind
npx wrangler d1 create d1-northwind-staging

Get the output database id and add it to wrangler.toml

[[d1_databases]]
binding = "DB"
database_name = "d1-northwind"
database_id = "..."

Importing the database

npx wrangler d1 execute d1-northwind --file db/schema.sql
npx wrangler d1 execute d1-northwind --file db/data.sql

Do the same for northwind-staging if you need the staging environment.

Create KV namespaces

KV is used to store the React application

npx wrangler kv:namespace create assets
npx wrangler kv:namespace create assets --preview

Add the ids to wrangler.toml

React application

Northwind is a React/Redux/Tailwind CSS application. The source code is in the app folder folder.

To build a new version run:

npx rollup -c rollup.app.config.js

Worker backend

Worker serves both the React app bundles from KV, and the Database API endpoints. The source code is in the worker folder.

To build it run:

npx rollup -c rollup.worker.config.js

Or run:

make build

Which will build both the React app, and the Worker. Running wrangler also watches and rebuilds the worker.

Local development

Wrangler D1 has support for local development:

npx wrangler d1 execute d1-northwind --file db/schema.sql --local
npx wrangler d1 execute d1-northwind --file db/data.sql --local
npx wrangler dev --local --persist --env local --assets local-assets --ip 0.0.0.0

Wrangler will persist a local SQLite compatible sql file which you can access to with other clients:

sqlite3 .wrangler/state/d1/DB.sqlite3
.tables

Dev environment

You can test things in the developer environment, remotely.

npx wrangler kv:key put app.js --path ./dist/app.js --binding assets --env dev --preview
npx wrangler kv:key put app.css --path ./dist/app.css --binding assets --env dev --preview
npx wrangler dev --env dev

Or just run

make dev

Deploying

Deploy to production when you're done.

npx wrangler kv:key put app.js --path ./dist/app.js --binding assets --env production
npx wrangler kv:key put app.css --path ./dist/app.css --binding assets --env production
npx wrangler publish --env production

Or simply

make publish

Adding something like this will bind the worker to a specific route/domain.

[env.production]
route = "northwind.d1sql.com/*"