From 3d161095908773ed95df8a8197dcda8427271332 Mon Sep 17 00:00:00 2001 From: dario-piotrowicz Date: Sun, 12 Mar 2023 21:06:23 +0000 Subject: [PATCH 1/6] add section about bindings in nextjs pages guide --- .../framework-guides/deploy-a-nextjs-site.md | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/content/pages/framework-guides/deploy-a-nextjs-site.md b/content/pages/framework-guides/deploy-a-nextjs-site.md index dc5990ef0a7923..c225acd4c339d6 100644 --- a/content/pages/framework-guides/deploy-a-nextjs-site.md +++ b/content/pages/framework-guides/deploy-a-nextjs-site.md @@ -176,4 +176,29 @@ Every time you commit new code to your Next.js site, Cloudflare Pages will autom For the complete guide to deploying your first site to Cloudflare Pages, refer to the [Get started guide](/pages/get-started/). +## Use bindings in your Next.js application + +A [binding](/pages/platform/functions/bindings/) allows your application to interact with Cloudflare developer products, such as [KV](https://developers.cloudflare.com/workers/learning/how-kv-works/), [Durable Object](/workers/learning/using-durable-objects/), [R2](/r2/), and [D1](https://blog.cloudflare.com/introducing-d1/). + +In Next.js you can add server-side code via [API Routes](https://nextjs.org/docs/api-routes/introduction) and [getServerSideProps](https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props). In such server side code you can then use access bindings set for your application by accessing them via `process.env`. + +The following code block shows an example of accessing a KV namespace in Next.js. + +```typescript +--- +filename: src/index.tsx +highlight: [4, 5] +--- +// ... + +export async function getServerSideProps({ req }: GetServerSidePropsContext) => { + // the type KVNamespace comes from the @cloudflare/workers-types package + const { MY_KV } = (process.env as { MY_KV: KVNamespace })); + + return { + // ... + }; +}; +``` + {{}} From eb51907052ff4ce081fcd02b1c25f83b0ba86df4 Mon Sep 17 00:00:00 2001 From: dario-piotrowicz Date: Sun, 12 Mar 2023 21:38:49 +0000 Subject: [PATCH 2/6] add bindings section in qwik pages guide --- .../framework-guides/deploy-a-qwik-site.md | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/content/pages/framework-guides/deploy-a-qwik-site.md b/content/pages/framework-guides/deploy-a-qwik-site.md index bc6f75dcb72de8..ac6ec6b5f2904f 100644 --- a/content/pages/framework-guides/deploy-a-qwik-site.md +++ b/content/pages/framework-guides/deploy-a-qwik-site.md @@ -66,4 +66,29 @@ For the complete guide to deploying your first site to Cloudflare Pages, refer t After deploying your site, you will receive a unique subdomain for your project on `*.pages.dev`. Every time you commit new code to your Qwik site, Cloudflare Pages will automatically rebuild your project and deploy it. You will also get access to [preview deployments](/pages/platform/preview-deployments/) on new pull requests, to preview how changes look to your site before deploying them to production. +## Use bindings in your Qwik application + +A [binding](/pages/platform/functions/bindings/) allows your application to interact with Cloudflare developer products, such as [KV](https://developers.cloudflare.com/workers/learning/how-kv-works/), [Durable Object](/workers/learning/using-durable-objects/), [R2](/r2/), and [D1](https://blog.cloudflare.com/introducing-d1/). + +In QwikCity you can add server-side code via [routeLoaders](https://qwik.builder.io/qwikcity/route-loader/) and [actions](https://qwik.builder.io/qwikcity/action/). In such server side code you can then use access bindings set for your application by accessing them via the `platform` object provided by the framework. + +The following code block shows an example of accessing a KV namespace in QwikCity. + +```typescript +--- +filename: src/routes/index.tsx +highlight: [4, 5] +--- +// ... + +export const useGetServerTime = routeLoader$(({ platform }) => { + // the type KVNamespace comes from the @cloudflare/workers-types package + const { MY_KV } = (platform as { MY_KV: KVNamespace })); + + return { + // .... + } +}); +``` + {{}} From e1799b7a12000fc3f8e5f516c4b48367856012c5 Mon Sep 17 00:00:00 2001 From: dario-piotrowicz Date: Tue, 14 Mar 2023 19:35:01 +0000 Subject: [PATCH 3/6] update bindings section in nuxt pages guide --- .../framework-guides/deploy-a-nuxt-site.md | 21 +++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/content/pages/framework-guides/deploy-a-nuxt-site.md b/content/pages/framework-guides/deploy-a-nuxt-site.md index 2b5edc749fc225..11ae6f1d0bee28 100644 --- a/content/pages/framework-guides/deploy-a-nuxt-site.md +++ b/content/pages/framework-guides/deploy-a-nuxt-site.md @@ -66,8 +66,25 @@ For the complete guide to deploying your first site to Cloudflare Pages, refer t ## Use bindings in your Nuxt application -It is not currently possible to access bindings from a Nuxt application (refer to this [Nuxt GitHub issue](https://github.com/nuxt/nuxt/issues/18599)). +A [binding](/pages/platform/functions/bindings/) allows your application to interact with Cloudflare developer products, such as [KV](https://developers.cloudflare.com/workers/learning/how-kv-works/), [Durable Object](/workers/learning/using-durable-objects/), [R2](/r2/), and [D1](https://blog.cloudflare.com/introducing-d1/). -When bindings are accessible from a Nuxt application, we will update this guide accordingly. +In Nuxt you can add server-side code via [Server Routes and Middleware](https://nuxt.com/docs/guide/directory-structure/server#server-directory), there the `defineEventHandler()` method is used to define your API endpoints in which you can access Cloudflare's context via the provided `context` field and consecutively any bindings set for your application. + +The following code block shows an example of accessing a KV namespace in Nuxt. + +```typescript +--- +filename: src/my-endpoint.get.ts +highlight: [2, 3] +--- +export default defineEventHandler(({ context }) => { + // the type KVNamespace comes from the @cloudflare/workers-types package + const MY_KV: KVNamespace = context.cloudflare.env.MY_KV; + + return { + // ... + }; +}); +``` {{}} From 4bda78775043c1c2942af49a2d184a22cc5fee33 Mon Sep 17 00:00:00 2001 From: Dario Piotrowicz Date: Wed, 15 Mar 2023 12:12:32 +0000 Subject: [PATCH 4/6] Apply suggestions from code review Co-authored-by: Kate Tungusova <70746074+deadlypants1973@users.noreply.github.com> --- content/pages/framework-guides/deploy-a-nextjs-site.md | 2 +- content/pages/framework-guides/deploy-a-nuxt-site.md | 2 +- content/pages/framework-guides/deploy-a-qwik-site.md | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/content/pages/framework-guides/deploy-a-nextjs-site.md b/content/pages/framework-guides/deploy-a-nextjs-site.md index c225acd4c339d6..1ff1d3d82c961a 100644 --- a/content/pages/framework-guides/deploy-a-nextjs-site.md +++ b/content/pages/framework-guides/deploy-a-nextjs-site.md @@ -192,7 +192,7 @@ highlight: [4, 5] // ... export async function getServerSideProps({ req }: GetServerSidePropsContext) => { - // the type KVNamespace comes from the @cloudflare/workers-types package + // the type `KVNamespace` comes from the @cloudflare/workers-types package const { MY_KV } = (process.env as { MY_KV: KVNamespace })); return { diff --git a/content/pages/framework-guides/deploy-a-nuxt-site.md b/content/pages/framework-guides/deploy-a-nuxt-site.md index 11ae6f1d0bee28..97dd435944d41a 100644 --- a/content/pages/framework-guides/deploy-a-nuxt-site.md +++ b/content/pages/framework-guides/deploy-a-nuxt-site.md @@ -78,7 +78,7 @@ filename: src/my-endpoint.get.ts highlight: [2, 3] --- export default defineEventHandler(({ context }) => { - // the type KVNamespace comes from the @cloudflare/workers-types package + // the type `KVNamespace` comes from the @cloudflare/workers-types package const MY_KV: KVNamespace = context.cloudflare.env.MY_KV; return { diff --git a/content/pages/framework-guides/deploy-a-qwik-site.md b/content/pages/framework-guides/deploy-a-qwik-site.md index ac6ec6b5f2904f..7412cc400b50fe 100644 --- a/content/pages/framework-guides/deploy-a-qwik-site.md +++ b/content/pages/framework-guides/deploy-a-qwik-site.md @@ -70,7 +70,7 @@ Every time you commit new code to your Qwik site, Cloudflare Pages will automati A [binding](/pages/platform/functions/bindings/) allows your application to interact with Cloudflare developer products, such as [KV](https://developers.cloudflare.com/workers/learning/how-kv-works/), [Durable Object](/workers/learning/using-durable-objects/), [R2](/r2/), and [D1](https://blog.cloudflare.com/introducing-d1/). -In QwikCity you can add server-side code via [routeLoaders](https://qwik.builder.io/qwikcity/route-loader/) and [actions](https://qwik.builder.io/qwikcity/action/). In such server side code you can then use access bindings set for your application by accessing them via the `platform` object provided by the framework. +In QwikCity, add server-side code via [routeLoaders](https://qwik.builder.io/qwikcity/route-loader/) and [actions](https://qwik.builder.io/qwikcity/action/). Then access bindings set for your application via the `platform` object provided by the framework. The following code block shows an example of accessing a KV namespace in QwikCity. @@ -82,7 +82,7 @@ highlight: [4, 5] // ... export const useGetServerTime = routeLoader$(({ platform }) => { - // the type KVNamespace comes from the @cloudflare/workers-types package + // the type `KVNamespace` comes from the @cloudflare/workers-types package const { MY_KV } = (platform as { MY_KV: KVNamespace })); return { From 421eda0c9fc8cf3e9b208ae3c800d2c542b527a2 Mon Sep 17 00:00:00 2001 From: Dario Piotrowicz Date: Wed, 15 Mar 2023 22:15:24 +0000 Subject: [PATCH 5/6] Apply suggestions from code review Co-authored-by: Kate Tungusova <70746074+deadlypants1973@users.noreply.github.com> --- content/pages/framework-guides/deploy-a-nextjs-site.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/pages/framework-guides/deploy-a-nextjs-site.md b/content/pages/framework-guides/deploy-a-nextjs-site.md index 1ff1d3d82c961a..7b282d2d6a862e 100644 --- a/content/pages/framework-guides/deploy-a-nextjs-site.md +++ b/content/pages/framework-guides/deploy-a-nextjs-site.md @@ -180,7 +180,7 @@ For the complete guide to deploying your first site to Cloudflare Pages, refer t A [binding](/pages/platform/functions/bindings/) allows your application to interact with Cloudflare developer products, such as [KV](https://developers.cloudflare.com/workers/learning/how-kv-works/), [Durable Object](/workers/learning/using-durable-objects/), [R2](/r2/), and [D1](https://blog.cloudflare.com/introducing-d1/). -In Next.js you can add server-side code via [API Routes](https://nextjs.org/docs/api-routes/introduction) and [getServerSideProps](https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props). In such server side code you can then use access bindings set for your application by accessing them via `process.env`. +In Next.js, add server-side code via [API Routes](https://nextjs.org/docs/api-routes/introduction) and [getServerSideProps](https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props). Then access bindings set for your application by accessing them in your code via `process.env`. The following code block shows an example of accessing a KV namespace in Next.js. From a22d41d00e726ee69864063100bb6cfab2fdaa54 Mon Sep 17 00:00:00 2001 From: Dario Piotrowicz Date: Tue, 21 Mar 2023 11:34:15 +0000 Subject: [PATCH 6/6] Update content/pages/framework-guides/deploy-a-nuxt-site.md Co-authored-by: Kate Tungusova <70746074+deadlypants1973@users.noreply.github.com> --- content/pages/framework-guides/deploy-a-nuxt-site.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/pages/framework-guides/deploy-a-nuxt-site.md b/content/pages/framework-guides/deploy-a-nuxt-site.md index 97dd435944d41a..d49d4abc418d9a 100644 --- a/content/pages/framework-guides/deploy-a-nuxt-site.md +++ b/content/pages/framework-guides/deploy-a-nuxt-site.md @@ -68,7 +68,7 @@ For the complete guide to deploying your first site to Cloudflare Pages, refer t A [binding](/pages/platform/functions/bindings/) allows your application to interact with Cloudflare developer products, such as [KV](https://developers.cloudflare.com/workers/learning/how-kv-works/), [Durable Object](/workers/learning/using-durable-objects/), [R2](/r2/), and [D1](https://blog.cloudflare.com/introducing-d1/). -In Nuxt you can add server-side code via [Server Routes and Middleware](https://nuxt.com/docs/guide/directory-structure/server#server-directory), there the `defineEventHandler()` method is used to define your API endpoints in which you can access Cloudflare's context via the provided `context` field and consecutively any bindings set for your application. +In Nuxt, add server-side code via [Server Routes and Middleware](https://nuxt.com/docs/guide/directory-structure/server#server-directory). The `defineEventHandler()` method is used to define your API endpoints in which you can access Cloudflare's context via the provided `context` field. The `context` field allows you to access any bindings set for your application. The following code block shows an example of accessing a KV namespace in Nuxt.