我的书签
添加书签
移除书签React + Vite·续
npm run build
```
yarn run build ```
pnpm run build
```
The `dist` directory will contain your client build output in the `client` subdirectory and your Worker code alongside the output `wrangler.json` configuration file. ### Preview your application Run the preview command to validate that your application runs as expected.npmyarnpnpm
npm run preview ```
yarn run preview
```
pnpm run preview ```
This command will run your build output locally in the Workers runtime, closely matching its behavior in production. ### Deploy to Cloudflare Run the deploy command to deploy your application to Cloudflare.npmyarnpnpm
npx wrangler deploy
```
yarn wrangler deploy ```
pnpm wrangler deploy
```
This command will automatically use the output `wrangler.json` that was included in the build output.
## Add an API Worker to an existing project
If you want to add an API Worker to your existing React + Vite project, follow these additional steps:
1. **Configure TypeScript for your Worker code**### Add Workers TypeScript types npmyarnpnpmbun
npm i -D @cloudflare/workers-types ```
yarn add -D @cloudflare/workers-types
```
pnpm add -D @cloudflare/workers-types ```
bun add -d @cloudflare/workers-types
```
Create a `tsconfig.worker.json` that extends your Node TypeScript configuration and adds the Workers types:
*tsconfig.worker.jsonjsonc*
```jsonc
{
"extends": "./tsconfig.node.json",
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.worker.tsbuildinfo",
"types": ["@cloudflare/workers-types/2023-07-01", "vite/client"],
},
"include": ["worker"],
}
```
Then add a reference to this new configuration in your root `tsconfig.json`:
*tsconfig.jsonjsonc*
```jsonc
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" },
{ "path": "./tsconfig.worker.json" },
],
}
```
2. **Add the Worker entrypoint to your configuration**### Add the Worker entrypoint to your configuration Update your Wrangler configuration file to add a `main` field that points to your Worker entrypoint:
```jsonc
{
"$schema": "./node_modules/wrangler/config-schema.json",
"name": "my-app",
// Set this to today's date
"compatibility_date": "2026-10-27",
"main": "./worker/index.ts",
"upload_source_maps": true,
"assets": {
"not_found_handling": "single-page-application"
}
}
```
```toml
name = "my-app"
# Set this to today's date
compatibility_date = "2026-10-27"
main = "./worker/index.ts"
upload_source_maps = true
[assets]
not_found_handling = "single-page-application"
```
The `main` field specifies the entry file for your Worker code.
3. **Add your API Worker**### Add your API Worker Create a `worker/index.ts` file with the following contents:
*worker/index.tsts*
```ts
export default {
fetch(request) {
const url = new URL(request.url);
if (url.pathname.startsWith("/api/")) {
return Response.json({
name: "Cloudflare",
});
}
return new Response(null, { status: 404 });
},
} satisfies ExportedHandler;
```
The Worker defined in the preceding code block will be invoked for any non-navigation request that does not match a static asset. It returns a JSON response if the `pathname` starts with `/api/` and otherwise returns a `404` response.
Note
For top-level navigation requests, browsers send a `Sec-Fetch-Mode: navigate` header. If this is present and the URL does not match a static asset, the `not_found_handling` behavior will be invoked rather than the Worker. This implicit routing is the default behavior.
If you would instead like to define the routes that invoke your Worker explicitly, you can provide an array of route patterns to [`run_worker_first`](https://developers.cloudflare.com/workers/static-assets/binding/#run_worker_first). This opts out of interpreting the `Sec-Fetch-Mode` header.
```jsonc
{
"$schema": "./node_modules/wrangler/config-schema.json",
"name": "cloudflare-vite-tutorial",
// Set this to today's date
"compatibility_date": "2026-10-27",
"main": "./worker/index.ts",
"upload_source_maps": true,
"assets": {
"not_found_handling": "single-page-application",
"run_worker_first": [
"/api/*"
]
}
}
```
```toml
name = "cloudflare-vite-tutorial"
# Set this to today's date
compatibility_date = "2026-10-27"
main = "./worker/index.ts"
upload_source_maps = true
[assets]
not_found_handling = "single-page-application"
run_worker_first = ["/api/*"]
```
4. **Call the API from the client**
You can now call your API from your React components. For example, in `src/App.tsx`:
*src/App.tsxtsx*
```tsx
import { useState } from "react";
function App() {
const [name, setName] = useState("unknown");
return (
<div className="card">
<button
onClick={() => {
fetch("/api/")
.then((res) => res.json() as Promise<{ name: string }>)
.then((data) => setName(data.name));
}}
>
Name from API is: {name}
</button>
</div>
);
}
export default App;
```
---
## Asset Routing
If you're using React as a SPA, you will want to set `not_found_handling = "single-page-application"` in your Wrangler configuration file.
By default, Cloudflare first tries to match a request path against a static asset path, which is based on the file structure of the uploaded asset directory. This is either the directory specified by `assets.directory` in your Wrangler config or, in the case of the [Cloudflare Vite plugin](https://developers.cloudflare.com/workers/vite-plugin/), the output directory of the client build. Failing that, we invoke a Worker if one is present. If there is no Worker, or the Worker then uses the asset binding, Cloudflare will fallback to the behaviour set by [`not_found_handling`](https://developers.cloudflare.com/workers/static-assets/#routing-behavior).
Refer to the [routing documentation](https://developers.cloudflare.com/workers/static-assets/routing/) for more information about how routing works with static assets, and how to customize this behavior.
## Use bindings with React
Your project can also contain 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](https://developers.cloudflare.com/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](https://developers.cloudflare.com/workers/runtime-apis/bindings/).
With bindings, your application can be fully integrated with the Cloudflare Developer Platform, giving you access to compute, storage, AI and more.
### [Bindings](https://developers.cloudflare.com/workers/runtime-apis/bindings/)
Access to compute, storage, AI and more.
Was this helpful?
YesNo
## On this page
[Docs](https://developers.cloudflare.com/)
```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/workers/framework-guides/web-apps/react/#page","headline":"React + Vite","description":"Create a new React + Vite application or deploy an existing one to Cloudflare Workers with Workers Assets.","url":"https://developers.cloudflare.com/workers/framework-guides/web-apps/react/","inLanguage":"en","image":"https://developers.cloudflare.com/workers/framework-guides/web-apps/react/og.png?v=757a34c0abb4669e","dateModified":"2026-09-05","publisher":{"@type":"Organization","name":"Cloudflare","description":"One platform for your apps, agents, and workforce. Build, secure, and scale without managing infrastructure","url":"https://www.cloudflare.com/","sameAs":["https://github.com/cloudflare","https://www.linkedin.com/company/cloudflare","https://x.com/cloudflare"],"logo":{"@type":"ImageObject","url":"https://developers.cloudflare.com/logo.svg"},"address":{"@type":"PostalAddress","streetAddress":"101 Townsend St","addressLocality":"San Francisco","addressRegion":"CA","postalCode":"94107","addressCountry":"US"},"contactPoint":[{"@type":"ContactPoint","contactType":"Customer Support","url":"https://support.cloudflare.com/","availableLanguage":["English"]},{"@type":"ContactPoint","contactType":"Sales","url":"https://www.cloudflare.com/contact/","availableLanguage":["English"]}]},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"},"keywords":["spa"]}
description: Create a React Router application and deploy it to Cloudflare Workers title: React Router (formerly Remix) image: https://developers.cloudflare.com/workers/framework-guides/web-apps/react-router/og.png?v=b8f57962de04871f
Documentation Index
Fetch the complete documentation index at: https://developers.cloudflare.com/workers/llms.txt
Use this file to discover all available pages before exploring further.
