diff --git a/src/content/docs/workers/frameworks/framework-guides/angular.mdx b/src/content/docs/workers/frameworks/framework-guides/angular.mdx index 41ef779dd2d4cea..06d4d1e3b3c0b0c 100644 --- a/src/content/docs/workers/frameworks/framework-guides/angular.mdx +++ b/src/content/docs/workers/frameworks/framework-guides/angular.mdx @@ -27,15 +27,6 @@ To use `create-cloudflare` to create a new Angular project with - - After setting up your project, change your directory by running the following command: ```sh @@ -60,6 +51,4 @@ The following command will build and deploy your project. If you're using CI, en ## Static assets -You can serve static assets your Angular application by placing them in [the `./public/` directory](https://angular.dev/reference/configs/file-structure#workspace-configuration-files). This can be useful for resource files such as images, stylesheets, fonts, and manifests. - diff --git a/src/content/docs/workers/frameworks/framework-guides/docusaurus.mdx b/src/content/docs/workers/frameworks/framework-guides/docusaurus.mdx index 2ea7a6225311d61..3349226246efb90 100644 --- a/src/content/docs/workers/frameworks/framework-guides/docusaurus.mdx +++ b/src/content/docs/workers/frameworks/framework-guides/docusaurus.mdx @@ -27,15 +27,6 @@ To use `create-cloudflare` to create a new Docusaurus project with - - After setting up your project, change your directory by running the following command: ```sh @@ -55,9 +46,3 @@ Your project can be deployed to a `*.workers.dev` subdomain or a [Custom Domain] The following command will build and deploy your project. If you're using CI, ensure you update your ["deploy command"](/workers/ci-cd/builds/configuration/#build-settings) configuration appropriately. - ---- - -## Static assets - -You can serve static assets your Docusaurus application by placing them in [the `./static/` directory](https://docusaurus.io/docs/static-assets). This can be useful for resource files such as images, stylesheets, fonts, and manifests. diff --git a/src/content/docs/workers/frameworks/framework-guides/gatsby.mdx b/src/content/docs/workers/frameworks/framework-guides/gatsby.mdx index d7f5cfcf79bebf8..606defe69c086a8 100644 --- a/src/content/docs/workers/frameworks/framework-guides/gatsby.mdx +++ b/src/content/docs/workers/frameworks/framework-guides/gatsby.mdx @@ -27,15 +27,6 @@ To use `create-cloudflare` to create a new Gatsby project with - - After setting up your project, change your directory by running the following command: ```sh @@ -55,9 +46,3 @@ Your project can be deployed to a `*.workers.dev` subdomain or a [Custom Domain] The following command will build and deploy your project. If you're using CI, ensure you update your ["deploy command"](/workers/ci-cd/builds/configuration/#build-settings) configuration appropriately. - ---- - -## Static assets - -You can serve static assets your Gatsby application by placing them in [the `./static/` directory](https://www.gatsbyjs.com/docs/how-to/images-and-media/static-folder/). This can be useful for resource files such as images, stylesheets, fonts, and manifests. diff --git a/src/content/docs/workers/frameworks/framework-guides/hono.mdx b/src/content/docs/workers/frameworks/framework-guides/hono.mdx index da2858333086e59..b4f38ede4725cba 100644 --- a/src/content/docs/workers/frameworks/framework-guides/hono.mdx +++ b/src/content/docs/workers/frameworks/framework-guides/hono.mdx @@ -11,59 +11,88 @@ import { InlineBadge, Render, PackageManagers, + Steps, + Details, + FileTree, } from "~/components"; -In this guide, you will create a new [Hono](https://hono.dev/) application and deploy to Cloudflare Workers (with the new [ Workers Assets](/workers/static-assets/)). - -## 1. Set up a new project - -Use the [`create-cloudflare`](https://www.npmjs.com/package/create-cloudflare) CLI (C3) to set up a new project. C3 will create a new project directory, use code from the official Hono template, and provide the option to deploy instantly. - -To use `create-cloudflare` to create a new Hono project with Workers Assets, run the following command: +**Start from CLI** - scaffold a full-stack app with a Hono API, React SPA and the [Cloudflare Vite plugin](/workers/vite-plugin/) for lightning-fast development. +--- - +**Or just deploy** - create a full-stack app using Hono, React and Vite, with CI/CD and previews all set up for you. -After setting up your project, change your directory by running the following command: +[![Deploy to Workers](https://deploy.workers.cloudflare.com/button)](https://dash.cloudflare.com/?to=/:account/workers-and-pages/create/deploy-to-workers&repository=https://github.com/cloudflare/templates/tree/staging/vite-react-template) -```sh -cd my-hono-app -``` +## What is Hono? -## 2. Develop locally +[Hono](https://hono.dev/) is an ultra-fast, lightweight framework for building web applications, and works fantastically with Cloudflare Workers. +With Workers Assets, you can easily combine a Hono API running on Workers with a SPA to create a full-stack app. -After you have created your project, run the following command in the project directory to start a local server. This will allow you to preview your project locally during development. +## Creating a full-stack Hono app with a React SPA - + +1. **Create a new project with the create-cloudflare CLI (C3)** -## 3. Deploy your project + +
+ Below is a simplified file tree of the project. + + - my-hono-app + - src + - worker/ + - index.ts + - react-app/ + - index.html + - vite.config.ts + - wrangler.jsonc + -Your project can be deployed to a `*.workers.dev` subdomain or a [Custom Domain](/workers/configuration/routing/custom-domains/), from your own machine or from any CI/CD system, including [Cloudflare's own](/workers/ci-cd/builds/). + `wrangler.jsonc` is your [Wrangler configuration file](/workers/wrangler/configuration/). + In this file: + - `main` points to `src/worker/index.ts`. This is your Hono app, which will run in a Worker. + - `assets.not_found_handling` is set to `single-page-application`, which means that routes that are handled by your SPA do not go to the Worker, and are thus free. + - If you want to add bindings to resources on Cloudflare's developer platform, you configure them here. Read more about [bindings](/workers/runtime-apis/bindings/). -The following command will build and deploy your project. If you are using CI, ensure you update your ["deploy command"](/workers/ci-cd/builds/configuration/#build-settings) configuration appropriately. + `vite.config.ts` is set up to use the [Cloudflare Vite plugin](/workers/vite-plugin/). This runs your Worker in the Cloudflare Workers runtime, ensuring your local development environment is as close to production as possible. - + `src/worker/index.ts` is your Hono app, which contains a single endpoint to begin with, `/api`. + At `src/react-app/src/App.tsx`, your React app calls this endpoint to get a message back and displays this in your SPA. +
---- +2. **Develop locally with the [Cloudflare Vite plugin](/workers/vite-plugin/)** -## Bindings + After creating your project, run the following command in your project directory to start a local development server. + +
+ This project uses Vite for local development and build, and thus comes with all of Vite's features, including hot module replacement (HMR). + + In addition, `vite.config.ts` is set up to use the Cloudflare Vite plugin. This runs your application in the Cloudflare Workers runtime, just like in production, and enables access to local emulations of bindings. +
-Your Hono application can be fully integrated with the Cloudflare Developer Platform, in both local development and in production, by using product bindings. The [Hono documentation](https://hono.dev/docs/getting-started/cloudflare-workers#bindings) provides information about configuring bindings and how you can access them. +3. **Deploy your project** -## Static assets + Your project can be deployed to a `*.workers.dev` subdomain or a [Custom Domain](/workers/configuration/routing/custom-domains/), from your own machine or from any CI/CD system, including Cloudflare's own [Workers Builds](/workers/ci-cd/builds/). + + The following command will build and deploy your project. If you are using CI, ensure you update your ["deploy command"](/workers/ci-cd/builds/configuration/#build-settings) configuration appropriately. + + + + + +--- + +## Bindings -You can serve static assets in your Hono application by [placing them in the `./public/` directory](https://hono.dev/docs/getting-started/cloudflare-workers#serve-static-files). This can be useful for resource files such as images, stylesheets, fonts, and manifests. +The [Hono documentation](https://hono.dev/docs/getting-started/cloudflare-workers#bindings) provides information on how you can access bindings in your Hono app. - + diff --git a/src/content/docs/workers/frameworks/framework-guides/nuxt.mdx b/src/content/docs/workers/frameworks/framework-guides/nuxt.mdx index d6ee9276282cb40..610bea3627074b5 100644 --- a/src/content/docs/workers/frameworks/framework-guides/nuxt.mdx +++ b/src/content/docs/workers/frameworks/framework-guides/nuxt.mdx @@ -27,15 +27,6 @@ To use `create-cloudflare` to create a new Nuxt project with - - After setting up your project, change your directory by running the following command: ```sh @@ -62,8 +53,4 @@ The following command will build and deploy your project. If you're using CI, en Your Nuxt application can be fully integrated with the Cloudflare Developer Platform, in both local development and in production, by using product bindings. The [Nuxt documentation](https://nitro.unjs.io/deploy/providers/cloudflare#direct-access-to-cloudflare-bindings) provides information about configuring bindings and how you can access them in your Nuxt event handlers. -## Static assets - -You can serve static assets your Nuxt application by placing them in [the `./public/` directory](https://nuxt.com/docs/guide/directory-structure/public). This can be useful for resource files such as images, stylesheets, fonts, and manifests. - - + diff --git a/src/content/docs/workers/frameworks/framework-guides/qwik.mdx b/src/content/docs/workers/frameworks/framework-guides/qwik.mdx index 323e0795c732231..acfb256d35e13c6 100644 --- a/src/content/docs/workers/frameworks/framework-guides/qwik.mdx +++ b/src/content/docs/workers/frameworks/framework-guides/qwik.mdx @@ -27,15 +27,6 @@ To use `create-cloudflare` to create a new Qwik project with - - After setting up your project, change your directory by running the following command: ```sh @@ -62,8 +53,4 @@ The following command will build and deploy your project. If you're using CI, en Your Qwik application can be fully integrated with the Cloudflare Developer Platform, in both local development and in production, by using product bindings. The [Qwik documentation](https://qwik.dev/docs/deployments/cloudflare-pages/#context) provides information about configuring bindings and how you can access them in your Qwik endpoint methods. -## Static assets - -You can serve static assets your Qwik application by placing them in [the `./public/` directory](https://qwik.dev/docs/advanced/static-assets/). This can be useful for resource files such as images, stylesheets, fonts, and manifests. - - + diff --git a/src/content/docs/workers/frameworks/framework-guides/react.mdx b/src/content/docs/workers/frameworks/framework-guides/react.mdx index f1ea717989c2463..2ab746999629b1b 100644 --- a/src/content/docs/workers/frameworks/framework-guides/react.mdx +++ b/src/content/docs/workers/frameworks/framework-guides/react.mdx @@ -11,59 +11,93 @@ import { InlineBadge, Render, PackageManagers, + Details, + FileTree, + Steps, } from "~/components"; -In this guide, you will create a new [React](https://react.dev/) application and deploy to Cloudflare Workers (with the new [ Workers Assets](/workers/static-assets/)). - -## 1. Set up a new project - -Use the [`create-cloudflare`](https://www.npmjs.com/package/create-cloudflare) CLI (C3) to set up a new project. C3 will create a new project directory, use code from the official React template, and provide the option to deploy instantly. - -To use `create-cloudflare` to create a new React project with Workers Assets, run the following command: +**Start from CLI** - scaffold a full-stack app with a React SPA, Cloudflare Workers API, and the [Cloudflare Vite plugin](/workers/vite-plugin/) for lightning-fast development. +--- - +**Or just deploy** - create a full-stack app using React, Hono API And Vite, with CI/CD and previews all set up for you. + +[![Deploy to Workers](https://deploy.workers.cloudflare.com/button)](https://dash.cloudflare.com/?to=/:account/workers-and-pages/create/deploy-to-workers&repository=https://github.com/cloudflare/templates/tree/staging/vite-react-template) + +## What is React? -After setting up your project, change your directory by running the following command: +[React](https://react.dev/) is a framework for building user interfaces. It allows you to create reusable UI components and manage the state of your application efficiently. You can use React to build a single-page application (SPA), and combine it with a backend API running on Cloudflare Workers to create a full-stack application. -```sh -cd my-react-app -``` +## Creating a full-stack app with React -## 2. Develop locally + +1. **Create a new project with the create-cloudflare CLI (C3)** -After you have created your project, run the following command in the project directory to start a local server. This will allow you to preview your project locally during development. + +
+ Below is a simplified file tree of the project. + + - my-react-app + - src/ + - App.tsx + - worker/ + - index.ts + - index.html + - vite.config.ts + - wrangler.jsonc + - + `wrangler.jsonc` is your [Wrangler configuration file](/workers/wrangler/configuration/). + In this file: + - `main` points to `worker/index.ts`. This is your Worker, which is going to act as your backend API. + - `assets.not_found_handling` is set to `single-page-application`, which means that routes that are handled by your React SPA do not go to the Worker, and are thus free. + - If you want to add bindings to resources on Cloudflare's developer platform, you configure them here. Read more about [bindings](/workers/runtime-apis/bindings/). -## 3. Deploy your project + `vite.config.ts` is set up to use the [Cloudflare Vite plugin](/workers/vite-plugin/). This runs your Worker in the Cloudflare Workers runtime, ensuring your local development environment is as close to production as possible. -Your project can be deployed to a `*.workers.dev` subdomain or a [Custom Domain](/workers/configuration/routing/custom-domains/), from your own machine or from any CI/CD system, including [Cloudflare's own](/workers/ci-cd/builds/). + `worker/index.ts` is your backend API, which contains a single endpoint, `/api/`, that returns a text response. + At `src/App.tsx`, your React app calls this endpoint to get a message back and displays this. +
-The following command will build and deploy your project. If you are using CI, ensure you update your ["deploy command"](/workers/ci-cd/builds/configuration/#build-settings) configuration appropriately. +2. **Develop locally with the [Cloudflare Vite plugin](/workers/vite-plugin/)** - + After creating your project, run the following command in your project directory to start a local development server. + +
+ This project uses Vite for local development and build, and thus comes with all of Vite's features, including hot module replacement (HMR). + + In addition, `vite.config.ts` is set up to use the Cloudflare Vite plugin. This runs your application in the Cloudflare Workers runtime, just like in production, and enables access to local emulations of bindings. +
+ +3. **Deploy your project** + + Your project can be deployed to a `*.workers.dev` subdomain or a [Custom Domain](/workers/configuration/routing/custom-domains/), from your own machine or from any CI/CD system, including Cloudflare's own [Workers Builds](/workers/ci-cd/builds/). + + The following command will build and deploy your project. If you are using CI, ensure you update your ["deploy command"](/workers/ci-cd/builds/configuration/#build-settings) configuration appropriately. + + + + --- -## Static assets +## Asset Routing -You can serve static assets in your React application by [placing them in the `./public/` directory](https://vite.dev/guide/assets#the-public-directory). This can be useful for resource files such as images, stylesheets, fonts, and manifests. +If you're using React as a SPA, you will want to set `not_found_handling = "single_page_application"` in your Wrangler configuration file. ## Use bindings with React -Your new project also contains a Worker at `./api/index.ts`, which you can use as a backend API for your React application. While your React application cannot directly access Workers bindings, it can interact with them through this Worker. You can make [`fetch()` requests](/workers/runtime-apis/fetch/) from your React application to the Worker, which can then handle the request and use bindings. Learn how to [configure Workers bindings](/workers/runtime-apis/bindings/). +Your new project also contains a Worker at `./worker/index.ts`, which you can use as a backend API for your React application. While your React application cannot directly access Workers bindings, it can interact with them through this Worker. You can make [`fetch()` requests](/workers/runtime-apis/fetch/) from your React application to the Worker, which can then handle the request and use bindings. Learn how to [configure Workers bindings](/workers/runtime-apis/bindings/). + + diff --git a/src/content/docs/workers/frameworks/framework-guides/remix.mdx b/src/content/docs/workers/frameworks/framework-guides/remix.mdx index dfbe720db288e80..a3c85421d9ba46e 100644 --- a/src/content/docs/workers/frameworks/framework-guides/remix.mdx +++ b/src/content/docs/workers/frameworks/framework-guides/remix.mdx @@ -28,15 +28,6 @@ To use `create-cloudflare` to create a new Remix project with - - After setting up your project, change your directory by running the following command: ```sh @@ -63,8 +54,4 @@ The following command will build and deploy your project. If you're using CI, en Your Remix application can be fully integrated with the Cloudflare Developer Platform, in both local development and in production, by using product bindings. The [Remix documentation](https://remix.run/docs/en/main/guides/vite#bindings) provides information about configuring bindings and how you can access them in your Remix page loaders. -## Static assets - -You can serve static assets your Remix application by placing them in the `./public/` directory. This can be useful for resource files such as images, stylesheets, fonts, and manifests. - - + diff --git a/src/content/docs/workers/frameworks/framework-guides/solid.mdx b/src/content/docs/workers/frameworks/framework-guides/solid.mdx index 5b1d013d51b6995..2f7bb7727289071 100644 --- a/src/content/docs/workers/frameworks/framework-guides/solid.mdx +++ b/src/content/docs/workers/frameworks/framework-guides/solid.mdx @@ -27,15 +27,6 @@ To use `create-cloudflare` to create a new Solid project with - - After setting up your project, change your directory by running the following command: ```sh @@ -62,8 +53,4 @@ The following command will build and deploy your project. If you're using CI, en Your Solid application can be fully integrated with the Cloudflare Developer Platform, in both local development and in production, by using product bindings. The [Solid documentation](https://docs.solidjs.com/reference/server-utilities/get-request-event) provides information about how to access platform primitives, including bindings. Specifically, for Cloudflare, you can use [`getRequestEnv().nativeEvent.context.cloudflare.env`](https://docs.solidjs.com/solid-start/advanced/request-events#nativeevent) to access bindings. -## Static assets - -You can serve static assets your Solid application by placing them in [the `./public/` directory](https://docs.solidjs.com/solid-start/building-your-application/static-assets). This can be useful for resource files such as images, stylesheets, fonts, and manifests. - - + diff --git a/src/content/docs/workers/frameworks/framework-guides/svelte.mdx b/src/content/docs/workers/frameworks/framework-guides/svelte.mdx index e87eb4fc9f5e872..bac78cfcb0e9ca0 100644 --- a/src/content/docs/workers/frameworks/framework-guides/svelte.mdx +++ b/src/content/docs/workers/frameworks/framework-guides/svelte.mdx @@ -27,15 +27,6 @@ To use `create-cloudflare` to create a new Svelte project with - - After setting up your project, change your directory by running the following command: ```sh @@ -62,8 +53,4 @@ The following command will build and deploy your project. If you're using CI, en Your Svelte application can be fully integrated with the Cloudflare Developer Platform, in both local development and in production, by using product bindings. The [Svelte documentation](https://kit.svelte.dev/docs/adapter-cloudflare#runtime-apis) provides information about configuring bindings and how you can access them in your Svelte hooks and endpoints. -## Static assets - -You can serve static assets your Svelte application by placing them in [the `./static/` directory](https://kit.svelte.dev/docs/project-structure#project-files-static). This can be useful for resource files such as images, stylesheets, fonts, and manifests. - - + diff --git a/src/content/docs/workers/frameworks/framework-guides/vue.mdx b/src/content/docs/workers/frameworks/framework-guides/vue.mdx index d51667ce2d60383..d97871fa9b97e19 100644 --- a/src/content/docs/workers/frameworks/framework-guides/vue.mdx +++ b/src/content/docs/workers/frameworks/framework-guides/vue.mdx @@ -11,6 +11,9 @@ import { InlineBadge, Render, PackageManagers, + Steps, + Details, + FileTree, } from "~/components"; In this guide, you will create a new [Vue](https://vuejs.org/) application and deploy to Cloudflare Workers (with the new [ Workers Assets](/workers/static-assets/)). @@ -27,26 +30,44 @@ To use `create-cloudflare` to create a new Vue project with - - -After setting up your project, change your directory by running the following command: - -```sh -cd my-vue-app -``` - -## 2. Develop locally +
+ Below is a simplified file tree of the project. + + - my-vue-app + - src/ + - App.vue + - server/ + - index.ts + - index.html + - vite.config.ts + - wrangler.jsonc + + + `wrangler.jsonc` is your [Wrangler configuration file](/workers/wrangler/configuration/). + In this file: + - `main` points to `server/index.ts`. This is your Worker, which is going to act as your backend API. + - `assets.not_found_handling` is set to `single-page-application`, which means that routes that are handled by your Vue SPA do not go to the Worker, and are thus free. + - If you want to add bindings to resources on Cloudflare's developer platform, you configure them here. Read more about [bindings](/workers/runtime-apis/bindings/). + + `vite.config.ts` is set up to use the [Cloudflare Vite plugin](/workers/vite-plugin/). This runs your Worker in the Cloudflare Workers runtime, ensuring your local development environment is as close to production as possible. + + `server/index.ts` is your backend API, which contains a single endpoint, `/api/`, that returns a text response. + At `src/App.vue`, your Vue app calls this endpoint to get a message back and displays this. +
+ +## **Develop locally with the [Cloudflare Vite plugin](/workers/vite-plugin/)** After you have created your project, run the following command in the project directory to start a local server. This will allow you to preview your project locally during development. +
+ This project uses Vite for local development and build, and thus comes with + all of Vite's features, including hot module replacement (HMR). In addition, + `vite.config.ts` is set up to use the [Cloudflare Vite + plugin](/workers/vite-plugin/). This runs your application in the Cloudflare + Workers runtime, just like in production, and enables access to local + emulations of bindings. +
## 3. Deploy your project @@ -58,12 +79,14 @@ The following command will build and deploy your project. If you are using CI, e --- -## Static assets +## Asset Routing -You can serve static assets in your Vue application by [placing them in the `./public/` directory](https://vite.dev/guide/assets#the-public-directory). This can be useful for resource files such as images, stylesheets, fonts, and manifests. +If you're using Vue as a SPA, you will want to set `not_found_handling = "single_page_application"` in your Wrangler configuration file. ## Use bindings with Vue -Your new project also contains a Worker at `./server/index.ts`, which you can use as a backend API for your Vue application. While your Vue application cannot directly access Workers bindings, it can interact with them through this Worker. You can make [`fetch()` requests](/workers/runtime-apis/fetch/) from your Vue application to the Worker, which can then handle the request and use bindings. Learn how to [configure Workers bindings](/workers/runtime-apis/bindings/). +Your new project also contains a Worker at `./server/index.ts`, which you can use as a backend API for your Vue application. While your Vue application cannot directly access Workers bindings, it can interact with them through this Worker. You can make [`fetch()` requests](/workers/runtime-apis/fetch/) from your Vue application to the Worker, which can then handle the request and use bindings. + + diff --git a/src/content/partials/workers/frameworks-bindings.mdx b/src/content/partials/workers/frameworks-bindings.mdx new file mode 100644 index 000000000000000..8bd4f469649b12e --- /dev/null +++ b/src/content/partials/workers/frameworks-bindings.mdx @@ -0,0 +1,13 @@ +--- +{} +--- + +import { LinkCard } from "~/components"; + +With bindings, your application can be fully integrated with the Cloudflare Developer Platform, giving you access to compute, storage, AI and more. + +