├── .gitignore
├── .prettierignore
├── README.md
├── app
├── entry.client.tsx
├── entry.server.tsx
├── root.tsx
├── routes.ts
├── routes
│ └── _index.tsx
└── tailwind.css
├── biome.json
├── load-context.ts
├── package.json
├── pnpm-lock.yaml
├── postcss.config.js
├── prettier.config.js
├── public
├── favicon.ico
├── logo-dark.svg
└── logo-light.svg
├── server.ts
├── tailwind.config.ts
├── tsconfig.json
├── vite.config.ts
├── worker-configuration.d.ts
└── wrangler.toml
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
3 | /.wrangler
4 | /build
5 | .env
6 | .dev.vars
7 |
--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | pnpm-lock.yaml
2 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Welcome to React Router v7 + Cloudflare Workers
2 |
3 | - 📖 [React Router v7 docs](https://reactrouter.com/dev/guides)
4 |
5 | ## Development
6 |
7 | Run the dev server:
8 |
9 | ```sh
10 | pnpm run dev
11 | ```
12 |
13 | To run Wrangler:
14 |
15 | ```sh
16 | pnpm run build
17 | pnpm start
18 | ```
19 |
20 | ## Typegen
21 |
22 | Generate types for your Cloudflare bindings in `wrangler.toml`:
23 |
24 | ```sh
25 | pnpm run typegen
26 | ```
27 |
28 | You will need to rerun typegen whenever you make changes to `wrangler.toml`.
29 |
30 | ## Deployment
31 |
32 | If you don't already have an account, then [create a cloudflare account here](https://dash.cloudflare.com/sign-up) and after verifying your email address with Cloudflare, go to your dashboard and set up your free custom Cloudflare Workers subdomain.
33 |
34 | Once that's done, you should be able to deploy your app:
35 |
36 | ```sh
37 | pnpm run deploy
38 | ```
39 |
40 | ## Styling
41 |
42 | This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever css framework you prefer. See the [Vite docs on css](https://vitejs.dev/guide/features.html#css) for more information.
43 |
--------------------------------------------------------------------------------
/app/entry.client.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * By default, Remix will handle hydrating your app on the client for you.
3 | * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
4 | * For more information, see https://remix.run/file-conventions/entry.client
5 | */
6 |
7 | import { startTransition, StrictMode } from 'react'
8 | import { hydrateRoot } from 'react-dom/client'
9 | import { HydratedRouter } from 'react-router/dom'
10 |
11 | startTransition(() => {
12 | hydrateRoot(
13 | document,
14 |
15 |
16 | ,
17 | )
18 | })
19 |
--------------------------------------------------------------------------------
/app/entry.server.tsx:
--------------------------------------------------------------------------------
1 | import { isbot } from 'isbot'
2 | import { renderToReadableStream } from 'react-dom/server'
3 | import type { AppLoadContext, EntryContext } from 'react-router'
4 | import { ServerRouter } from 'react-router'
5 |
6 | export default async function handleRequest(
7 | request: Request,
8 | responseStatusCode: number,
9 | responseHeaders: Headers,
10 | remixContext: EntryContext,
11 | // This is ignored so we can keep it in the template for visibility. Feel
12 | // free to delete this parameter in your app if you're not using it!
13 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
14 | loadContext: AppLoadContext,
15 | ) {
16 | let statusCode = responseStatusCode
17 | const body = await renderToReadableStream(
18 | ,
19 | {
20 | signal: request.signal,
21 | onError(error: unknown) {
22 | // Log streaming rendering errors from inside the shell
23 | console.error(error)
24 | statusCode = 500
25 | },
26 | },
27 | )
28 |
29 | if (isbot(request.headers.get('user-agent') || '')) {
30 | await body.allReady
31 | }
32 |
33 | responseHeaders.set('Content-Type', 'text/html')
34 | return new Response(body, {
35 | headers: responseHeaders,
36 | status: statusCode,
37 | })
38 | }
39 |
--------------------------------------------------------------------------------
/app/root.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Links,
3 | Meta,
4 | Outlet,
5 | Scripts,
6 | ScrollRestoration,
7 | type LinksFunction,
8 | } from 'react-router'
9 |
10 | import styles from './tailwind.css?url'
11 |
12 | export const links: LinksFunction = () => [
13 | { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
14 | {
15 | rel: 'preconnect',
16 | href: 'https://fonts.gstatic.com',
17 | crossOrigin: 'anonymous',
18 | },
19 | { rel: 'stylesheet', href: styles },
20 | {
21 | rel: 'stylesheet',
22 | href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
23 | },
24 | ]
25 |
26 | export function Layout({ children }: { children: React.ReactNode }) {
27 | return (
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 | {children}
37 |
38 |
39 |
40 |
41 | )
42 | }
43 |
44 | export default function App() {
45 | return
46 | }
47 |
--------------------------------------------------------------------------------
/app/routes.ts:
--------------------------------------------------------------------------------
1 | import type { RouteConfig } from '@react-router/dev/routes'
2 | import { flatRoutes } from '@react-router/fs-routes'
3 |
4 | export const routes: RouteConfig = flatRoutes()
5 |
--------------------------------------------------------------------------------
/app/routes/_index.tsx:
--------------------------------------------------------------------------------
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: 'Welcome to React Router!' },
7 | ]
8 | }
9 |
10 | export default function Index() {
11 | return (
12 |
13 |
14 |
15 |
16 | Welcome to React Router
17 |
18 |
19 |
24 |
29 |
31 |
51 |
52 |