Skip to content

Commit 24455b6

Browse files
petebacondarwinpetebacondarwin
committed
add more detail around how to use bindings in React-Router Workers projects
1 parent d5525b8 commit 24455b6

File tree

1 file changed

+117
-49
lines changed

1 file changed

+117
-49
lines changed

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

Lines changed: 117 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -33,74 +33,142 @@ It combines with the [Cloudflare Vite plugin](/workers/vite-plugin/) to provide
3333
## Creating a full-stack React Router app
3434

3535
<Steps>
36-
1. **Create a new project with the create-cloudflare CLI (C3)**
3736

38-
<PackageManagers
37+
1. **Create a new project with the create-cloudflare CLI (C3)**
38+
39+
<PackageManagers
3940
type="create"
4041
pkg="cloudflare@latest"
4142
args="my-react-router-app --framework=react-router"
42-
/>
43-
<Details header="How is this project set up?">
44-
Below is a simplified file tree of the project.
45-
<FileTree>
46-
- my-react-router-app
47-
- app
48-
- routes
49-
- ...
50-
- entry.server.ts
51-
- root.tsx
52-
- routes.ts
53-
- workers
54-
- app.ts
55-
- react-router.config.ts
56-
- vite.config.ts
57-
- wrangler.jsonc
58-
</FileTree>
59-
60-
`react-router.config.ts` is your [React Router config file](https://reactrouter.com/explanation/special-files#react-routerconfigts).
61-
In this file:
62-
- `ssr` is set to `true`, meaning that your application will use server-side rendering.
63-
- `future.unstable_viteEnvironmentApi` is set to `true` to enable compatibility with the [Cloudflare Vite plugin](/workers/vite-plugin/).
64-
65-
:::note
66-
SPA mode and prerendering are not currently supported when using the [Cloudflare Vite plugin](/workers/vite-plugin/).
67-
If you wish to use React Router in an SPA then we recommend starting with the [React template](/workers/frameworks/framework-guides/react/) and using React Router [as a library](https://reactrouter.com/start/data/installation).
68-
:::
69-
70-
`vite.config.ts` is your [Vite config file](https://vite.dev/config/).
71-
The React Router and Cloudflare plugins are included in the `plugins` array.
72-
The [Cloudflare Vite plugin](/workers/vite-plugin/) runs your server code in the Workers runtime, ensuring your local development environment is as close to production as possible.
73-
74-
`wrangler.jsonc` is your [Worker config file](/workers/wrangler/configuration/).
75-
In this file:
76-
- `main` points to `./workers/app.ts`.
77-
This is the entry file for your Worker.
78-
The default export includes a [`fetch` handler](/workers/runtime-apis/fetch/), which delegates the request to React Router.
79-
- If you want to add [bindings](/workers/runtime-apis/bindings/) to resources on Cloudflare's developer platform, you configure them here.
80-
</Details>
43+
/>
44+
45+
<Details header="How is this project set up?">
46+
47+
Below is a simplified file tree of the project.
48+
49+
<FileTree>
50+
- my-react-router-app
51+
- app
52+
- routes
53+
- ...
54+
- entry.server.ts
55+
- root.tsx
56+
- routes.ts
57+
- workers
58+
- app.ts
59+
- react-router.config.ts
60+
- vite.config.ts
61+
- wrangler.jsonc
62+
</FileTree>
63+
64+
`react-router.config.ts` is your [React Router config file](https://reactrouter.com/explanation/special-files#react-routerconfigts).
65+
In this file:
66+
- `ssr` is set to `true`, meaning that your application will use server-side rendering.
67+
- `future.unstable_viteEnvironmentApi` is set to `true` to enable compatibility with the [Cloudflare Vite plugin](/workers/vite-plugin/).
68+
69+
:::note
70+
SPA mode and prerendering are not currently supported when using the [Cloudflare Vite plugin](/workers/vite-plugin/).
71+
If you wish to use React Router in an SPA then we recommend starting with the [React template](/workers/frameworks/framework-guides/react/) and using React Router [as a library](https://reactrouter.com/start/data/installation).
72+
:::
73+
74+
`vite.config.ts` is your [Vite config file](https://vite.dev/config/).
75+
The React Router and Cloudflare plugins are included in the `plugins` array.
76+
The [Cloudflare Vite plugin](/workers/vite-plugin/) runs your server code in the Workers runtime, ensuring your local development environment is as close to production as possible.
77+
78+
`wrangler.jsonc` is your [Worker config file](/workers/wrangler/configuration/).
79+
In this file:
80+
- `main` points to `./workers/app.ts`.
81+
This is the entry file for your Worker.
82+
The default export includes a [`fetch` handler](/workers/runtime-apis/fetch/), which delegates the request to React Router.
83+
- If you want to add [bindings](/workers/runtime-apis/bindings/) to resources on Cloudflare's developer platform, you configure them here.
84+
85+
</Details>
8186

8287
2. **Develop locally**
8388

8489
After creating your project, run the following command in your project directory to start a local development server.
90+
8591
<PackageManagers type="run" args="dev" />
86-
<Details header="What's happening in local development?">
87-
This project uses React Router in combination with the [Cloudflare Vite plugin](/workers/vite-plugin/).
88-
This means that your application runs in the Cloudflare Workers runtime, just like in production, and enables access to local emulations of bindings.
89-
</Details>
92+
93+
<Details header="What's happening in local development?">
94+
This project uses React Router in combination with the [Cloudflare Vite plugin](/workers/vite-plugin/).
95+
This means that your application runs in the Cloudflare Workers runtime, just like in production, and enables access to local emulations of bindings.
96+
</Details>
9097

9198
3. **Deploy your project**
9299

93-
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/).
100+
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/).
94101

95-
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.
102+
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.
96103

97-
<PackageManagers type="run" args={"deploy"} />
104+
<PackageManagers type="run" args={"deploy"} />
98105

99106
</Steps>
100107

101108
## Use bindings with React Router
102109

103110
With bindings, your application can be fully integrated with the Cloudflare Developer Platform, giving you access to compute, storage, AI and more.
104-
As you have direct access to your Worker entry file (`workers/app.ts`), you can also add additional exports such as [Durable Objects](/durable-objects/) and [Workflows](/workflows/).
111+
112+
Once you have configured the bindings in the Wrangler configuration file, they are then available within `context.cloudflare` in your loader or action functions:
113+
114+
```ts title="app/routes/home.tsx"
115+
export function loader({ context }: Route.LoaderArgs) {
116+
return { message: context.cloudflare.env.VALUE_FROM_CLOUDFLARE };
117+
}
118+
119+
export default function Home({ loaderData }: Route.ComponentProps) {
120+
return <Welcome message={loaderData.message} />;
121+
}
122+
```
123+
124+
As you have direct access to your Worker entry file (`workers/app.ts`), you can also add additional exports such as [Durable Objects](/durable-objects/) and [Workflows](/workflows/)
125+
126+
<Details header="Example: Using Workflows">
127+
128+
Here is an example of how to set up a simple Workflow in your Worker entry file.
129+
130+
```ts title="workers/app.ts"
131+
import { createRequestHandler } from "react-router";
132+
import { WorkflowEntrypoint, WorkflowStep, WorkflowEvent } from 'cloudflare:workers';
133+
134+
declare global {
135+
interface CloudflareEnvironment extends Env {}
136+
}
137+
138+
type Env = {
139+
MY_WORKFLOW: Workflow;
140+
};
141+
142+
export class MyWorkflow extends WorkflowEntrypoint<Env> {
143+
override async run(event: WorkflowEvent<Params>, step: WorkflowStep) {
144+
await step.do("first step", async () => {
145+
return { output: "First step result" };
146+
});
147+
148+
await step.sleep("sleep", "1 second");
149+
150+
await step.do("second step", async () => {
151+
return { output: "Second step result" };
152+
});
153+
154+
return "Workflow output";
155+
}
156+
}
157+
158+
const requestHandler = createRequestHandler(
159+
() => import("virtual:react-router/server-build"),
160+
import.meta.env.MODE
161+
);
162+
163+
export default {
164+
async fetch(request, env, ctx) {
165+
return requestHandler(request, {
166+
cloudflare: { env, ctx },
167+
});
168+
},
169+
} satisfies ExportedHandler<CloudflareEnvironment>;
170+
```
171+
172+
</Details>
105173

106174
<Render file="frameworks-bindings" />

0 commit comments

Comments
 (0)