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
• React Router v7 for the React framework

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 clone https://github.com/cloudflare/d1-northwind

Install packages

npm install

Creating the database

npm run remote:new

Get the output database id and add it to worker/wrangler.jsonc

"d1_databases": [
    {
      "binding": "DB",
      "database_name": "northwind",
      "database_id": "..."
    }
  ]

Importing the database

npm run remote:init
npm run remote:load

React application

Northwind is a React application. The source code is in the app folder folder.

To build a new version run:

npm run build

To run the dev server, run:

npm run dev

Local development

This project supports local development:

npm run local:init -w worker
npm run local:load -w worker
npm run dev

This will start the application at http://127.0.0.1:5173 with the database loaded with data.

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

sqlite3 src/.wrangler/state/v3/d1/*/db.sqlite
.tables

Deploying

Deploy to production when you're done.

npm run deploy