Skip to content
Merged
Show file tree
Hide file tree
Changes from 13 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions public/__redirects
Original file line number Diff line number Diff line change
Expand Up @@ -1526,6 +1526,7 @@
/workers/tutorials/create-sitemap-from-sanity-cms/ /developer-spotlight/tutorials/create-sitemap-from-sanity-cms/ 301
/workers/tutorials/custom-access-control-for-files-in-r2-using-d1-and-workers/ /developer-spotlight/tutorials/custom-access-control-for-files/ 301
/workers/tutorials/generate-dynamic-og-images-using-workers/ /workers/tutorials/ 302
/workers/frameworks/framework-guides/remix/ /workers/frameworks/framework-guides/react-router/ 301

# workers ai
/workers-ai/models/llm/ /workers-ai/models/#text-generation 301
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
---
pcx_content_type: how-to
title: React Router (formerly Remix)
description: Create a React Router application and deploy it to Cloudflare Workers
---

import {
Render,
PackageManagers,
Steps,
Details,
FileTree,
} from "~/components";

**Start from CLI** - scaffold a full-stack app with [React Router v7](https://reactrouter.com/) and the [Cloudflare Vite plugin](/workers/vite-plugin/) for lightning-fast development.

<PackageManagers
type="create"
pkg="cloudflare@latest my-react-router-app"
args="--framework=react-router"
/>

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

[![Deploy to Workers](https://deploy.workers.cloudflare.com/button)](https://deploy.workers.cloudflare.com/?url=https://github.com/cloudflare/templates/tree/main/react-router-starter-template)

## What is React Router?

[React Router v7](https://reactrouter.com/) is a full-stack React framework for building web applications.
It combines with the [Cloudflare Vite plugin](/workers/vite-plugin/) to provide a first-class experience for developing, building and deploying your apps on Cloudflare.

## Creating a full-stack React Router app

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

<PackageManagers
type="create"
pkg="cloudflare@latest my-react-router-app"
args="--framework=react-router"
/>
<Details header="How is this project set up?">
Below is a simplified file tree of the project.
<FileTree>
- 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
</FileTree>

`react-router.config.ts` is your [React Router config file](https://reactrouter.com/explanation/special-files#react-routerconfigts).
In this file:
- `ssr` is set to `true`, meaning that your application will use server-side rendering.
- `future.unstable_viteEnvironmentApi` is set to `true` to enable compatibility with the [Cloudflare Vite plugin](/workers/vite-plugin/).

:::note
SPA mode and prerendering are not currently supported when using the [Cloudflare Vite plugin](/workers/vite-plugin/).
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).
:::

`vite.config.ts` is your [Vite config file](https://vite.dev/config/).
The React Router and Cloudflare plugins are included in the `plugins` array.
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.

`wrangler.jsonc` is your [Worker config file](/workers/wrangler/configuration/).
In this file:
- `main` points to `./workers/app.ts`.
This is the entry file for your Worker.
The default export includes a [`fetch` handler](/workers/runtime-apis/fetch/), which delegates the request to React Router.
- If you want to add [bindings](/workers/runtime-apis/bindings/) to resources on Cloudflare's developer platform, you configure them here.
</Details>

2. **Develop locally**

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

3. **Deploy your project**

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/).

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.

<PackageManagers type="run" args={"deploy"} />

</Steps>

## 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.
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/).

<Render file="frameworks-bindings" />
57 changes: 0 additions & 57 deletions src/content/docs/workers/frameworks/framework-guides/remix.mdx

This file was deleted.

4 changes: 2 additions & 2 deletions src/content/docs/workers/vite-plugin/get-started.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { PackageManagers, WranglerConfig } from "~/components";

:::note
This guide demonstrates creating a standalone Worker from scratch.
{/* Add link to React Router framework guide */}If you would instead like to create a new application from a ready-to-go template, refer to the [React](/workers/frameworks/framework-guides/react/) or [Vue](/workers/frameworks/framework-guides/vue/) framework guides.
If you would instead like to create a new application from a ready-to-go template, refer to the [React Router](/workers/frameworks/framework-guides/react-router/), [React](/workers/frameworks/framework-guides/react/) or [Vue](/workers/frameworks/framework-guides/vue/) framework guides.
:::

## Start with a basic `package.json`
Expand Down Expand Up @@ -81,7 +81,7 @@ export default {
};
```

A request to this Worker will return 'Running in Cloudflare-Workers!', demonstrating that the code is running inside the Workers runtime.
A request to this Worker will return **'Running in Cloudflare-Workers!'**, demonstrating that the code is running inside the Workers runtime.

## Dev, build, preview and deploy

Expand Down
10 changes: 5 additions & 5 deletions src/content/docs/workers/vite-plugin/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ description: A full-featured integration between Vite and the Workers runtime
The Cloudflare Vite plugin enables a full-featured integration between [Vite](https://vite.dev/) and the [Workers runtime](/workers/runtime-apis/).
Your Worker code runs inside [workerd](https://github.com/cloudflare/workerd), matching the production behavior as closely as possible and providing confidence as you develop and deploy your applications.

### Features
## Features

- Uses the Vite [Environment API](https://vite.dev/guide/api-environment) to integrate Vite with the Workers runtime
- Provides direct access to [Workers runtime APIs](/workers/runtime-apis/) and [bindings](/workers/runtime-apis/bindings/)
Expand All @@ -18,16 +18,16 @@ Your Worker code runs inside [workerd](https://github.com/cloudflare/workerd), m
- Leverages Vite's hot module replacement for consistently fast updates
- Supports `vite preview` for previewing your build output in the Workers runtime prior to deployment

### Use cases
## Use cases

- React Router v7 (support for more full-stack frameworks is coming soon)
- [React Router v7](https://reactrouter.com/) (support for more full-stack frameworks is coming soon)
- Static sites, such as single-page applications, with or without an integrated backend API
- Standalone Workers
- Multi-Worker applications

### Get started
## Get started

{/* Add link to React Router framework guide */}To create a new application from a ready-to-go template, refer to the [React](/workers/frameworks/framework-guides/react/) or [Vue](/workers/frameworks/framework-guides/vue/) framework guides.
To create a new application from a ready-to-go template, refer to the [React Router](/workers/frameworks/framework-guides/react-router/), [React](/workers/frameworks/framework-guides/react/) or [Vue](/workers/frameworks/framework-guides/vue/) framework guides.

To create a standalone Worker from scratch, refer to [Get started](/workers/vite-plugin/get-started/).

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -87,15 +87,11 @@ vars = { MY_VAR = "Production var" }

Next, provide `.env.staging` and `.env.production` files:

```sh
# .env.staging

```sh title=".env.staging"
CLOUDFLARE_ENV=staging
```

```sh
# .env.production

```sh title=".env.production"
CLOUDFLARE_ENV=production
```

Expand Down
Loading