Skip to content

Commit c673b99

Browse files
emily-shenemily-shen
committed
and the rest of them
1 parent ac6fdb7 commit c673b99

File tree

10 files changed

+71
-141
lines changed

10 files changed

+71
-141
lines changed

‎src/content/docs/workers/frameworks/framework-guides/angular.mdx‎

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -27,15 +27,6 @@ To use `create-cloudflare` to create a new Angular project with <InlineBadge pre
2727
args={"--framework=angular --platform=workers"}
2828
/>
2929

30-
<Render
31-
file="c3-post-run-steps"
32-
product="workers"
33-
params={{
34-
category: "web-framework",
35-
framework: "Angular",
36-
}}
37-
/>
38-
3930
After setting up your project, change your directory by running the following command:
4031

4132
```sh
@@ -60,6 +51,4 @@ The following command will build and deploy your project. If you're using CI, en
6051

6152
## Static assets
6253

63-
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.
64-
6554
<Render file="workers-assets-routing-summary" />

‎src/content/docs/workers/frameworks/framework-guides/docusaurus.mdx‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -27,15 +27,6 @@ To use `create-cloudflare` to create a new Docusaurus project with <InlineBadge
2727
args={"--framework=docusaurus --platform=workers"}
2828
/>
2929

30-
<Render
31-
file="c3-post-run-steps"
32-
product="workers"
33-
params={{
34-
category: "web-framework",
35-
framework: "Docusaurus",
36-
}}
37-
/>
38-
3930
After setting up your project, change your directory by running the following command:
4031

4132
```sh
@@ -55,9 +46,3 @@ Your project can be deployed to a `*.workers.dev` subdomain or a [Custom Domain]
5546
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.
5647

5748
<PackageManagers type="run" args={"deploy"} />
58-
59-
---
60-
61-
## Static assets
62-
63-
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.

‎src/content/docs/workers/frameworks/framework-guides/gatsby.mdx‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -27,15 +27,6 @@ To use `create-cloudflare` to create a new Gatsby project with <InlineBadge pres
2727
args={"--framework=gatsby --platform=workers"}
2828
/>
2929

30-
<Render
31-
file="c3-post-run-steps"
32-
product="workers"
33-
params={{
34-
category: "web-framework",
35-
framework: "Gatsby",
36-
}}
37-
/>
38-
3930
After setting up your project, change your directory by running the following command:
4031

4132
```sh
@@ -55,9 +46,3 @@ Your project can be deployed to a `*.workers.dev` subdomain or a [Custom Domain]
5546
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.
5647

5748
<PackageManagers type="run" args={"deploy"} />
58-
59-
---
60-
61-
## Static assets
62-
63-
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.

‎src/content/docs/workers/frameworks/framework-guides/nuxt.mdx‎

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -27,15 +27,6 @@ To use `create-cloudflare` to create a new Nuxt project with <InlineBadge preset
2727
args={"--framework=nuxt --platform=workers"}
2828
/>
2929

30-
<Render
31-
file="c3-post-run-steps"
32-
product="workers"
33-
params={{
34-
category: "web-framework",
35-
framework: "Nuxt",
36-
}}
37-
/>
38-
3930
After setting up your project, change your directory by running the following command:
4031

4132
```sh
@@ -62,8 +53,4 @@ The following command will build and deploy your project. If you're using CI, en
6253

6354
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.
6455

65-
## Static assets
66-
67-
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.
68-
69-
<Render file="workers-assets-routing-summary" />
56+
<Render file="frameworks-bindings" />

‎src/content/docs/workers/frameworks/framework-guides/qwik.mdx‎

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -27,15 +27,6 @@ To use `create-cloudflare` to create a new Qwik project with <InlineBadge preset
2727
args={"--framework=qwik --platform=workers"}
2828
/>
2929

30-
<Render
31-
file="c3-post-run-steps"
32-
product="workers"
33-
params={{
34-
category: "web-framework",
35-
framework: "Qwik",
36-
}}
37-
/>
38-
3930
After setting up your project, change your directory by running the following command:
4031

4132
```sh
@@ -62,8 +53,4 @@ The following command will build and deploy your project. If you're using CI, en
6253

6354
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.
6455

65-
## Static assets
66-
67-
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.
68-
69-
<Render file="workers-assets-routing-summary" />
56+
<Render file="frameworks-bindings" />

‎src/content/docs/workers/frameworks/framework-guides/react.mdx‎

Lines changed: 63 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -11,59 +11,92 @@ import {
1111
InlineBadge,
1212
Render,
1313
PackageManagers,
14+
Details,
15+
FileTree,
16+
Steps,
1417
} from "~/components";
1518

16-
In this guide, you will create a new [React](https://react.dev/) application and deploy to Cloudflare Workers (with the new [<InlineBadge preset="beta" /> Workers Assets](/workers/static-assets/)).
17-
18-
## 1. Set up a new project
19-
20-
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.
21-
22-
To use `create-cloudflare` to create a new React project with <InlineBadge preset="beta" /> Workers Assets, run the following command:
19+
**Start from CLI** - scaffold a full-stack app with a React SPA, Cloudflare Workers API, and the Cloudflare Vite plugin for lightning-fast development.
2320

2421
<PackageManagers
2522
type="create"
2623
pkg="cloudflare@latest my-react-app"
27-
args={"--framework=react --platform=workers"}
24+
args="--framework=react --platform=workers"
2825
/>
26+
---
2927

30-
<Render
31-
file="c3-post-run-steps"
32-
product="workers"
33-
params={{
34-
category: "web-framework",
35-
framework: "React",
36-
}}
37-
/>
28+
**Or just deploy** - create a full-stack app using React, Hono API And Vite, with CI/CD and previews all set up for you.
29+
30+
[![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)
31+
32+
## What is React?
3833

39-
After setting up your project, change your directory by running the following command:
34+
[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.
4035

41-
```sh
42-
cd my-react-app
43-
```
36+
## Creating a full-stack app with React
4437

45-
## 2. Develop locally
38+
<Steps>
39+
1. **Create a new project with the create-cloudflare CLI (C3)**
4640

47-
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.
41+
<PackageManagers
42+
type="create"
43+
pkg="cloudflare@latest my-react-app"
44+
args="--framework=react --platform=workers"
45+
/>
46+
<Details header="How is this project set up?">
47+
Below is a simplified file tree of the project.
48+
<FileTree>
49+
- my-react-app
50+
- src/
51+
- App.tsx
52+
- worker/
53+
- index.ts
54+
- index.html
55+
- vite.config.ts
56+
- wrangler.jsonc
57+
</FileTree>
4858

49-
<PackageManagers type="run" args={"dev"} />
59+
`wrangler.jsonc` is your [Wrangler configuration file](/workers/wrangler/configuration/).
60+
In this file:
61+
- `main` points to `worker/index.ts`. This is your Worker, which is going to act as your backend API.
62+
- `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.
63+
- 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/).
5064

51-
## 3. Deploy your project
65+
`vite.config.ts` is set up to use the Cloudflare Vite plugin. This runs your Worker in Cloudflare's `workerd` runtime, ensuring your local development environment is as close to production as possible.
5266

53-
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/).
67+
`worker/index.ts` is your backend API, which contains a single endpoint `/api` that returns a text response.
68+
At `src/App.tsx`, your React app calls this endpoint to get a message back and displays this.
69+
</Details>
5470

55-
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.
71+
2. **Develop locally with the Cloudflare Vite plugin**
5672

57-
<PackageManagers type="run" args={"deploy"} />
73+
After creating your project, run the following command in your project directory to start a local development server.
74+
<PackageManagers type="run" args="dev" />
75+
<Details header="What's happening in local development?">
76+
This project uses Vite for local development and build, and thus comes with all of Vite's features like hot module replacement (HMR).
77+
In addition, `vite.config.ts` is set up to use the Cloudflare Vite plugin. This runs your application in Cloudflare's `workerd` runtime, just like in production, as well as access to local emulators of bindings.
78+
</Details>
79+
80+
3. **Deploy your project**
81+
82+
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/).
83+
84+
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.
85+
86+
<PackageManagers type="run" args={"deploy"} />
87+
88+
</Steps>
5889

5990
---
6091

61-
## Static assets
92+
## Asset Routing
6293

63-
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.
94+
If you're using React as a SPA, you will want to set `not_found_handling = "single_page_application"` in your Wrangler configuration file.
6495

6596
<Render file="workers-assets-routing-summary" />
6697

6798
## Use bindings with React
6899

69-
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/).
100+
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/).
101+
102+
<Render file="frameworks-bindings" />

‎src/content/docs/workers/frameworks/framework-guides/remix.mdx‎

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -28,15 +28,6 @@ To use `create-cloudflare` to create a new Remix project with <InlineBadge prese
2828
args={"--framework=remix --platform=workers"}
2929
/>
3030

31-
<Render
32-
file="c3-post-run-steps"
33-
product="workers"
34-
params={{
35-
category: "web-framework",
36-
framework: "Remix",
37-
}}
38-
/>
39-
4031
After setting up your project, change your directory by running the following command:
4132

4233
```sh
@@ -63,8 +54,4 @@ The following command will build and deploy your project. If you're using CI, en
6354

6455
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.
6556

66-
## Static assets
67-
68-
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.
69-
70-
<Render file="workers-assets-routing-summary" />
57+
<Render file="frameworks-bindings" />

‎src/content/docs/workers/frameworks/framework-guides/solid.mdx‎

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -27,15 +27,6 @@ To use `create-cloudflare` to create a new Solid project with <InlineBadge prese
2727
args={"--framework=solid --experimental"}
2828
/>
2929

30-
<Render
31-
file="c3-post-run-steps"
32-
product="workers"
33-
params={{
34-
category: "web-framework",
35-
framework: "Solid",
36-
}}
37-
/>
38-
3930
After setting up your project, change your directory by running the following command:
4031

4132
```sh
@@ -62,8 +53,4 @@ The following command will build and deploy your project. If you're using CI, en
6253

6354
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.
6455

65-
## Static assets
66-
67-
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.
68-
69-
<Render file="workers-assets-routing-summary" />
56+
<Render file="frameworks-bindings" />

‎src/content/docs/workers/frameworks/framework-guides/svelte.mdx‎

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -27,15 +27,6 @@ To use `create-cloudflare` to create a new Svelte project with <InlineBadge pres
2727
args={"--framework=svelte --platform=workers"}
2828
/>
2929

30-
<Render
31-
file="c3-post-run-steps"
32-
product="workers"
33-
params={{
34-
category: "web-framework",
35-
framework: "Svelte",
36-
}}
37-
/>
38-
3930
After setting up your project, change your directory by running the following command:
4031

4132
```sh
@@ -62,8 +53,4 @@ The following command will build and deploy your project. If you're using CI, en
6253

6354
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.
6455

65-
## Static assets
66-
67-
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.
68-
69-
<Render file="workers-assets-routing-summary" />
56+
<Render file="frameworks-bindings" />

‎src/content/docs/workers/frameworks/framework-guides/vue.mdx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@ import {
1111
InlineBadge,
1212
Render,
1313
PackageManagers,
14+
Steps,
15+
Details,
16+
FileTree,
1417
} from "~/components";
1518

1619
In this guide, you will create a new [Vue](https://vuejs.org/) application and deploy to Cloudflare Workers (with the new [<InlineBadge preset="beta" /> Workers Assets](/workers/static-assets/)).

0 commit comments

Comments
 (0)