https://github.com/cloudflare/d1-northwind
Northwind Traders D1 Demo
https://github.com/cloudflare/d1-northwind
cloudflare-workers d1
Last synced: 6 months ago
JSON representation
Northwind Traders D1 Demo
- Host: GitHub
- URL: https://github.com/cloudflare/d1-northwind
- Owner: cloudflare
- License: mit
- Created: 2022-06-30T16:17:07.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-03-25T10:41:53.000Z (6 months ago)
- Last Synced: 2025-03-28T22:12:14.896Z (6 months ago)
- Topics: cloudflare-workers, d1
- Language: TypeScript
- Homepage: https://northwind.d1sql.com/
- Size: 5.55 MB
- Stars: 130
- Watchers: 12
- Forks: 34
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# D1 Northwind Demo
This repo has the code for https://northwind.d1sql.com/
## What we use
- Cloudflare [Workers](https://workers.cloudflare.com/) for computing
- [D1](https://blog.cloudflare.com/introducing-d1/) for database
- [Wrangler](https://github.com/cloudflare/wrangler2) for building
- [Typescript](https://www.typescriptlang.org/) for better Javascript
- [Tailwind CSS](https://tailwindcss.com/) for the UI
- [React](https://reactjs.org/) for DOM interaction
- [Remix](https://remix.run/docs/en/main/) for the React framework
## Get the demo running
Requirements:
- You need a Cloudflare Account
- You need to get D1 [enabled](https://www.cloudflare.com/en-gb/lp/d1/) for your account
- Please join our [developers Discord](https://discord.com/invite/cloudflaredev)
- Please install [nodejs](https://github.com/nvm-sh/nvm) (we're using v18.8.0), npm and [npx](https://www.npmjs.com/package/npx)
### Clone this repo
```
git clone https://github.com/cloudflare/d1-northwind
```
Note that this repository uses [npm workspaces](https://docs.npmjs.com/cli/v9/using-npm/workspaces?v=true) to manage dependencies. You can run either Worker's npm commands from the root of the repo by adding either `-w frontend` or `-w worker` to your npm command.
### Install packages
```
npm install
```
### Creating the database
```
npm run db:new
```
Get the output database id and add it to worker/wrangler.toml
```
[[d1_databases]]
binding = "DB"
database_name = "northwind"
database_id = "..."
```
### Importing the database
```
npm run db:init
npm run db:load
```
## React application
Northwind is a React/Remix/Tailwind CSS application. The source code is in the [app folder](./frontend) folder.
To build a new version run:
```
npm run build -w frontend
```
To run the dev server, run:
```
npm run dev -w frontend
```
## Worker backend
Worker serves the Database API endpoints. The source code is in the [worker](./worker) folder.
## Local development
Wrangler D1 has support for local development:
```
npm run local:init -w worker
npm run local:load -w worker
npm run dev -w worker
```
This will start the Worker at `http://127.0.0.1:8787` with the database loaded with data. At this point you can start the frontend in a separate terminal window:
```
npm run dev -w frontend
```
Wrangler will persist a local SQLite compatible sql file which you can access to with other clients:
```
sqlite3 worker/.wrangler/state/v3/d1/*/db.sqlite
.tables
```
## Deploying
Deploy to production when you're done.
```
npm run deploy -w worker
npm run deploy -w frontend
```