Skip to content

Commit 280d65c

Browse files
Add Cloudflare package (#11801)
1 parent c4c48af commit 280d65c

30 files changed

+1451
-22
lines changed

.changeset/calm-frogs-tie.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@react-router/cloudflare": major
3+
---
4+
5+
For Remix consumers migrating to React Router, all exports from `@remix-run/cloudflare-pages` are now provided for React Router consumers in the `@react-router/cloudflare` package. There is no longer a separate package for Cloudflare Pages.

.changeset/fair-beans-design.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@react-router/cloudflare": minor
3+
---
4+
5+
The `@remix-run/cloudflare-workers` package has been deprecated. Remix consumers migrating to React Router should use the `@react-router/cloudflare` package directly. For guidance on how to use `@react-router/cloudflare` within a Cloudflare Workers context, refer to the Cloudflare Workers template.
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
node_modules
2+
3+
/build
4+
.env
Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import type { AppLoadContext, EntryContext } from "react-router";
2+
import { ServerRouter } from "react-router";
3+
import { isbot } from "isbot";
4+
import { renderToReadableStream } from "react-dom/server";
5+
6+
export default async function handleRequest(
7+
request: Request,
8+
responseStatusCode: number,
9+
responseHeaders: Headers,
10+
routerContext: EntryContext,
11+
loadContext: AppLoadContext
12+
) {
13+
const body = await renderToReadableStream(
14+
<ServerRouter context={routerContext} url={request.url} />,
15+
{
16+
signal: request.signal,
17+
onError(error: unknown) {
18+
// Log streaming rendering errors from inside the shell
19+
console.error(error);
20+
responseStatusCode = 500;
21+
},
22+
}
23+
);
24+
25+
const userAgent = request.headers.get("user-agent");
26+
if (userAgent && isbot(userAgent)) {
27+
await body.allReady;
28+
}
29+
30+
responseHeaders.set("Content-Type", "text/html");
31+
return new Response(body, {
32+
headers: responseHeaders,
33+
status: responseStatusCode,
34+
});
35+
}
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
2+
3+
export function Layout({ children }: { children: React.ReactNode }) {
4+
return (
5+
<html lang="en">
6+
<head>
7+
<meta charSet="utf-8" />
8+
<meta name="viewport" content="width=device-width, initial-scale=1" />
9+
<Meta />
10+
<Links />
11+
</head>
12+
<body>
13+
{children}
14+
<ScrollRestoration />
15+
<Scripts />
16+
</body>
17+
</html>
18+
);
19+
}
20+
21+
export default function App() {
22+
return <Outlet />;
23+
}
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import type { MetaFunction } from "react-router";
2+
3+
export const meta: MetaFunction = () => {
4+
return [
5+
{ title: "New React Router App" },
6+
{ name: "description", content: "React Router + Cloudflare" },
7+
];
8+
};
9+
10+
export default function Index() {
11+
return (
12+
<div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
13+
<h1>Welcome to React Router + Cloudflare</h1>
14+
</div>
15+
);
16+
}
Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "integration-vite-cloudflare-template",
3+
"version": "0.0.0",
4+
"private": true,
5+
"sideEffects": false,
6+
"type": "module",
7+
"scripts": {
8+
"dev": "react-router dev",
9+
"build": "react-router build",
10+
"start": "wrangler pages dev ./build/client",
11+
"tsc": "tsc"
12+
},
13+
"dependencies": {
14+
"@react-router/cloudflare": "workspace:*",
15+
"isbot": "^4.1.0",
16+
"miniflare": "^3.20231030.4",
17+
"react": "^18.2.0",
18+
"react-dom": "^18.2.0",
19+
"react-router": "workspace:*"
20+
},
21+
"devDependencies": {
22+
"@cloudflare/workers-types": "^4.20230518.0",
23+
"@react-router/dev": "workspace:*",
24+
"@types/react": "^18.2.20",
25+
"@types/react-dom": "^18.2.7",
26+
"typescript": "^5.1.6",
27+
"vite": "^5.1.0",
28+
"wrangler": "^3.28.2"
29+
},
30+
"engines": {
31+
"node": ">=18.0.0"
32+
}
33+
}
Binary file not shown.
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"include": ["env.d.ts", "**/*.ts", "**/*.tsx"],
3+
"compilerOptions": {
4+
"lib": ["DOM", "DOM.Iterable", "ES2022"],
5+
"types": ["vite/client"],
6+
"isolatedModules": true,
7+
"esModuleInterop": true,
8+
"jsx": "react-jsx",
9+
"module": "ESNext",
10+
"moduleResolution": "Bundler",
11+
"resolveJsonModule": true,
12+
"target": "ES2022",
13+
"strict": true,
14+
"allowJs": true,
15+
"skipLibCheck": true,
16+
"forceConsistentCasingInFileNames": true,
17+
"baseUrl": ".",
18+
"noEmit": true
19+
}
20+
}
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import {
2+
vitePlugin as reactRouter,
3+
cloudflareDevProxyVitePlugin as reactRouterCloudflareDevProxy,
4+
} from "@react-router/dev";
5+
import { defineConfig } from "vite";
6+
7+
export default defineConfig({
8+
plugins: [reactRouterCloudflareDevProxy(), reactRouter()],
9+
});

0 commit comments

Comments
 (0)