从 CLI 开始：使用 React Router v8 ↗ 和 Cloudflare Vite 插件 搭建全栈应用，获得极速开发体验。
npm create cloudflare@latest -- my-react-router-app --framework=react-routeryarn create cloudflare my-react-router-app --framework=react-routerpnpm create cloudflare@latest my-react-router-app --framework=react-router或直接部署：使用 React Router v8 创建全栈应用，CI/CD 与预览均已为你配置好。
React Router v8 ↗ 是用于构建 Web 应用的全栈 React 框架。 它与 Cloudflare Vite 插件 结合，为在 Cloudflare 上开发、构建和部署应用提供一流体验。
-
使用 create-cloudflare CLI (C3) 创建新项目
npm create cloudflare@latest -- my-react-router-app --framework=react-routeryarn create cloudflare my-react-router-app --framework=react-routerpnpm create cloudflare@latest my-react-router-app --framework=react-router此项目是如何设置的？
以下是项目的简化文件树。
- my-react-router-app
- app
- routes
- ...
- entry.server.ts
- root.tsx
- routes.ts
- routes
- workers
- app.ts
- react-router.config.ts
- vite.config.ts
- wrangler.jsonc
- app
react-router.config.ts是你的 React Router 配置文件 ↗。 在此文件中：ssr设置为true，意味着应用将使用服务端渲染。
vite.config.ts是你的 Vite 配置文件 ↗。 React Router 和 Cloudflare 插件包含在plugins数组中。 Cloudflare Vite 插件 在 Workers 运行时中运行服务端代码，确保本地开发环境尽可能接近生产环境。wrangler.jsonc是你的 Worker 配置文件。 在此文件中：main指向./workers/app.ts。 这是 Worker 的入口文件。 默认导出包含fetch处理器，将请求委托给 React Router。- 若要为 Cloudflare 开发者平台资源添加绑定（binding），在此配置。
- my-react-router-app
-
在本地开发
创建项目后，在项目目录中运行以下命令以启动本地开发服务器。
npm run devyarn run devpnpm run dev本地开发中发生了什么？
此项目将 React Router 与 Cloudflare Vite 插件 结合使用。 这意味着应用在 Cloudflare Workers 运行时中运行，与生产环境一致，并支持访问绑定的本地模拟。
-
部署项目
你可以从本地机器或任何 CI/CD 系统（包括 Cloudflare 自有的 Workers Builds）将项目部署到
*.workers.dev子域或自定义域名。以下命令将构建并部署项目。若使用 CI，请确保相应更新你的 「deploy command」 配置。
npm run deployyarn run deploypnpm run deploy
通过绑定（binding），应用可与 Cloudflare Developer Platform 完全集成，访问计算、存储、AI 等能力。
在 Wrangler 配置文件中配置绑定（binding）后，可在 loader 或 action 函数中通过 context.cloudflare 访问：
export function loader({ context }: Route.LoaderArgs) {
return { message: context.cloudflare.env.VALUE_FROM_CLOUDFLARE };
}
export default function Home({ loaderData }: Route.ComponentProps) {
return <Welcome message={loaderData.message} />;
}由于你可以直接访问 Worker 入口文件（workers/app.ts），还可以添加额外导出，例如 Durable Objects 和 Workflows。
示例：使用 Workflows
以下示例展示如何在 Worker 入口文件中设置简单的 Workflow。
import { createRequestHandler } from "react-router";
import { WorkflowEntrypoint, type WorkflowStep, type WorkflowEvent } from 'cloudflare:workers';
declare global {
interface CloudflareEnvironment extends Env {}
}
type Env = {
MY_WORKFLOW: Workflow;
};
export class MyWorkflow extends WorkflowEntrypoint<Env> {
override async run(event: WorkflowEvent<{ hello: string }>, step: WorkflowStep) {
await step.do("first step", async () => {
return { output: "First step result" };
});
await step.sleep("sleep", "1 second");
await step.do("second step", async () => {
return { output: "Second step result" };
});
return "Workflow output";
}
}
const requestHandler = createRequestHandler(
() => import("virtual:react-router/server-build"),
import.meta.env.MODE
);
export default {
async fetch(request, env, ctx) {
return requestHandler(request, {
cloudflare: { env, ctx },
});
},
} satisfies ExportedHandler<CloudflareEnvironment>;在 Wrangler 配置文件中配置：
{
"workflows": [
{
"name": "my-workflow",
"binding": "MY_WORKFLOW",
"class_name": "MyWorkflow"
}
]
}[[workflows]]
name = "my-workflow"
binding = "MY_WORKFLOW"
class_name = "MyWorkflow"然后在应用中使用：
export async function action({ context }: Route.ActionArgs) {
const env = context.cloudflare.env;
const instance = await env.MY_WORKFLOW.create({ params: { "hello": "world" } })
return { id: instance.id, details: await instance.status() };
}通过绑定（binding），你的应用程序可以与 Cloudflare Developer Platform 完全集成，让你访问计算、存储、AI 等功能。