ReactRouter

The ReactRouter component lets you deploy a React Router v7 app to Cloudflare.

Note

Create a Cloudflare-compatible app with npm create cloudflare@latest -- my-react-router-app --framework=react-router.

Minimal example

Deploy the React Router app that’s in the project root.

sst.config.ts

new sst.cloudflare.ReactRouter("MyWeb");

Change the path

Deploys the React Router app in the my-app/ directory.

sst.config.ts

new sst.cloudflare.ReactRouter("MyWeb", {
  path: "my-app/"
});

Add a custom domain

Set a custom domain for your React Router app.

sst.config.ts

new sst.cloudflare.ReactRouter("MyWeb", {
  domain: "my-app.com"
});

Link resources

Link resources to your React Router app. This will grant permissions to the resources and allow you to access it in your app.

sst.config.ts

const bucket = new sst.cloudflare.Bucket("MyBucket");

new sst.cloudflare.ReactRouter("MyWeb", {
  link: [bucket]
});

Add this to your vite.config.ts for SST to work correctly.

vite.config.ts

import { reactRouter } from "@react-router/dev/vite";
import { cloudflare } from "@cloudflare/vite-plugin";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    cloudflare({
      viteEnvironment: { name: "ssr" },
      configPath: process.env.SST_WRANGLER_PATH,
    }),
    reactRouter(),
  ],
});

Use sst/resource for linked resources.

app/routes/home.tsx

import { Resource } from "sst/resource";

export async function loader() {
  const files = await Resource.MyBucket.list();
  return { files };
}

---

Constructor

new ReactRouter(name, args?, opts?)

Parameters

• name string

• args? ReactRouterArgs

• opts? ComponentResourceOptions

ReactRouterArgs

buildCommand?

Type Input<string>

Default “npm run build”

The command used internally to build your React Router app.

If you want to use a different build command.

{
  buildCommand: "yarn build"
}

dev?

Type false | Object

• autostart?

• command?

• directory?

• title?

• url?

Configure how this component works in sst dev.

Note

In sst dev your React Router app is run in dev mode; it’s not deployed.

Instead of deploying your React Router app, this starts it in dev mode. It’s run as a separate process in the sst dev multiplexer. Read more about sst dev.

To disable dev mode, pass in false.

dev.autostart?

Type Input<boolean>

Default true

Configure if you want to automatically start this when sst dev starts. You can still start it manually later.

dev.command?

Type Input<string>

Default “npm run dev”

The command that sst dev runs to start this in dev mode.

dev.directory?

Type Input<string>

Default Uses the path

Change the directory from where the command is run.

dev.title?

Type Input<string>

The title of the tab in the multiplexer.

dev.url?

Type Input<string>

Default “http://url-unavailable-in-dev.mode”

The url when this is running in dev mode.

Since this component is not deployed in sst dev, there is no real URL. But if you are using this component’s url or linking to this component’s url, it can be useful to have a placeholder URL. It avoids having to handle it being undefined.

domain?

Type Input<string>

Set a custom domain for your React Router app.

{
  domain: "my-app.com"
}

environment?

Type Input<Record<string, Input<string>>>

Set environment variables in your React Router app. These are made available:

1. In vite build, they are loaded into the build.
2. At runtime as Worker bindings.
3. Locally while running vite dev through sst dev.

Tip

You can also link resources to your React Router app and access them in a type-safe way with the SDK. We recommend linking since it’s more secure.

{
  environment: {
    API_URL: api.url,
    PUBLIC_STRIPE_PUBLISHABLE_KEY: "pk_test_123"
  }
}

You can access the environment variables in your React Router app as follows:

export function loader({ context }: Route.LoaderArgs) {
  return { apiUrl: context.cloudflare.env.API_URL };
}

link?

Type Input<any[]>

Link resources to your React Router app. This will:

1. Grant the permissions needed to access the resources.
2. Allow you to access it in your app using the SDK.

Takes a list of resources to link to the app.

{
  link: [bucket, stripeKey]
}

You can access the linked resources in your React Router app.

import { Resource } from "sst";

console.log(Resource.MyBucket.name);

path?

Type string

Default ”.”

Path to the directory where your React Router app is located. This path is relative to your sst.config.ts.

By default it assumes your React Router app is in the root of your SST app.

If your React Router app is in a package in your monorepo.

{
  path: "packages/web"
}

transform?

Type Object

• server?

Transform how this component creates its underlying resources.

transform.server?

Type WorkerArgs | (args: WorkerArgs, opts: ComponentResourceOptions, name: string) => void

Transform the Worker component used for handling the server-side rendering.

Properties

nodes

Type Object

• server

The underlying resources this component creates.

nodes.server

Type undefined | Worker

The Cloudflare Worker that renders the site.

url

Type Output<undefined | string>

The URL of the React Router app.

If the domain is set, this is the URL with the custom domain. Otherwise, it’s the auto-generated Worker URL.

SDK

Use the SDK in your runtime to interact with your infrastructure.

---

Links

This is accessible through the Resource object in the SDK.

• url undefined | string

  The URL of the React Router app.

  If the domain is set, this is the URL with the custom domain. Otherwise, it’s the auto-generated Worker URL.