$ mise use nodejs@latest

$ node -v
v22.2.0

$ npm -v
10.7.0

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

╰ Do you want to use git for version control?
  Yes / No

╰ Do you want to deploy your application?
  Yes / No

$ cd my-react-router-app/

$ npm run dev

$ npm run preview

$ npm run deploy

Total Upload: 857.31 KiB / gzip: 168.20 KiB
Worker Startup Time: 2 ms
Your Worker has access to the following bindings:
- Vars:
  - VALUE_FROM_CLOUDFLARE: "Hello from Cloudflare"
Uploaded my-react-router-app (8.34 sec)
Deployed my-react-router-app triggers (0.80 sec)
  https://<アプリ名>.<アカウント名>.workers.dev
Current Version ID: XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX

{
	"name": "my-react-router-app",
	"private": true,
	"type": "module",
	"scripts": {
		"build": "react-router build",
		"cf-typegen": "wrangler types",
		"deploy": "npm run build && wrangler deploy",
		"dev": "react-router dev",
		"preview": "npm run build && vite preview",
		"typecheck": "npm run cf-typegen && react-router typegen && tsc -b"
	},
	"dependencies": {
		"isbot": "^5.1.27",
		"react": "^19.1.0",
		"react-dom": "^19.1.0",
		"react-router": "^7.5.3"
	},
	"devDependencies": {
		"@cloudflare/vite-plugin": "^1.0.12",
		"@cloudflare/workers-types": "^4.20250506.0",
		"@react-router/dev": "^7.5.3",
		"@tailwindcss/vite": "^4.1.4",
		"@types/node": "^20",
		"@types/react": "^19.1.2",
		"@types/react-dom": "^19.1.2",
		"tailwindcss": "^4.1.4",
		"typescript": "^5.8.3",
		"vite": "^6.3.3",
		"vite-tsconfig-paths": "^5.1.4",
		"wrangler": "^4.14.1"
	}
}

.
├── .git                       # Gitのリポジトリ情報（バージョン管理に必要）
├── .gitignore                 # Gitに含めないファイル・ディレクトリの指定
├── README.md                  # プロジェクトの概要や使い方の説明
├── app/                       # React Router のルートやコンポーネントの格納先
├── node_modules/              # npmでインストールされた依存パッケージ
├── package-lock.json          # npmの依存関係を固定するためのファイル
├── package.json               # 使用パッケージ・スクリプト・メタ情報
├── public/                    # 静的ファイルの格納先（favicon, robots.txt など）
├── react-router.config.ts     # React Router の設定情報（ルート設定など）
├── tsconfig.cloudflare.json   # Cloudflare Worker 用の TypeScript 設定
├── tsconfig.json              # 共通の TypeScript 設定ファイル
├── tsconfig.node.json         # Node.js環境向けの TypeScript 設定
├── vite.config.ts             # Vite（ビルドツール）の設定
├── worker-configuration.d.ts  # Cloudflare Worker 設定の型定義ファイル
├── workers/                   # Cloudflare Workers のエントリーポイントやロジック
└── wrangler.jsonc             # Cloudflare Wrangler の設定ファイル（デプロイ設定）

{
  "routes": [
    {
      "pattern": "test.example.com",
      "custom_domain": true
    }
  ]
}

Total Upload: 857.31 KiB / gzip: 168.20 KiB
Worker Startup Time: 3 ms
Your Worker has access to the following bindings:
- Vars:
  - VALUE_FROM_CLOUDFLARE: "Hello from Cloudflare"
Uploaded my-react-router-app (7.19 sec)
Deployed my-react-router-app triggers (1.48 sec)
  test.example.com (custom domain)
Current Version ID: XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX

        <div className="max-w-[300px] w-full space-y-6 px-4">
          <nav className="rounded-3xl border border-gray-200 p-6 dark:border-gray-700 space-y-4">
            <p className="leading-6 text-gray-700 dark:text-gray-200 text-center">
              Enjoy React Router v7!!!
            </p>

export function Test() {
  return (
    <div className="h-screen flex items-center justify-center">
      <div className="p-6 border border-gray-200 dark:border-gray-700 rounded-3xl">
        Test
      </div>
    </div>
  );
}

import type { Route } from "./+types/home";
import { Test } from "../test/test";

export function meta({}: Route.MetaArgs) {
  return [
    { title: "Test" },
    { name: "description", content: "Test" },
  ];
}

export default function Home() {
  return <Test />;
}

import { type RouteConfig, index, route } from "@react-router/dev/routes";

export default [
    index("routes/home.tsx"),
    route("/test", "routes/test.tsx")
] satisfies RouteConfig;

	"vars": {
		"VALUE_FROM_CLOUDFLARE": "Hello from Cloudflare",
	},

export interface Env {
  VALUE_FROM_CLOUDFLARE: string;
}

export default {
  async fetch(request, env, ctx): Promise<Response> {
    return new Response(`${env.VALUE_FROM_CLOUDFLARE}`);
  },
} satisfies ExportedHandler<Env>;

	"vars": {
		"VALUE_FROM_CLOUDFLARE": "Hello from Cloudflare",
	},
	"env": {
		"staging": {
		  "vars": {
			"VALUE_FROM_CLOUDFLARE": "Hello from Cloudflare Staging"
		  }
		},
		"production": {
		  "vars": {
			"VALUE_FROM_CLOUDFLARE": "Hello from Cloudflare Production"
		  }
		}
	},

CLOUDFLARE_ENV=staging

CLOUDFLARE_ENV=production

$ npx vite build --mode staging
$ npx vite preview

ENV_VALUE="value"

export interface Env {
  ENV_VALUE: string;
}

export default {
  async fetch(request, env, ctx): Promise<Response> {
    return new Response(`${env.ENV_VALUE}`);
  },
} satisfies ExportedHandler<Env>;

$ npx wrangler secret put SECRET_VALUE

 ⛅️ wrangler 4.14.1 (update available 4.14.2)
-------------------------------------------------------

? Enter a secret value: ›

export interface Env {
  SECRET_VALUE: string;
}

export default {
  async fetch(request, env, ctx): Promise<Response> {
    return new Response(`${env.SECRET_VALUE}`);
  },
} satisfies ExportedHandler<Env>;

$ npx wrangler secret list
[
  {
    "name": "SECRET_VALUE",
    "type": "secret_text"
  }
]

$ npx wrangler r2 bucket create test-bucket

	  "r2_buckets": [
		{ "binding": "TEST_BUCKET", "bucket_name": "test-bucket" }
	  ],

export interface Env {
  TEST_BUCKET: R2Bucket;
}

export default {
  async fetch(request, env) {
    await env.TEST_BUCKET.put("hello.txt", "Hello, R2!");
    const object = await env.TEST_BUCKET.get("hello.txt");
    return new Response(object?.body);
  }
};

$ curl http://localhost:5173/
Hello, R2!

$ npx wrangler kv namespace create test-kv

	  "kv_namespaces": [
		{ "binding": "TEST_KV",
		  "id": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
		}
	  ],

export interface Env {
  TEST_KV: KVNamespace;
}

export default {
  async fetch(request, env) {
    await env.TEST_KV.put("foo", "bar");
    const value = await env.TEST_KV.get("foo");
    return new Response(`KV value: ${value}`);
  }
};

$ curl http://localhost:5173/
KV value: bar

$ npx wrangler d1 create test-database

	  "d1_databases": [
		{
		  "binding": "DB",
		  "database_name": "test-database",
		  "database_id": "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
		}
	  ],

$ npx wrangler d1 execute test-database --file setup.sql

DROP TABLE IF EXISTS users;

CREATE TABLE users (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  name TEXT NOT NULL
);

INSERT INTO users (name) VALUES ('Alice');
INSERT INTO users (name) VALUES ('Bob');
INSERT INTO users (name) VALUES ('Charlie');

export interface Env {
  DB: D1Database;
}

export default {
  async fetch(request, env) {
    const result = await env.DB.prepare("SELECT * FROM users").all();
    return new Response(JSON.stringify(result.results), {
      headers: { "Content-Type": "application/json" },
    });
  }
};

$ curl http://localhost:5173/
[{"id":1,"name":"Alice"},{"id":2,"name":"Bob"},{"id":3,"name":"Charlie"}]

name: Deploy Worker
on:
  push:
    branches:
      - main
jobs:
  deploy:
    runs-on: ubuntu-latest
    timeout-minutes: 60
    steps:
      - uses: actions/checkout@v4
      - name: Install
        run: npm install
      - name: Build & Deploy Worker
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}