cloudflare/d1-northwind
Publicmirrored fromhttps://github.com/cloudflare/d1-northwindAvailable
README.md
110lines · modecode
| 1 | # D1 Northwind Demo |
| 2 | |
| 3 | This repo has the code for https://northwind.d1sql.com/ |
| 4 | |
| 5 | ## What we use |
| 6 | |
| 7 | - Cloudflare [Workers](https://workers.cloudflare.com/) for computing |
| 8 | - [D1](https://blog.cloudflare.com/introducing-d1/) for database |
| 9 | - [Wrangler](https://github.com/cloudflare/wrangler2) for building |
| 10 | - [Typescript](https://www.typescriptlang.org/) for better Javascript |
| 11 | - [Tailwind CSS](https://tailwindcss.com/) for the UI |
| 12 | - [React](https://reactjs.org/) for DOM interaction |
| 13 | - [Remix](https://remix.run/docs/en/main/) for the React framework |
| 14 | |
| 15 | ## Get the demo running |
| 16 | |
| 17 | Requirements: |
| 18 | |
| 19 | - You need a Cloudflare Account |
| 20 | - You need to get D1 [enabled](https://www.cloudflare.com/en-gb/lp/d1/) for your account |
| 21 | - Please join our [developers Discord](https://discord.com/invite/cloudflaredev) |
| 22 | - Please install [nodejs](https://github.com/nvm-sh/nvm) (we're using v18.8.0), npm and [npx](https://www.npmjs.com/package/npx) |
| 23 | |
| 24 | ### Clone this repo |
| 25 | |
| 26 | ``` |
| 27 | git clone https://github.com/cloudflare/d1-northwind |
| 28 | ``` |
| 29 | |
| 30 | 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. |
| 31 | |
| 32 | ### Install packages |
| 33 | |
| 34 | ``` |
| 35 | npm install |
| 36 | ``` |
| 37 | |
| 38 | ### Creating the database |
| 39 | |
| 40 | ``` |
| 41 | npm run db:new |
| 42 | ``` |
| 43 | |
| 44 | Get the output database id and add it to worker/wrangler.toml |
| 45 | |
| 46 | ``` |
| 47 | [[d1_databases]] |
| 48 | binding = "DB" |
| 49 | database_name = "northwind" |
| 50 | database_id = "..." |
| 51 | ``` |
| 52 | |
| 53 | ### Importing the database |
| 54 | |
| 55 | ``` |
| 56 | npm run db:init |
| 57 | npm run db:load |
| 58 | ``` |
| 59 | |
| 60 | ## React application |
| 61 | |
| 62 | Northwind is a React/Remix/Tailwind CSS application. The source code is in the [app folder](./frontend) folder. |
| 63 | |
| 64 | To build a new version run: |
| 65 | |
| 66 | ``` |
| 67 | npm run build -w frontend |
| 68 | ``` |
| 69 | |
| 70 | To run the dev server, run: |
| 71 | |
| 72 | ``` |
| 73 | npm run dev -w frontend |
| 74 | ``` |
| 75 | |
| 76 | ## Worker backend |
| 77 | |
| 78 | Worker serves the Database API endpoints. The source code is in the [worker](./worker) folder. |
| 79 | |
| 80 | ## Local development |
| 81 | |
| 82 | Wrangler D1 has support for local development: |
| 83 | |
| 84 | ``` |
| 85 | npm run local:init -w worker |
| 86 | npm run local:load -w worker |
| 87 | npm run dev -w worker |
| 88 | ``` |
| 89 | |
| 90 | 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: |
| 91 | |
| 92 | ``` |
| 93 | npm run dev -w frontend |
| 94 | ``` |
| 95 | |
| 96 | Wrangler will persist a local SQLite compatible sql file which you can access to with other clients: |
| 97 | |
| 98 | ``` |
| 99 | sqlite3 worker/.wrangler/state/v3/d1/*/db.sqlite |
| 100 | .tables |
| 101 | ``` |
| 102 | |
| 103 | ## Deploying |
| 104 | |
| 105 | Deploy to production when you're done. |
| 106 | |
| 107 | ``` |
| 108 | npm run deploy -w worker |
| 109 | npm run deploy -w frontend |
| 110 | ``` |
| 111 | |