├── .dockerignore
├── .github
└── workflows
│ └── deploy.yml
├── .gitignore
├── .vscode
├── extensions.json
└── settings.json
├── Dockerfile
├── README.md
├── app
├── app.css
├── entry.server.tsx
├── root.tsx
├── routes.ts
├── routes
│ └── home.tsx
└── welcome
│ ├── logo-dark.svg
│ ├── logo-light.svg
│ └── welcome.tsx
├── deno.json
├── deno.lock
├── package.json
├── public
└── favicon.ico
├── react-router.config.ts
├── server.production.ts
└── vite.config.ts
/.dockerignore:
--------------------------------------------------------------------------------
1 | .react-router
2 | build
3 | node_modules
4 | README.md
5 |
--------------------------------------------------------------------------------
/.github/workflows/deploy.yml:
--------------------------------------------------------------------------------
1 | name: Deploy
2 | on:
3 | push:
4 | branches: main
5 | pull_request:
6 | branches: main
7 |
8 | jobs:
9 | deploy:
10 | name: Deploy
11 | runs-on: ubuntu-latest
12 |
13 | permissions:
14 | id-token: write # Needed for auth with Deno Deploy
15 | contents: read # Needed to clone the repository
16 |
17 | steps:
18 | - name: Clone repository
19 | uses: actions/checkout@v4
20 |
21 | - name: Install Deno
22 | uses: denoland/setup-deno@v2
23 | with:
24 | deno-version: v2.x
25 |
26 | - name: Install dependencies
27 | run: "deno install"
28 |
29 | - name: Build step
30 | run: "deno task build"
31 |
32 | - name: Upload to Deno Deploy
33 | uses: denoland/deployctl@v1
34 | with:
35 | project: "huge-badger-89"
36 | entrypoint: "server.production.ts"
37 | root: ""
38 | include: |
39 | deno.json
40 | deno.lock
41 | build
42 | package.json
43 | server.production.ts
44 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .env
2 | !.env.example
3 | .DS_Store
4 | .react-router
5 | build
6 | node_modules
7 | *.tsbuildinfo
8 |
--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | "recommendations": ["denoland.vscode-deno"]
3 | }
4 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "deno.enable": true,
3 | "deno.lint": true,
4 | "editor.defaultFormatter": "denoland.vscode-deno"
5 | }
6 |
--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
1 | FROM denoland/deno:2.1.4 AS build-env
2 | COPY . /app/
3 | WORKDIR /app
4 | RUN deno install
5 | RUN deno task build
6 | RUN deno compile -A --output ./server ./server.production.ts
7 |
8 | FROM gcr.io/distroless/cc:nonroot
9 | COPY --from=build-env /app/build/client/ /app/build/client/
10 | COPY --from=build-env /app/server /app/server
11 | WORKDIR /app
12 | CMD ["/app/server"]
13 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # NOTES
2 |
3 | This template has been tested with Deno v2.2.1+.
4 | [Live deployment here](https://huge-badger-89.deno.dev/) hosted on
5 | [Deno Deploy](https://deno.com/deploy).
6 |
7 | ## Using this template
8 |
9 | Run the following command:
10 |
11 | ```zsh
12 | deno init --npm react-router --no-install --template redabacha/react-router-deno-template
13 | ```
14 |
15 | And then run `deno install` in the created directory.
16 |
17 | ## Using JSR and HTTPS imports in `app/`
18 |
19 | Thanks to the [@deno/vite-plugin](https://github.com/denoland/deno-vite-plugin),
20 | it's possible to use packages from JSR and imports from HTTPS URLs (via the
21 | [deno.json `imports` field](https://docs.deno.com/runtime/fundamentals/modules/#managing-third-party-modules-and-libraries))
22 | within the `app/` directory which will get included in the server and/or browser
23 | bundles as needed.
24 |
25 | # Welcome to React Router!
26 |
27 | A modern, production-ready template for building full-stack React applications
28 | using React Router.
29 |
30 | ## Features
31 |
32 | - 🚀 Server-side rendering
33 | - ⚡️ Hot Module Replacement (HMR)
34 | - 📦 Asset bundling and optimization
35 | - 🔄 Data loading and mutations
36 | - 🔒 TypeScript by default
37 | - 🎉 TailwindCSS for styling
38 | - 📖 [React Router docs](https://reactrouter.com/)
39 |
40 | ## Getting Started
41 |
42 | ### Installation
43 |
44 | Install the dependencies:
45 |
46 | ```bash
47 | deno install
48 | ```
49 |
50 | ### Development
51 |
52 | Start the development server with HMR:
53 |
54 | ```bash
55 | deno task dev
56 | ```
57 |
58 | Your application will be available at `http://localhost:5173`.
59 |
60 | ## Building for Production
61 |
62 | Create a production build:
63 |
64 | ```bash
65 | deno task build
66 | ```
67 |
68 | ## Deployment
69 |
70 | ### Deno Deploy
71 |
72 | Deployment can be done using the
73 | [deployctl](https://github.com/denoland/deployctl) CLI:
74 |
75 | ```bash
76 | deployctl deploy --entrypoint ./server.production.ts
77 | ```
78 |
79 | ### Docker Deployment
80 |
81 | To build and run using Docker:
82 |
83 | ```bash
84 | docker build -t my-app .
85 |
86 | # Run the container
87 | docker run --init -p 8000:8000 my-app
88 | ```
89 |
90 | The containerized application can be deployed to any platform that supports
91 | Docker, including:
92 |
93 | - AWS ECS
94 | - Google Cloud Run
95 | - Azure Container Apps
96 | - Digital Ocean App Platform
97 | - Fly.io
98 | - Railway
99 |
100 | ### DIY Deployment
101 |
102 | If you're familiar with deploying Deno applications, the built-in app server is
103 | production-ready.
104 |
105 | Make sure to deploy the output of `deno task build`
106 |
107 | ```
108 | ├── package.json
109 | ├── deno.json
110 | ├── deno.lock
111 | ├── build/
112 | │ ├── client/ # Static assets
113 | │ └── server/ # Server-side code
114 | ├── server.production.ts # Entrypoint
115 | ```
116 |
117 | ## Styling
118 |
119 | This template comes with [Tailwind CSS](https://tailwindcss.com/) already
120 | configured for a simple default starting experience. You can use whatever CSS
121 | framework you prefer.
122 |
123 | ---
124 |
125 | Built with ❤️ using React Router.
126 |
--------------------------------------------------------------------------------
/app/app.css:
--------------------------------------------------------------------------------
1 | @import "tailwindcss";
2 |
3 | @theme {
4 | --font-sans:
5 | "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
6 | "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
7 | }
8 |
9 | html,
10 | body {
11 | @apply bg-white dark:bg-gray-950;
12 |
13 | @media (prefers-color-scheme: dark) {
14 | color-scheme: dark;
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/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 | // Reject all pending promises from handler functions after 10 seconds
7 | export const streamTimeout = 5_000;
8 |
9 | export default async function handleRequest(
10 | request: Request,
11 | responseStatusCode: number,
12 | responseHeaders: Headers,
13 | routerContext: EntryContext,
14 | _loadContext: AppLoadContext,
15 | ) {
16 | let shellRendered = false;
17 | const userAgent = request.headers.get("user-agent");
18 |
19 | const controller = new AbortController();
20 | setTimeout(() => {
21 | // Abort the rendering stream after the `streamTimeout` so it has time to
22 | // flush down the rejected boundaries
23 | controller.abort();
24 | }, streamTimeout + 1000);
25 |
26 | const body = await renderToReadableStream(
27 | ,
28 | {
29 | onError(error: unknown) {
30 | responseStatusCode = 500;
31 | // Log streaming rendering errors from inside the shell. Don't log
32 | // errors encountered during initial shell rendering since they'll
33 | // reject and get logged in handleDocumentRequest.
34 | if (shellRendered) {
35 | console.error(error);
36 | }
37 | },
38 | signal: controller.signal,
39 | },
40 | );
41 | shellRendered = true;
42 |
43 | // Ensure requests from bots and SPA Mode renders wait for all content to load before responding
44 | // https://react.dev/reference/react-dom/server/renderToReadableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation
45 | if ((userAgent && isbot(userAgent)) || routerContext.isSpaMode) {
46 | await body.allReady;
47 | }
48 |
49 | responseHeaders.set("Content-Type", "text/html");
50 | return new Response(body, {
51 | headers: responseHeaders,
52 | status: responseStatusCode,
53 | });
54 | }
55 |
--------------------------------------------------------------------------------
/app/root.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | isRouteErrorResponse,
3 | Links,
4 | Meta,
5 | Outlet,
6 | Scripts,
7 | ScrollRestoration,
8 | } from "react-router";
9 |
10 | import type { Route } from "./+types/root.ts";
11 | import "./app.css";
12 |
13 | export const links: Route.LinksFunction = () => [
14 | { rel: "preconnect", href: "https://fonts.googleapis.com" },
15 | {
16 | rel: "preconnect",
17 | href: "https://fonts.gstatic.com",
18 | crossOrigin: "anonymous",
19 | },
20 | {
21 | rel: "stylesheet",
22 | href:
23 | "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
24 | },
25 | ];
26 |
27 | export function Layout({ children }: { children: React.ReactNode }) {
28 | return (
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 | {children}
38 |
39 |
40 |
41 |
42 | );
43 | }
44 |
45 | export default function App() {
46 | return ;
47 | }
48 |
49 | export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
50 | let message = "Oops!";
51 | let details = "An unexpected error occurred.";
52 | let stack: string | undefined;
53 |
54 | if (isRouteErrorResponse(error)) {
55 | message = error.status === 404 ? "404" : "Error";
56 | details = error.status === 404
57 | ? "The requested page could not be found."
58 | : error.statusText || details;
59 | } else if (import.meta.env.DEV && error && error instanceof Error) {
60 | details = error.message;
61 | stack = error.stack;
62 | }
63 |
64 | return (
65 |
66 | {message}
67 | {details}
68 | {stack && (
69 |
70 | {stack}
71 |
72 | )}
73 |
74 | );
75 | }
76 |
--------------------------------------------------------------------------------
/app/routes.ts:
--------------------------------------------------------------------------------
1 | import { index, type RouteConfig } from "@react-router/dev/routes";
2 |
3 | export default [index("routes/home.tsx")] satisfies RouteConfig;
4 |
--------------------------------------------------------------------------------
/app/routes/home.tsx:
--------------------------------------------------------------------------------
1 | import { Welcome } from "~/welcome/welcome.tsx";
2 | import type { Route } from "./+types/home.ts";
3 |
4 | export function meta({}: Route.MetaArgs) {
5 | return [
6 | { title: "New React Router App" },
7 | { name: "description", content: "Welcome to React Router!" },
8 | ];
9 | }
10 |
11 | export function loader() {
12 | return {
13 | message: `Hello from Deno ${
14 | Deno.version.deno ? `v${Deno.version.deno}` : "Deploy"
15 | }`,
16 | };
17 | }
18 |
19 | export default function Home({ loaderData }: Route.ComponentProps) {
20 | return ;
21 | }
22 |
--------------------------------------------------------------------------------
/app/welcome/logo-dark.svg:
--------------------------------------------------------------------------------
1 |
24 |
--------------------------------------------------------------------------------
/app/welcome/logo-light.svg:
--------------------------------------------------------------------------------
1 |
24 |
--------------------------------------------------------------------------------
/app/welcome/welcome.tsx:
--------------------------------------------------------------------------------
1 | import logoDark from "./logo-dark.svg";
2 | import logoLight from "./logo-light.svg";
3 |
4 | export function Welcome({ message }: { message: string }) {
5 | return (
6 |
7 |
8 |
9 |
10 |
15 |
20 |
22 |
23 |
44 |
45 |