React Router (formerly Remix)

Start from CLI: Scaffold a full-stack app with React Router v8 and the Cloudflare Vite plugin for lightning-fast development.

npm

yarn

pnpm

npm create cloudflare@latest -- my-react-router-app --framework=react-router

yarn create cloudflare my-react-router-app --framework=react-router

pnpm create cloudflare@latest my-react-router-app --framework=react-router

Or just deploy: Create a full-stack app using React Router v8, with CI/CD and previews all set up for you.

Note

SPA mode and prerendering are not currently supported when using the Cloudflare Vite plugin. If you wish to use React Router in an SPA then we recommend starting with the React template and using React Router as a library.

Already have a React Router project?

Run wrangler deploy in a project without a Wrangler configuration file and Wrangler will automatically detect React Router, generate the necessary configuration, and deploy your project.

npm

yarn

pnpm

npx wrangler deploy

yarn wrangler deploy

pnpm wrangler deploy

Learn more about automatic project configuration.

What is React Router?

React Router v8 is a full-stack React framework for building web applications. It combines with the Cloudflare Vite plugin to provide a first-class experience for developing, building and deploying your apps on Cloudflare.

Creating a full-stack React Router app

Create a new project with the create-cloudflare CLI (C3)
npm
yarn
pnpm
npm create cloudflare@latest -- my-react-router-app --framework=react-router
yarn create cloudflare my-react-router-app --framework=react-router
pnpm create cloudflare@latest my-react-router-app --framework=react-router
Below is a simplified file tree of the project.
my-react-router-app
app
routes
⋯
entry.server.ts
root.tsx
routes.ts
workers
app.ts
react-router.config.ts
vite.config.ts
wrangler.jsonc
react-router.config.ts is your React Router config file. In this file:

ssr is set to true, meaning that your application will use server-side rendering.

vite.config.ts is your Vite config file. The React Router and Cloudflare plugins are included in the plugins array. The Cloudflare Vite plugin runs your server code in the Workers runtime, ensuring your local development environment is as close to production as possible.
wrangler.jsonc is your Worker config file. In this file:

main points to ./workers/app.ts. This is the entry file for your Worker. The default export includes a fetch handler, which delegates the request to React Router.

If you want to add bindings to resources on Cloudflare's developer platform, you configure them here.
How is this project set up?
Below is a simplified file tree of the project.
- my-react-router-app
  app
  routes
  ⋯
  entry.server.ts
  root.tsx
  routes.ts
  workers
  app.ts
  react-router.config.ts
  vite.config.ts
  wrangler.jsonc
react-router.config.ts is your React Router config file. In this file:
- ssr is set to true, meaning that your application will use server-side rendering.
vite.config.ts is your Vite config file. The React Router and Cloudflare plugins are included in the plugins array. The Cloudflare Vite plugin runs your server code in the Workers runtime, ensuring your local development environment is as close to production as possible.
wrangler.jsonc is your Worker config file. In this file:
- main points to ./workers/app.ts. This is the entry file for your Worker. The default export includes a fetch handler, which delegates the request to React Router.
- If you want to add bindings to resources on Cloudflare's developer platform, you configure them here.
Develop locally

After creating your project, run the following command in your project directory to start a local development server.
npm
yarn
pnpm
npm run dev
yarn run dev
pnpm run dev
What's happening in local development?
Deploy your project

Your project can be deployed to a *.workers.dev subdomain or a Custom Domain from your own machine or from any CI/CD system, including Cloudflare's own Workers Builds.

The following command will build and deploy your project. If you are using CI, ensure you update your "deploy command" configuration appropriately.
npm
yarn
pnpm
npm run deploy
yarn run deploy
pnpm run deploy

Use bindings with React Router

With bindings, your application can be fully integrated with the Cloudflare Developer Platform, giving you access to compute, storage, AI and more.

Once you have configured the bindings in the Wrangler configuration file, they are then available within context.cloudflare in your loader or action functions:

app/routes/home.tsx

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} />;
}

As you have direct access to your Worker entry file (workers/app.ts), you can also add additional exports such as Durable Objects and Workflows

Here is an example of how to set up a simple Workflow in your Worker entry file.

workers/app.ts

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>;

Configure it in your Wrangler configuration file:

wrangler.jsonc

wrangler.toml

{
  "workflows": [
    {
      "name": "my-workflow",
      "binding": "MY_WORKFLOW",
      "class_name": "MyWorkflow"
    }
  ]
}

[[workflows]]
name = "my-workflow"
binding = "MY_WORKFLOW"
class_name = "MyWorkflow"

And then use it in your application:

app/routes/home.tsx

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() };
}

Example: Using Workflows

Here is an example of how to set up a simple Workflow in your Worker entry file.

workers/app.ts

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>;

Configure it in your Wrangler configuration file:

wrangler.jsonc

wrangler.toml

{
  "workflows": [
    {
      "name": "my-workflow",
      "binding": "MY_WORKFLOW",
      "class_name": "MyWorkflow"
    }
  ]
}

[[workflows]]
name = "my-workflow"
binding = "MY_WORKFLOW"
class_name = "MyWorkflow"

And then use it in your application:

app/routes/home.tsx

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() };
}

With bindings, your application can be fully integrated with the Cloudflare Developer Platform, giving you access to compute, storage, AI and more.

What is React Router?

Creating a full-stack React Router app

How is this project set up?

What's happening in local development?

Use bindings with React Router

Example: Using Workflows

How is this project set up?

What's happening in local development?

Example: Using Workflows