From 190c9542e32c3a5261631a56b0c80744c51d320f Mon Sep 17 00:00:00 2001 From: Lars-Erik Roald Date: Fri, 21 Feb 2025 08:39:22 +0100 Subject: [PATCH 01/24] orange tutorial --- .../d1/tutorials/d1-and-orange-orm/index.mdx | 261 ++++++++++++++++++ 1 file changed, 261 insertions(+) create mode 100644 src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx diff --git a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx new file mode 100644 index 000000000000000..9cc4e4ec6cec4c9 --- /dev/null +++ b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx @@ -0,0 +1,261 @@ +--- +updated: 2025-02-21 +difficulty: Beginner +content_type: Tutorial +pcx_content_type: tutorial +title: Query D1 using Orange ORM +products: + - Workers +languages: + - TypeScript + - SQL +--- + +import { WranglerConfig } from "~/components"; + +## What is Orange ORM? + +[Orange ORM](https://github.com/alfateam/orange-orm) is an Object Relational Mapper for Typescript, offering seamless integration with a variety of popular databases. Whether you're building applications in TypeScript or JavaScript, including both CommonJS and ECMAScript, Orange ORM has got you covered. + +- **Rich Querying Model**: Orange provides a powerful and intuitive querying model, making it easy to retrieve, filter, and manipulate data from your databases. +- **Active Record**: With a concise and expressive syntax, Orange enables you to interact with your database using the [*Active Record Pattern*](https://en.wikipedia.org/wiki/Active_record_pattern). +- **No Code Generation Required**: Enjoy full IntelliSense, even in table mappings, without the need for cumbersome code generation. +- **TypeScript and JavaScript Support**: Orange fully supports both TypeScript and JavaScript, allowing you to leverage the benefits of static typing and modern ECMAScript features. +- **Works in the Browser**: You can securely use Orange in the browser by utilizing the Express.js plugin, which serves to safeguard sensitive database credentials from exposure at the client level and protect against SQL injection. This method mirrors a traditional REST API, augmented with advanced TypeScript tooling for enhanced functionality. + + +## Query D1 from a Cloudflare Worker using Orange ORM + +This example shows you how to set up and deploy a Cloudflare Worker that is accessing a D1 database from scratch. + +### Prerequisites + +- [`Node.js`](https://nodejs.org/en/) and [`npm`](https://docs.npmjs.com/getting-started) installed on your machine. +- A [Cloudflare account](https://dash.cloudflare.com). + +### 1. Create a Cloudflare Worker + +Open your terminal, and run the following command to create a Cloudflare Worker using Cloudflare's [`hello-world`](https://github.com/cloudflare/workers-sdk/tree/4fdd8987772d914cf50725e9fa8cb91a82a6870d/packages/create-cloudflare/templates/hello-world) template: + +```sh +npm create cloudflare@latest orange-d1-example -- --type hello-world +``` + +In your terminal, you will be asked a series of questions related your project: + +1. Answer `yes` to using TypeScript. +2. Answer `yes` to deploying your Worker. + +Once you deploy your Worker, you should be able to preview your Worker at `https://orange-d1-example.USERNAME.workers.dev`, which displays "Hello World" in the browser. + +### 2. Install Orange ORM + +:::note + +D1 is supported in Orange ORM as of [v4.5.0](https://github.com/alfateam/orange-orm/releases/tag/v4.5.0). + +::: + +```sh +cd orange-d1-example +npm install orange-orm + + +### 3. Create your D1 database + +In this step, you will set up your D1 database. You can create a D1 database via the [Cloudflare dashboard](https://dash.cloudflare.com), or via `wrangler`. This tutorial will use the `wrangler` CLI. + +Open your terminal and run the following command: + +```sh +npx wrangler d1 create orange-demo-db +``` + +You should receive the following output on your terminal: + +``` +✅ Successfully created DB 'orange-demo-db' in region EEUR +Created your database using D1's new storage backend. The new storage backend is not yet recommended for production workloads, but backs up your data via +point-in-time restore. + +{ + "d1_databases": [ + { + "binding": "DB", + "database_name": "orange-demo-db", + "database_id": "__YOUR_D1_DATABASE_ID__" + } + ] +} +``` + +You now have a D1 database in your Cloudflare account with a binding to your Cloudflare Worker. + +Copy the last part of the command output and paste it into your Wrangler file. It should look similar to this: + + + +```jsonc +{ + "$schema": "node_modules/wrangler/config-schema.json", + "name": "orange-d1-example", + "main": "src/index.ts", + "compatibility_date": "2025-02-14", + "observability": { + "enabled": true + }, + "d1_databases": [ + { + "binding": "DB", + "database_name": "orange-demo-db", + "database_id": "__YOUR_D1_DATABASE_ID__" + } + ] +} +``` + + + +`__YOUR_D1_DATABASE_ID__` should be replaced with the database ID of your D1 instance. If you were not able to fetch this ID from the terminal output, you can also find it in the [Cloudflare dashboard](https://dash.cloudflare.com/), or by running `npx wrangler d1 info orange-demo-db` in your terminal. + +Next, you will create a database table in the database to send queries to D1 using Orange ORM. + +### 4. Create a table in the database + + +D1 has a [migration system](/d1/reference/migrations), and in the following steps, you will use D1's migration system to create and run a migration against your database. + +First, create a new migration using `wrangler`: + +```sh +npx wrangler d1 migrations create orange-demo-db create_user_table +``` + +Answer `yes` to creating a new folder called `migrations`. + +The command has now created a new directory called `migrations` and an empty file called `0001_create_user_table.sql` inside of it: + +``` +migrations/ +└── 0001_create_user_table.sql +``` + +Edit the file so this is what it looks like: + +```sql +-- CreateTable +CREATE TABLE "User" ( + "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, + "email" TEXT NOT NULL, + "name" TEXT +); + +-- CreateIndex +CREATE UNIQUE INDEX "User_email_key" ON "User"("email"); +``` + + +You now need to use the `wrangler d1 migrations apply` command to send this SQL statement to D1. This command accepts two options: + +- `--local`: Executes the statement against a _local_ version of D1. This local version of D1 is a SQLite database file that will be located in the `.wrangler/state` directory of your project. Use this approach when you want to develop and test your Worker on your local machine. Refer to [Local development](/d1/best-practices/local-development/) to learn more. +- `--remote`: Executes the statement against your _remote_ version of D1. This version is used by your _deployed_ Cloudflare Workers. Refer to [Remote development](/d1/best-practices/remote-development/) to learn more. + +In this tutorial, you will do local and remote development. You will test the Worker locally and deploy your Worker afterwards. Open your terminal, and run both commands: + +```sh +# For the local database +npx wrangler d1 migrations apply orange-demo-db --local +``` + +```sh +# For the remote database +npx wrangler d1 migrations apply orange-demo-db --remote +``` + +Choose `Yes` both times when you are prompted to confirm that the migration should be applied. + +Next, create some data that you can query once the Worker is running. This time, you will run the SQL statement without storing it in a file: + +```sh +# For the local database +npx wrangler d1 execute orange-demo-db --command "INSERT INTO \"User\" (\"email\", \"name\") VALUES ('jane@orange-orm.io', 'Jane Doe (Local)');" --local +``` + +```sh +# For the remote database +npx wrangler d1 execute orange-demo-db --command "INSERT INTO \"User\" (\"email\", \"name\") VALUES ('jane@orange-orm.io', 'Jane Doe (Remote)');" --remote +``` + +### 5. Query your database from the Worker + +To query your database from the Worker using Orange ORM, you need to: + +1. Add a `map,ts` to the `src` folder. +2. Instantiate the orange-orm with the D1 instance . +3. Send a query using the orange client and return the result. + +Create `src/map.ts` with the following content: +```ts +import orange from 'orange-orm'; + +const map = orange.map(x => ({ + user: x.table('user').map(({ column }) => ({ + id: column('id').numeric().primary(), + email: column('email').string(), + name: column('name').string(), + })) +})); + +export default map; +``` +Open `src/index.ts` and replace the entire content with the following: + +```ts +import map from './map'; + +export interface Env { + DB: D1Database; +} +export default { + async fetch(request, env, ctx): Promise { + const db = map.d1(env.DB); + const users = await db.user.getAll(); + return Response.json(users); + }, +} satisfies ExportedHandler; +``` + +### 6. Run the Worker locally + +```sh +npm run dev +``` + +Open your browser at [`http://localhost:8787`](http://localhost:8787/) to check the result of the database query: + +```json +[{ "id": 1, "email": "jane@orange-orm.io", "name": "Jane Doe (Local)" }] +``` + +### 7. Deploy the Worker + +To deploy the Worker, run the following command: + +```sh +npm run deploy +``` + +Access your Worker at `https://orange-d1-example.USERNAME.workers.dev`. Your browser should display the following data queried from your remote D1 database: + +```json +[{ "id": 1, "email": "jane@orange-orm.io", "name": "Jane Doe (Remote)" }] +``` + +By finishing this tutorial, you have deployed a Cloudflare Worker using D1 as a database and querying it via Orange ORM. + +## Related resources + +- [Orange ORM documentation](https://github.com/alfatea/orange-orm). +- To get help, open a new [GitHub Discussion](https://github.com/alfateam/orange-orm/discussions). +- Check out the [youtube video](https://youtu.be/1IwwjPr2lMs). +- Check out the [Discord](https://discord.gg/QjuEgvQXzd). From b5db0d752b595a10bce22702d64caee48b5a2bb8 Mon Sep 17 00:00:00 2001 From: Lars-Erik Roald Date: Fri, 21 Feb 2025 08:47:07 +0100 Subject: [PATCH 02/24] typos --- src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx index 9cc4e4ec6cec4c9..77540e898e6dd33 100644 --- a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx +++ b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx @@ -59,7 +59,7 @@ D1 is supported in Orange ORM as of [v4.5.0](https://github.com/alfateam/orange- ```sh cd orange-d1-example npm install orange-orm - +``` ### 3. Create your D1 database @@ -190,7 +190,7 @@ npx wrangler d1 execute orange-demo-db --command "INSERT INTO \"User\" (\"email To query your database from the Worker using Orange ORM, you need to: -1. Add a `map,ts` to the `src` folder. +1. Add a `map.ts` to the `src` folder. 2. Instantiate the orange-orm with the D1 instance . 3. Send a query using the orange client and return the result. @@ -257,5 +257,5 @@ By finishing this tutorial, you have deployed a Cloudflare Worker using D1 as a - [Orange ORM documentation](https://github.com/alfatea/orange-orm). - To get help, open a new [GitHub Discussion](https://github.com/alfateam/orange-orm/discussions). -- Check out the [youtube video](https://youtu.be/1IwwjPr2lMs). +- Watch the [youtube video](https://youtu.be/1IwwjPr2lMs). - Check out the [Discord](https://discord.gg/QjuEgvQXzd). From 10d049668719e6fa25fd3dd782ca557bf09643ef Mon Sep 17 00:00:00 2001 From: Lars-Erik Roald Date: Fri, 21 Feb 2025 08:55:21 +0100 Subject: [PATCH 03/24] jsonc --- src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx index 77540e898e6dd33..7cbc07cff9ce126 100644 --- a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx +++ b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx @@ -91,7 +91,7 @@ point-in-time restore. You now have a D1 database in your Cloudflare account with a binding to your Cloudflare Worker. -Copy the last part of the command output and paste it into your Wrangler file. It should look similar to this: +Copy the last part of the command output and paste it into your `wrangler.jsonc` file. It should look similar to this: @@ -257,5 +257,6 @@ By finishing this tutorial, you have deployed a Cloudflare Worker using D1 as a - [Orange ORM documentation](https://github.com/alfatea/orange-orm). - To get help, open a new [GitHub Discussion](https://github.com/alfateam/orange-orm/discussions). -- Watch the [youtube video](https://youtu.be/1IwwjPr2lMs). - Check out the [Discord](https://discord.gg/QjuEgvQXzd). +- Watch the [youtube video](https://youtu.be/1IwwjPr2lMs). +- See the interview [with the author](https://www.youtube.com/watch?v=roCK6HQlyHQ). From 7f839dc74a9bc3a830cdc40920081c3e6777b3c3 Mon Sep 17 00:00:00 2001 From: Lars-Erik Roald Date: Fri, 21 Feb 2025 09:36:18 +0100 Subject: [PATCH 04/24] typos --- src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx index 7cbc07cff9ce126..fbbb35cd3e1425b 100644 --- a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx +++ b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx @@ -140,7 +140,7 @@ migrations/ └── 0001_create_user_table.sql ``` -Edit the file so this is what it looks like: +Edit the file so it looks like this: ```sql -- CreateTable @@ -255,8 +255,8 @@ By finishing this tutorial, you have deployed a Cloudflare Worker using D1 as a ## Related resources -- [Orange ORM documentation](https://github.com/alfatea/orange-orm). +- [Orange ORM documentation](https://github.com/alfateam/orange-orm). - To get help, open a new [GitHub Discussion](https://github.com/alfateam/orange-orm/discussions). - Check out the [Discord](https://discord.gg/QjuEgvQXzd). - Watch the [youtube video](https://youtu.be/1IwwjPr2lMs). -- See the interview [with the author](https://www.youtube.com/watch?v=roCK6HQlyHQ). +- Watch the [interview with the author](https://www.youtube.com/watch?v=roCK6HQlyHQ). From c1077303a23202f512fc129c5eb0f46e824e8683 Mon Sep 17 00:00:00 2001 From: Lars-Erik Roald Date: Fri, 21 Feb 2025 13:06:43 +0100 Subject: [PATCH 05/24] Update src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx Co-authored-by: hyperlint-ai[bot] <154288675+hyperlint-ai[bot]@users.noreply.github.com> --- src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx index fbbb35cd3e1425b..0c856ffa01697c3 100644 --- a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx +++ b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx @@ -15,7 +15,7 @@ import { WranglerConfig } from "~/components"; ## What is Orange ORM? -[Orange ORM](https://github.com/alfateam/orange-orm) is an Object Relational Mapper for Typescript, offering seamless integration with a variety of popular databases. Whether you're building applications in TypeScript or JavaScript, including both CommonJS and ECMAScript, Orange ORM has got you covered. +[Orange ORM](https://github.com/alfateam/orange-orm) is an Object Relational Mapper for TypeScript, offering seamless integration with a variety of popular databases. Whether you're building applications in TypeScript or JavaScript, including both CommonJS and ECMAScript, Orange ORM has got you covered. - **Rich Querying Model**: Orange provides a powerful and intuitive querying model, making it easy to retrieve, filter, and manipulate data from your databases. - **Active Record**: With a concise and expressive syntax, Orange enables you to interact with your database using the [*Active Record Pattern*](https://en.wikipedia.org/wiki/Active_record_pattern). From 4ccae3e0ecacaa84b2c84dc8a4bef5ed506a41ce Mon Sep 17 00:00:00 2001 From: Lars-Erik Roald Date: Tue, 25 Feb 2025 16:07:48 +0100 Subject: [PATCH 06/24] Update src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx Co-authored-by: Jun Lee --- src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx index 0c856ffa01697c3..a6e7b3b13528ba0 100644 --- a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx +++ b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx @@ -15,7 +15,7 @@ import { WranglerConfig } from "~/components"; ## What is Orange ORM? -[Orange ORM](https://github.com/alfateam/orange-orm) is an Object Relational Mapper for TypeScript, offering seamless integration with a variety of popular databases. Whether you're building applications in TypeScript or JavaScript, including both CommonJS and ECMAScript, Orange ORM has got you covered. +[Orange ORM](https://github.com/alfateam/orange-orm) is an Object Relational Mapper for TypeScript, offering seamless integration with a variety of popular databases. Orange ORM supports both TypeScript and JavaScript, including both CommonJS and ECMAScript. - **Rich Querying Model**: Orange provides a powerful and intuitive querying model, making it easy to retrieve, filter, and manipulate data from your databases. - **Active Record**: With a concise and expressive syntax, Orange enables you to interact with your database using the [*Active Record Pattern*](https://en.wikipedia.org/wiki/Active_record_pattern). From e45f1615d087d47f06fecf803f9457c37b50db4d Mon Sep 17 00:00:00 2001 From: Jun Lee Date: Tue, 25 Feb 2025 16:24:34 +0000 Subject: [PATCH 07/24] Update src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx --- src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx index a6e7b3b13528ba0..bec1d3f08a217d2 100644 --- a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx +++ b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx @@ -11,7 +11,7 @@ languages: - SQL --- -import { WranglerConfig } from "~/components"; +import { WranglerConfig, PackageManagers, Render, FileTree } from "~/components"; ## What is Orange ORM? From becc38dbb932464cb94f73f783ecc6af80ae2b67 Mon Sep 17 00:00:00 2001 From: Jun Lee Date: Tue, 25 Feb 2025 16:24:45 +0000 Subject: [PATCH 08/24] Update src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx --- .../d1/tutorials/d1-and-orange-orm/index.mdx | 21 ++++++++++++------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx index bec1d3f08a217d2..a8d894498812c23 100644 --- a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx +++ b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx @@ -37,14 +37,19 @@ This example shows you how to set up and deploy a Cloudflare Worker that is acce Open your terminal, and run the following command to create a Cloudflare Worker using Cloudflare's [`hello-world`](https://github.com/cloudflare/workers-sdk/tree/4fdd8987772d914cf50725e9fa8cb91a82a6870d/packages/create-cloudflare/templates/hello-world) template: -```sh -npm create cloudflare@latest orange-d1-example -- --type hello-world -``` - -In your terminal, you will be asked a series of questions related your project: - -1. Answer `yes` to using TypeScript. -2. Answer `yes` to deploying your Worker. +1. Create a Worker named `d1-http` by running: + + + + Once you deploy your Worker, you should be able to preview your Worker at `https://orange-d1-example.USERNAME.workers.dev`, which displays "Hello World" in the browser. From c1c721c902f8c9f6949e9e229afe4a7efc1f444f Mon Sep 17 00:00:00 2001 From: Jun Lee Date: Tue, 25 Feb 2025 16:25:01 +0000 Subject: [PATCH 09/24] Update src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx --- src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx index a8d894498812c23..4373b4cd11a8e89 100644 --- a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx +++ b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx @@ -51,7 +51,11 @@ Open your terminal, and run the following command to create a Cloudflare Worker }} /> -Once you deploy your Worker, you should be able to preview your Worker at `https://orange-d1-example.USERNAME.workers.dev`, which displays "Hello World" in the browser. +2. Change into your new project directory to start developing: + + ```sh frame="none" + cd orange-d1-example + ``` ### 2. Install Orange ORM From e94698a961a72228705a342c0a2961f7d5badf1c Mon Sep 17 00:00:00 2001 From: Jun Lee Date: Tue, 25 Feb 2025 16:25:34 +0000 Subject: [PATCH 10/24] Update src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx --- src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx index 4373b4cd11a8e89..3560138bd974957 100644 --- a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx +++ b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx @@ -68,7 +68,7 @@ D1 is supported in Orange ORM as of [v4.5.0](https://github.com/alfateam/orange- ```sh cd orange-d1-example npm install orange-orm -``` +You can create a D1 database via the [Cloudflare dashboard](https://dash.cloudflare.com), or via `wrangler`. This tutorial uses the `wrangler` CLI. ### 3. Create your D1 database From 8b22133be5495b00cfd8cac921403123cfcea566 Mon Sep 17 00:00:00 2001 From: Jun Lee Date: Tue, 25 Feb 2025 16:27:23 +0000 Subject: [PATCH 11/24] Update src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx --- src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx index 3560138bd974957..dcd2bdc66f80186 100644 --- a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx +++ b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx @@ -57,6 +57,10 @@ Open your terminal, and run the following command to create a Cloudflare Worker cd orange-d1-example ``` + ```sh frame="none" + cd orange-d1-example + ``` + ### 2. Install Orange ORM :::note From bd95525ad7298638a792fdd386bea7d67b8aaaee Mon Sep 17 00:00:00 2001 From: Jun Lee Date: Tue, 25 Feb 2025 16:27:56 +0000 Subject: [PATCH 12/24] Apply suggestions from code review --- .../docs/d1/tutorials/d1-and-orange-orm/index.mdx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx index dcd2bdc66f80186..7fbaf43c7e3b39f 100644 --- a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx +++ b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx @@ -76,7 +76,7 @@ You can create a D1 database via the [Cloudflare dashboard](https://dash.cloudfl ### 3. Create your D1 database -In this step, you will set up your D1 database. You can create a D1 database via the [Cloudflare dashboard](https://dash.cloudflare.com), or via `wrangler`. This tutorial will use the `wrangler` CLI. +You can create a D1 database via the [Cloudflare dashboard](https://dash.cloudflare.com), or via `wrangler`. This tutorial uses the `wrangler` CLI. Open your terminal and run the following command: @@ -96,7 +96,7 @@ point-in-time restore. { "binding": "DB", "database_name": "orange-demo-db", - "database_id": "__YOUR_D1_DATABASE_ID__" + "database_id": "" } ] } @@ -104,7 +104,7 @@ point-in-time restore. You now have a D1 database in your Cloudflare account with a binding to your Cloudflare Worker. -Copy the last part of the command output and paste it into your `wrangler.jsonc` file. It should look similar to this: +Copy the `json` snippet from the command output and paste it into your `wrangler.jsonc` file. Your `wrangler.jsonc` file should look similar to the following: @@ -121,7 +121,7 @@ Copy the last part of the command output and paste it into your `wrangler.jsonc` { "binding": "DB", "database_name": "orange-demo-db", - "database_id": "__YOUR_D1_DATABASE_ID__" + "database_id": "" } ] } @@ -129,7 +129,7 @@ Copy the last part of the command output and paste it into your `wrangler.jsonc` -`__YOUR_D1_DATABASE_ID__` should be replaced with the database ID of your D1 instance. If you were not able to fetch this ID from the terminal output, you can also find it in the [Cloudflare dashboard](https://dash.cloudflare.com/), or by running `npx wrangler d1 info orange-demo-db` in your terminal. +`` should be replaced with the database ID of your D1 instance. If you were not able to fetch this ID from the terminal output, you can also find it in the [Cloudflare dashboard](https://dash.cloudflare.com/), or by running `npx wrangler d1 info orange-demo-db` in your terminal. Next, you will create a database table in the database to send queries to D1 using Orange ORM. From 5e17422d9230b45ef376e5f8516919ec45a358b1 Mon Sep 17 00:00:00 2001 From: Jun Lee Date: Tue, 25 Feb 2025 16:28:58 +0000 Subject: [PATCH 13/24] Apply suggestions from code review --- src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx index 7fbaf43c7e3b39f..3e81fa6a7854555 100644 --- a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx +++ b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx @@ -131,14 +131,13 @@ Copy the `json` snippet from the command output and paste it into your `wrangler `` should be replaced with the database ID of your D1 instance. If you were not able to fetch this ID from the terminal output, you can also find it in the [Cloudflare dashboard](https://dash.cloudflare.com/), or by running `npx wrangler d1 info orange-demo-db` in your terminal. -Next, you will create a database table in the database to send queries to D1 using Orange ORM. +Next, create a database table in the database to send queries to D1 using Orange ORM. ### 4. Create a table in the database - D1 has a [migration system](/d1/reference/migrations), and in the following steps, you will use D1's migration system to create and run a migration against your database. -First, create a new migration using `wrangler`: +1. First, create a new migration using `wrangler`: ```sh npx wrangler d1 migrations create orange-demo-db create_user_table From cce3a72a24e5885d81aee61d4ff378153cf3e1dd Mon Sep 17 00:00:00 2001 From: Jun Lee Date: Tue, 25 Feb 2025 16:29:40 +0000 Subject: [PATCH 14/24] Apply suggestions from code review --- .../docs/d1/tutorials/d1-and-orange-orm/index.mdx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx index 3e81fa6a7854555..d8531981f92222b 100644 --- a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx +++ b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx @@ -143,16 +143,16 @@ D1 has a [migration system](/d1/reference/migrations), and in the following step npx wrangler d1 migrations create orange-demo-db create_user_table ``` -Answer `yes` to creating a new folder called `migrations`. +2. When asked to create a new folder called `migrations`, enter `Y`. The command has now created a new directory called `migrations` and an empty file called `0001_create_user_table.sql` inside of it: -``` -migrations/ -└── 0001_create_user_table.sql -``` + +- migrations + - **0001_create_user_table.sql** + -Edit the file so it looks like this: +3. Edit the file so it looks like this: ```sql -- CreateTable From d8d5a2ffe5c64bb70f1ad043c244b00c8ea68b62 Mon Sep 17 00:00:00 2001 From: Jun Lee Date: Tue, 25 Feb 2025 16:30:27 +0000 Subject: [PATCH 15/24] Apply suggestions from code review --- .../d1/tutorials/d1-and-orange-orm/index.mdx | 38 +++++++------------ 1 file changed, 13 insertions(+), 25 deletions(-) diff --git a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx index d8531981f92222b..93b98ed2a6efc32 100644 --- a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx +++ b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx @@ -167,12 +167,14 @@ CREATE UNIQUE INDEX "User_email_key" ON "User"("email"); ``` -You now need to use the `wrangler d1 migrations apply` command to send this SQL statement to D1. This command accepts two options: +You now need to use the `wrangler d1 migrations apply` command to send this SQL statement to D1. This command accepts two flags: -- `--local`: Executes the statement against a _local_ version of D1. This local version of D1 is a SQLite database file that will be located in the `.wrangler/state` directory of your project. Use this approach when you want to develop and test your Worker on your local machine. Refer to [Local development](/d1/best-practices/local-development/) to learn more. -- `--remote`: Executes the statement against your _remote_ version of D1. This version is used by your _deployed_ Cloudflare Workers. Refer to [Remote development](/d1/best-practices/remote-development/) to learn more. +- `--local`: Executes the statement against a local version of D1. This local version of D1 is a SQLite database file that will be located in the `.wrangler/state` directory of your project. Use this approach when you want to develop and test your Worker on your local machine. Refer to [Local development](/d1/best-practices/local-development/) to learn more. +- `--remote`: Executes the statement against your remote version of D1. This version is used by your deployed Cloudflare Workers. Refer to [Remote development](/d1/best-practices/remote-development/) to learn more. -In this tutorial, you will do local and remote development. You will test the Worker locally and deploy your Worker afterwards. Open your terminal, and run both commands: +In this tutorial, you will first test the Worker locally, then deploy your Worker afterwards. + +4. Open your terminal, and run both commands: ```sh # For the local database @@ -186,7 +188,7 @@ npx wrangler d1 migrations apply orange-demo-db --remote Choose `Yes` both times when you are prompted to confirm that the migration should be applied. -Next, create some data that you can query once the Worker is running. This time, you will run the SQL statement without storing it in a file: +5. Next, create some data that you can query once the Worker is running. This time, you will run the SQL statement without storing it in a file. Run the following commands: ```sh # For the local database @@ -203,24 +205,7 @@ npx wrangler d1 execute orange-demo-db --command "INSERT INTO \"User\" (\"email To query your database from the Worker using Orange ORM, you need to: 1. Add a `map.ts` to the `src` folder. -2. Instantiate the orange-orm with the D1 instance . -3. Send a query using the orange client and return the result. - -Create `src/map.ts` with the following content: -```ts -import orange from 'orange-orm'; - -const map = orange.map(x => ({ - user: x.table('user').map(({ column }) => ({ - id: column('id').numeric().primary(), - email: column('email').string(), - name: column('name').string(), - })) -})); - -export default map; -``` -Open `src/index.ts` and replace the entire content with the following: +2. Instantiate the orange-orm with the D1 instance. Open `src/index.ts` and replace the entire content with the following: ```ts import map from './map'; @@ -235,15 +220,18 @@ export default { return Response.json(users); }, } satisfies ExportedHandler; -``` +3. Send a query using the orange client and return the result. + ### 6. Run the Worker locally +1. Run the Worker locally by running the following command: + ```sh npm run dev ``` -Open your browser at [`http://localhost:8787`](http://localhost:8787/) to check the result of the database query: +2. Open your browser at [`http://localhost:8787`](http://localhost:8787/) to check the result of the database query. You should see the following `json` block: ```json [{ "id": 1, "email": "jane@orange-orm.io", "name": "Jane Doe (Local)" }] From 9d6d19dafb9afccfef2c05b55e229ecec30784e2 Mon Sep 17 00:00:00 2001 From: Jun Lee Date: Tue, 25 Feb 2025 16:30:56 +0000 Subject: [PATCH 16/24] Apply suggestions from code review --- .../d1/tutorials/d1-and-orange-orm/index.mdx | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx index 93b98ed2a6efc32..c51cd3a941f360c 100644 --- a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx +++ b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx @@ -204,7 +204,20 @@ npx wrangler d1 execute orange-demo-db --command "INSERT INTO \"User\" (\"email To query your database from the Worker using Orange ORM, you need to: -1. Add a `map.ts` to the `src` folder. +1. Create a `src/map.ts` with the following code: + +```ts +import orange from 'orange-orm'; + +const map = orange.map(x => ({ + user: x.table('user').map(({ column }) => ({ + id: column('id').numeric().primary(), + email: column('email').string(), + name: column('name').string(), + })) +})); + +export default map; 2. Instantiate the orange-orm with the D1 instance. Open `src/index.ts` and replace the entire content with the following: ```ts @@ -251,6 +264,8 @@ Access your Worker at `https://orange-d1-example.USERNAME.workers.dev`. Your bro [{ "id": 1, "email": "jane@orange-orm.io", "name": "Jane Doe (Remote)" }] ``` +### Summary + By finishing this tutorial, you have deployed a Cloudflare Worker using D1 as a database and querying it via Orange ORM. ## Related resources From f15cc37ae2655ca9f379cc11fccd2f129e7e160f Mon Sep 17 00:00:00 2001 From: Jun Lee Date: Tue, 25 Feb 2025 16:37:35 +0000 Subject: [PATCH 17/24] Apply suggestions from code review Adding missing backticks --- src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx index c51cd3a941f360c..8633cc9f1919c07 100644 --- a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx +++ b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx @@ -72,6 +72,8 @@ D1 is supported in Orange ORM as of [v4.5.0](https://github.com/alfateam/orange- ```sh cd orange-d1-example npm install orange-orm +``` + You can create a D1 database via the [Cloudflare dashboard](https://dash.cloudflare.com), or via `wrangler`. This tutorial uses the `wrangler` CLI. ### 3. Create your D1 database @@ -86,7 +88,7 @@ npx wrangler d1 create orange-demo-db You should receive the following output on your terminal: -``` +```sh ✅ Successfully created DB 'orange-demo-db' in region EEUR Created your database using D1's new storage backend. The new storage backend is not yet recommended for production workloads, but backs up your data via point-in-time restore. @@ -218,6 +220,8 @@ const map = orange.map(x => ({ })); export default map; +``` + 2. Instantiate the orange-orm with the D1 instance. Open `src/index.ts` and replace the entire content with the following: ```ts @@ -233,6 +237,8 @@ export default { return Response.json(users); }, } satisfies ExportedHandler; +``` + 3. Send a query using the orange client and return the result. From 70e04cc0b73c3f4df2df3c6ce78a78190ac16739 Mon Sep 17 00:00:00 2001 From: Jun Lee Date: Tue, 25 Feb 2025 16:58:36 +0000 Subject: [PATCH 18/24] Update src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx --- src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx index 8633cc9f1919c07..b9ab051b3d66d24 100644 --- a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx +++ b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx @@ -17,11 +17,7 @@ import { WranglerConfig, PackageManagers, Render, FileTree } from "~/components" [Orange ORM](https://github.com/alfateam/orange-orm) is an Object Relational Mapper for TypeScript, offering seamless integration with a variety of popular databases. Orange ORM supports both TypeScript and JavaScript, including both CommonJS and ECMAScript. -- **Rich Querying Model**: Orange provides a powerful and intuitive querying model, making it easy to retrieve, filter, and manipulate data from your databases. -- **Active Record**: With a concise and expressive syntax, Orange enables you to interact with your database using the [*Active Record Pattern*](https://en.wikipedia.org/wiki/Active_record_pattern). -- **No Code Generation Required**: Enjoy full IntelliSense, even in table mappings, without the need for cumbersome code generation. -- **TypeScript and JavaScript Support**: Orange fully supports both TypeScript and JavaScript, allowing you to leverage the benefits of static typing and modern ECMAScript features. -- **Works in the Browser**: You can securely use Orange in the browser by utilizing the Express.js plugin, which serves to safeguard sensitive database credentials from exposure at the client level and protect against SQL injection. This method mirrors a traditional REST API, augmented with advanced TypeScript tooling for enhanced functionality. +Refer to the full [Orange ORM documentation](https://github.com/alfateam/orange-orm) for more information. ## Query D1 from a Cloudflare Worker using Orange ORM From 9c3a2e16fb5c57a7537bfbfc84700f79f9d10fa0 Mon Sep 17 00:00:00 2001 From: Jun Lee Date: Tue, 25 Feb 2025 16:59:11 +0000 Subject: [PATCH 19/24] Apply suggestions from code review --- src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx index b9ab051b3d66d24..5ef5d9194dfb306 100644 --- a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx +++ b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx @@ -15,7 +15,7 @@ import { WranglerConfig, PackageManagers, Render, FileTree } from "~/components" ## What is Orange ORM? -[Orange ORM](https://github.com/alfateam/orange-orm) is an Object Relational Mapper for TypeScript, offering seamless integration with a variety of popular databases. Orange ORM supports both TypeScript and JavaScript, including both CommonJS and ECMAScript. +Orange ORM is an Object Relational Mapper for TypeScript, offering seamless integration with a variety of popular databases. Orange ORM supports both TypeScript and JavaScript, including both CommonJS and ECMAScript. Refer to the full [Orange ORM documentation](https://github.com/alfateam/orange-orm) for more information. From 86ab52c1e76c6aac3a931c48e010e3cf7ac1ba34 Mon Sep 17 00:00:00 2001 From: Jun Lee Date: Wed, 26 Feb 2025 09:21:44 +0000 Subject: [PATCH 20/24] Update src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx --- src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx index 5ef5d9194dfb306..3f58ecd54ed6491 100644 --- a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx +++ b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx @@ -33,7 +33,7 @@ This example shows you how to set up and deploy a Cloudflare Worker that is acce Open your terminal, and run the following command to create a Cloudflare Worker using Cloudflare's [`hello-world`](https://github.com/cloudflare/workers-sdk/tree/4fdd8987772d914cf50725e9fa8cb91a82a6870d/packages/create-cloudflare/templates/hello-world) template: -1. Create a Worker named `d1-http` by running: +1. Create a Worker named `orange-d1-example` by running: From d773abff3d8c705dfe29430b1ed43bd6f9f23f93 Mon Sep 17 00:00:00 2001 From: Jun Lee Date: Wed, 26 Feb 2025 09:56:41 +0000 Subject: [PATCH 21/24] Apply suggestions from code review part 1 Co-authored-by: Pedro Sousa <680496+pedrosousa@users.noreply.github.com> --- .../d1/tutorials/d1-and-orange-orm/index.mdx | 23 +++++++------------ 1 file changed, 8 insertions(+), 15 deletions(-) diff --git a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx index 3f58ecd54ed6491..8a08173dc478273 100644 --- a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx +++ b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx @@ -53,10 +53,6 @@ Open your terminal, and run the following command to create a Cloudflare Worker cd orange-d1-example ``` - ```sh frame="none" - cd orange-d1-example - ``` - ### 2. Install Orange ORM :::note @@ -66,11 +62,9 @@ D1 is supported in Orange ORM as of [v4.5.0](https://github.com/alfateam/orange- ::: ```sh -cd orange-d1-example npm install orange-orm ``` -You can create a D1 database via the [Cloudflare dashboard](https://dash.cloudflare.com), or via `wrangler`. This tutorial uses the `wrangler` CLI. ### 3. Create your D1 database @@ -84,7 +78,7 @@ npx wrangler d1 create orange-demo-db You should receive the following output on your terminal: -```sh +```txt ✅ Successfully created DB 'orange-demo-db' in region EEUR Created your database using D1's new storage backend. The new storage backend is not yet recommended for production workloads, but backs up your data via point-in-time restore. @@ -102,7 +96,7 @@ point-in-time restore. You now have a D1 database in your Cloudflare account with a binding to your Cloudflare Worker. -Copy the `json` snippet from the command output and paste it into your `wrangler.jsonc` file. Your `wrangler.jsonc` file should look similar to the following: +Copy the JSON snippet from the command output and paste it into your `wrangler.jsonc` file. Your `wrangler.jsonc` file should look similar to the following: @@ -127,15 +121,15 @@ Copy the `json` snippet from the command output and paste it into your `wrangler -`` should be replaced with the database ID of your D1 instance. If you were not able to fetch this ID from the terminal output, you can also find it in the [Cloudflare dashboard](https://dash.cloudflare.com/), or by running `npx wrangler d1 info orange-demo-db` in your terminal. +Replace `` with the database ID of your D1 instance. If you were not able to fetch this ID from the terminal output, you can also find it in the [Cloudflare dashboard](https://dash.cloudflare.com/), or by running `npx wrangler d1 info orange-demo-db` in your terminal. Next, create a database table in the database to send queries to D1 using Orange ORM. ### 4. Create a table in the database -D1 has a [migration system](/d1/reference/migrations), and in the following steps, you will use D1's migration system to create and run a migration against your database. +D1 has a [migration system](/d1/reference/migrations/), and in the following steps, you will use D1's migration system to create and run a migration against your database. -1. First, create a new migration using `wrangler`: +1. Create a new migration using `wrangler`: ```sh npx wrangler d1 migrations create orange-demo-db create_user_table @@ -164,13 +158,12 @@ CREATE TABLE "User" ( CREATE UNIQUE INDEX "User_email_key" ON "User"("email"); ``` - You now need to use the `wrangler d1 migrations apply` command to send this SQL statement to D1. This command accepts two flags: - `--local`: Executes the statement against a local version of D1. This local version of D1 is a SQLite database file that will be located in the `.wrangler/state` directory of your project. Use this approach when you want to develop and test your Worker on your local machine. Refer to [Local development](/d1/best-practices/local-development/) to learn more. - `--remote`: Executes the statement against your remote version of D1. This version is used by your deployed Cloudflare Workers. Refer to [Remote development](/d1/best-practices/remote-development/) to learn more. -In this tutorial, you will first test the Worker locally, then deploy your Worker afterwards. +In this tutorial, you will first test the Worker locally, then deploy your Worker. 4. Open your terminal, and run both commands: @@ -202,7 +195,7 @@ npx wrangler d1 execute orange-demo-db --command "INSERT INTO \"User\" (\"email To query your database from the Worker using Orange ORM, you need to: -1. Create a `src/map.ts` with the following code: +1. Create a `src/map.ts` file with the following code: ```ts import orange from 'orange-orm'; @@ -246,7 +239,7 @@ export default { npm run dev ``` -2. Open your browser at [`http://localhost:8787`](http://localhost:8787/) to check the result of the database query. You should see the following `json` block: +2. Open your browser at [`http://localhost:8787`](http://localhost:8787/) to check the result of the database query. You should see the following JSON block: ```json [{ "id": 1, "email": "jane@orange-orm.io", "name": "Jane Doe (Local)" }] From b217f70991efd03d06e33c5df331c4c8bd109ebc Mon Sep 17 00:00:00 2001 From: Jun Lee Date: Wed, 26 Feb 2025 10:05:00 +0000 Subject: [PATCH 22/24] Apply suggestions from code review part 2 --- src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx index 8a08173dc478273..679ffe60d8b2358 100644 --- a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx +++ b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx @@ -31,7 +31,7 @@ This example shows you how to set up and deploy a Cloudflare Worker that is acce ### 1. Create a Cloudflare Worker -Open your terminal, and run the following command to create a Cloudflare Worker using Cloudflare's [`hello-world`](https://github.com/cloudflare/workers-sdk/tree/4fdd8987772d914cf50725e9fa8cb91a82a6870d/packages/create-cloudflare/templates/hello-world) template: +Open your terminal and create a Cloudflare Worker: 1. Create a Worker named `orange-d1-example` by running: @@ -49,7 +49,7 @@ Open your terminal, and run the following command to create a Cloudflare Worker 2. Change into your new project directory to start developing: - ```sh frame="none" + ```sh cd orange-d1-example ``` @@ -211,7 +211,7 @@ const map = orange.map(x => ({ export default map; ``` -2. Instantiate the orange-orm with the D1 instance. Open `src/index.ts` and replace the entire content with the following: +2. Instantiate the `orange-orm` with the D1 instance, then send a query using the Orange client and return the result. To do this in the code, open `src/index.ts` and replace the entire content with the following: ```ts import map from './map'; @@ -228,7 +228,6 @@ export default { } satisfies ExportedHandler; ``` -3. Send a query using the orange client and return the result. ### 6. Run the Worker locally From d815c8e976ca5419d08d9d74dd021ec8402e0655 Mon Sep 17 00:00:00 2001 From: Jun Lee Date: Fri, 28 Feb 2025 13:34:11 +0000 Subject: [PATCH 23/24] Update src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx --- src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx index 679ffe60d8b2358..b87e761b42419a7 100644 --- a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx +++ b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx @@ -13,6 +13,10 @@ languages: import { WranglerConfig, PackageManagers, Render, FileTree } from "~/components"; +:::note +This is a community-created tutorial. +::: + ## What is Orange ORM? Orange ORM is an Object Relational Mapper for TypeScript, offering seamless integration with a variety of popular databases. Orange ORM supports both TypeScript and JavaScript, including both CommonJS and ECMAScript. From 0e32987f1c8322498392be136f508a51060f1ca5 Mon Sep 17 00:00:00 2001 From: Jun Lee Date: Fri, 28 Feb 2025 13:36:08 +0000 Subject: [PATCH 24/24] Update src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx --- src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx index b87e761b42419a7..cb8c8070dcc9b0d 100644 --- a/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx +++ b/src/content/docs/d1/tutorials/d1-and-orange-orm/index.mdx @@ -4,6 +4,7 @@ difficulty: Beginner content_type: Tutorial pcx_content_type: tutorial title: Query D1 using Orange ORM +description: Use Orange ORM to query a D1 database. products: - Workers languages: