Skip to content

Commit aba60de

Browse files
ToriLindsayMaddy-Cloudflarepetebacondarwin
authored
Workers react framework guide (#20214)
* Workers react framework guide * Update src/content/docs/workers/frameworks/framework-guides/react.mdx * Update src/content/docs/workers/frameworks/framework-guides/react.mdx * Update src/content/docs/workers/frameworks/framework-guides/react.mdx * Apply suggestions from code review * Apply suggestions from code review Co-authored-by: Maddy <[email protected]> * Update src/content/docs/workers/frameworks/framework-guides/react.mdx --------- Co-authored-by: Maddy <[email protected]> Co-authored-by: Pete Bacon Darwin <[email protected]>
1 parent 1d6690c commit aba60de

File tree

1 file changed

+65
-0
lines changed
  • src/content/docs/workers/frameworks/framework-guides

1 file changed

+65
-0
lines changed
Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
---
2+
pcx_content_type: how-to
3+
title: React
4+
head: []
5+
description: Create a React application and deploy it to Cloudflare Workers with Workers Assets.
6+
---
7+
8+
import {
9+
Badge,
10+
Description,
11+
InlineBadge,
12+
Render,
13+
PackageManagers,
14+
} from "~/components";
15+
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:
23+
24+
<PackageManagers
25+
type="create"
26+
pkg="cloudflare@latest my-react-app"
27+
args={"--framework=react --platform=workers"}
28+
/>
29+
30+
<Render
31+
file="c3-post-run-steps"
32+
product="workers"
33+
params={{
34+
category: "web-framework",
35+
framework: "React",
36+
}}
37+
/>
38+
39+
After setting up your project, change your directory by running the following command:
40+
41+
```sh
42+
cd my-react-app
43+
```
44+
45+
## 2. Develop locally
46+
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.
48+
49+
<PackageManagers type="run" args={"dev"} />
50+
51+
## 3. Deploy your project
52+
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/).
54+
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.
56+
57+
<PackageManagers type="run" args={"deploy"} />
58+
59+
---
60+
61+
## Static assets
62+
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.
64+
65+
<Render file="workers-assets-routing-summary" />

0 commit comments

Comments
 (0)