React Router on Cloudflare

Deploy a React Router v7 application to Cloudflare with bindings and secrets

React Router on Cloudflare Example

This example shows how to deploy a React Router v7 application to Cloudflare Workers with environment bindings and secrets.

Features

• React Router v7: File-based routing with server rendering
• Cloudflare Workers: Edge deployment
• Environment Bindings: Secrets and configuration
• Type Safety: Full TypeScript support

Project Setup

Key Features Explained

Environment Bindings

Secrets are passed as bindings to your application:

bindings: {
  ALCHEMY_TEST_VALUE: alchemy.secret("Hello from Alchemy!"),
}

Server-Side Rendering

React Router runs on Cloudflare’s edge:

export async function loader({ context }) {
  // Server-side code with access to Cloudflare bindings
  const env = context.cloudflare.env;
  return { data: env.ALCHEMY_TEST_VALUE };
}

Type Safety

Full TypeScript support for environment bindings:

interface AppLoadContext {
  cloudflare: {
    env: typeof website.Env;
  };
}

Advanced Usage

Add KV Storage

Extend with KV Namespace:

import { KVNamespace, ReactRouter } from "alchemy/cloudflare";

const kv = await KVNamespace("kv", {
  title: `${app.name}-${app.stage}-kv`,
});

const website = await ReactRouter("website", {
  bindings: {
    KV: kv,
    ALCHEMY_TEST_VALUE: alchemy.secret("Hello from Alchemy!"),
  },
});

Use in loader:

export async function loader({ context }: { context: any }) {
  const value = await context.cloudflare.env.KV.get("key");
  return { value };
}

Source Code

View the complete source code: examples/cloudflare-react-router