) => MiddlewareHandler;
10 | }
11 |
--------------------------------------------------------------------------------
/examples/node/with-sentry/app/server/instrument.server.ts:
--------------------------------------------------------------------------------
1 | import { getSecret } from "~/utils/.server/secret";
2 |
3 | // Sentry example
4 | if (process.env.NODE_ENV === "production") {
5 | console.log("Sentry is enabled");
6 | console.log("Doing some Sentry stuff before the server starts");
7 | console.log("Using some secret:", getSecret());
8 | }
9 |
--------------------------------------------------------------------------------
/examples/cloudflare/d1-drizzle/wrangler.toml:
--------------------------------------------------------------------------------
1 | workers_dev = true
2 | name = "my-worker"
3 | compatibility_date = "2024-11-18"
4 | main = "./build/server/index.js"
5 | assets = { directory = "./build/client/" }
6 |
7 | [[d1_databases]]
8 | binding = "DB"
9 | database_name = "your_database_name"
10 | database_id = "your_database_id"
11 | migrations_dir = "drizzle"
12 |
--------------------------------------------------------------------------------
/examples/node/simple/app/entry.client.tsx:
--------------------------------------------------------------------------------
1 | import { StrictMode, startTransition } from "react";
2 | import { hydrateRoot } from "react-dom/client";
3 | import { HydratedRouter } from "react-router/dom";
4 |
5 | startTransition(() => {
6 | hydrateRoot(
7 | document,
8 |
9 |
10 |
11 | );
12 | });
13 |
--------------------------------------------------------------------------------
/examples/aws-lambda/simple/app/entry.client.tsx:
--------------------------------------------------------------------------------
1 | import { StrictMode, startTransition } from "react";
2 | import { hydrateRoot } from "react-dom/client";
3 | import { HydratedRouter } from "react-router/dom";
4 |
5 | startTransition(() => {
6 | hydrateRoot(
7 | document,
8 |
9 |
10 |
11 | );
12 | });
13 |
--------------------------------------------------------------------------------
/examples/node/custom-mount/app/entry.client.tsx:
--------------------------------------------------------------------------------
1 | import { StrictMode, startTransition } from "react";
2 | import { hydrateRoot } from "react-dom/client";
3 | import { HydratedRouter } from "react-router/dom";
4 |
5 | startTransition(() => {
6 | hydrateRoot(
7 | document,
8 |
9 |
10 |
11 | );
12 | });
13 |
--------------------------------------------------------------------------------
/examples/node/virtual/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { reactRouterHonoServer } from "react-router-hono-server/dev";
3 | import { defineConfig } from "vite";
4 | import tsconfigPaths from "vite-tsconfig-paths";
5 |
6 | export default defineConfig({
7 | plugins: [reactRouterHonoServer(), reactRouter(), tsconfigPaths()],
8 | });
9 |
--------------------------------------------------------------------------------
/examples/bun/simple-bun-runtime/app/entry.client.tsx:
--------------------------------------------------------------------------------
1 | import { StrictMode, startTransition } from "react";
2 | import { hydrateRoot } from "react-dom/client";
3 | import { HydratedRouter } from "react-router/dom";
4 |
5 | startTransition(() => {
6 | hydrateRoot(
7 | document,
8 |
9 |
10 |
11 | );
12 | });
13 |
--------------------------------------------------------------------------------
/examples/node/custom-https/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { reactRouterHonoServer } from "react-router-hono-server/dev";
3 | import { defineConfig } from "vite";
4 | import tsconfigPaths from "vite-tsconfig-paths";
5 |
6 | export default defineConfig({
7 | plugins: [reactRouterHonoServer(), reactRouter(), tsconfigPaths()],
8 | });
9 |
--------------------------------------------------------------------------------
/examples/node/protected-routes/app/entry.client.tsx:
--------------------------------------------------------------------------------
1 | import { StrictMode, startTransition } from "react";
2 | import { hydrateRoot } from "react-dom/client";
3 | import { HydratedRouter } from "react-router/dom";
4 |
5 | startTransition(() => {
6 | hydrateRoot(
7 | document,
8 |
9 |
10 |
11 | );
12 | });
13 |
--------------------------------------------------------------------------------
/examples/node/simple-future/app/entry.client.tsx:
--------------------------------------------------------------------------------
1 | import { StrictMode, startTransition } from "react";
2 | import { hydrateRoot } from "react-dom/client";
3 | import { HydratedRouter } from "react-router/dom";
4 |
5 | startTransition(() => {
6 | hydrateRoot(
7 | document,
8 |
9 |
10 |
11 | );
12 | });
13 |
--------------------------------------------------------------------------------
/examples/node/socketio/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { reactRouterHonoServer } from "react-router-hono-server/dev";
3 | import { defineConfig } from "vite";
4 | import tsconfigPaths from "vite-tsconfig-paths";
5 |
6 | export default defineConfig({
7 | plugins: [reactRouterHonoServer(), reactRouter(), tsconfigPaths()],
8 | });
9 |
--------------------------------------------------------------------------------
/examples/node/websocket/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { reactRouterHonoServer } from "react-router-hono-server/dev";
3 | import { defineConfig } from "vite";
4 | import tsconfigPaths from "vite-tsconfig-paths";
5 |
6 | export default defineConfig({
7 | plugins: [reactRouterHonoServer(), reactRouter(), tsconfigPaths()],
8 | });
9 |
--------------------------------------------------------------------------------
/examples/node/with-custom-403/app/entry.client.tsx:
--------------------------------------------------------------------------------
1 | import { StrictMode, startTransition } from "react";
2 | import { hydrateRoot } from "react-dom/client";
3 | import { HydratedRouter } from "react-router/dom";
4 |
5 | startTransition(() => {
6 | hydrateRoot(
7 | document,
8 |
9 |
10 |
11 | );
12 | });
13 |
--------------------------------------------------------------------------------
/examples/node/with-sentry/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { reactRouterHonoServer } from "react-router-hono-server/dev";
3 | import { defineConfig } from "vite";
4 | import tsconfigPaths from "vite-tsconfig-paths";
5 |
6 | export default defineConfig({
7 | plugins: [reactRouterHonoServer(), reactRouter(), tsconfigPaths()],
8 | });
9 |
--------------------------------------------------------------------------------
/examples/node/with-vite-env/app/entry.client.tsx:
--------------------------------------------------------------------------------
1 | import { StrictMode, startTransition } from "react";
2 | import { hydrateRoot } from "react-dom/client";
3 | import { HydratedRouter } from "react-router/dom";
4 |
5 | startTransition(() => {
6 | hydrateRoot(
7 | document,
8 |
9 |
10 |
11 | );
12 | });
13 |
--------------------------------------------------------------------------------
/examples/node/custom-app-dir/src/app/entry.client.tsx:
--------------------------------------------------------------------------------
1 | import { StrictMode, startTransition } from "react";
2 | import { hydrateRoot } from "react-dom/client";
3 | import { HydratedRouter } from "react-router/dom";
4 |
5 | startTransition(() => {
6 | hydrateRoot(
7 | document,
8 |
9 |
10 |
11 | );
12 | });
13 |
--------------------------------------------------------------------------------
/examples/node/protected-routes/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { reactRouterHonoServer } from "react-router-hono-server/dev";
3 | import { defineConfig } from "vite";
4 | import tsconfigPaths from "vite-tsconfig-paths";
5 |
6 | export default defineConfig({
7 | plugins: [reactRouter(), reactRouterHonoServer(), tsconfigPaths()],
8 | });
9 |
--------------------------------------------------------------------------------
/examples/node/simple-future/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { reactRouterHonoServer } from "react-router-hono-server/dev";
3 | import { defineConfig } from "vite";
4 | import tsconfigPaths from "vite-tsconfig-paths";
5 |
6 | export default defineConfig({
7 | plugins: [reactRouterHonoServer(), reactRouter(), tsconfigPaths()],
8 | });
9 |
--------------------------------------------------------------------------------
/examples/node/simple/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { reactRouterHonoServer } from "react-router-hono-server/dev";
3 | import { defineConfig } from "vite";
4 | import tsconfigPaths from "vite-tsconfig-paths";
5 |
6 | export default defineConfig(() => ({
7 | plugins: [reactRouterHonoServer(), reactRouter(), tsconfigPaths()],
8 | }));
9 |
--------------------------------------------------------------------------------
/examples/node/with-custom-403/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { reactRouterHonoServer } from "react-router-hono-server/dev";
3 | import { defineConfig } from "vite";
4 | import tsconfigPaths from "vite-tsconfig-paths";
5 |
6 | export default defineConfig({
7 | plugins: [reactRouterHonoServer(), reactRouter(), tsconfigPaths()],
8 | });
9 |
--------------------------------------------------------------------------------
/examples/node/with-pre-render/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { reactRouterHonoServer } from "react-router-hono-server/dev";
3 | import { defineConfig } from "vite";
4 | import tsconfigPaths from "vite-tsconfig-paths";
5 |
6 | export default defineConfig({
7 | plugins: [reactRouterHonoServer(), reactRouter(), tsconfigPaths()],
8 | });
9 |
--------------------------------------------------------------------------------
/examples/node/with-vite-env/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { reactRouterHonoServer } from "react-router-hono-server/dev";
3 | import { defineConfig } from "vite";
4 | import tsconfigPaths from "vite-tsconfig-paths";
5 |
6 | export default defineConfig({
7 | plugins: [reactRouterHonoServer(), reactRouter(), tsconfigPaths()],
8 | });
9 |
--------------------------------------------------------------------------------
/examples/node/simple-future-middleware/app/entry.client.tsx:
--------------------------------------------------------------------------------
1 | import { StrictMode, startTransition } from "react";
2 | import { hydrateRoot } from "react-dom/client";
3 | import { HydratedRouter } from "react-router/dom";
4 |
5 | startTransition(() => {
6 | hydrateRoot(
7 | document,
8 |
9 |
10 |
11 | );
12 | });
13 |
--------------------------------------------------------------------------------
/examples/node/with-custom-403/app/routes/403.tsx:
--------------------------------------------------------------------------------
1 | import { Route } from "./+types/403";
2 |
3 | export async function loader() {
4 | return null;
5 | }
6 |
7 | export default function ProjectRoute({ loaderData }: Route.ComponentProps) {
8 | return (
9 |
10 | 403
11 | Access to this page is restricted.
12 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/examples/bun/websocket/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { reactRouterHonoServer } from "react-router-hono-server/dev";
3 | import { defineConfig } from "vite";
4 | import tsconfigPaths from "vite-tsconfig-paths";
5 |
6 | export default defineConfig({
7 | plugins: [reactRouterHonoServer({ runtime: "bun" }), reactRouter(), tsconfigPaths()],
8 | });
9 |
--------------------------------------------------------------------------------
/examples/node/simple-future-middleware/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { reactRouterHonoServer } from "react-router-hono-server/dev";
3 | import { defineConfig } from "vite";
4 | import tsconfigPaths from "vite-tsconfig-paths";
5 |
6 | export default defineConfig({
7 | plugins: [reactRouterHonoServer(), reactRouter(), tsconfigPaths()],
8 | });
9 |
--------------------------------------------------------------------------------
/examples/bun/simple-bun-runtime/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { reactRouterHonoServer } from "react-router-hono-server/dev";
3 | import { defineConfig } from "vite";
4 | import tsconfigPaths from "vite-tsconfig-paths";
5 |
6 | export default defineConfig({
7 | plugins: [reactRouterHonoServer({ runtime: "bun" }), reactRouter(), tsconfigPaths()],
8 | });
9 |
--------------------------------------------------------------------------------
/examples/node/simple-future-middleware/react-router.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from "@react-router/dev/config";
2 |
3 | declare module "react-router" {
4 | interface Future {
5 | v8_middleware: true; // 👈 Enable middleware types
6 | }
7 | }
8 |
9 | export default {
10 | future: {
11 | unstable_splitRouteModules: true,
12 | v8_middleware: true,
13 | },
14 | } satisfies Config;
15 |
--------------------------------------------------------------------------------
/examples/node/simple-future/app/server.ts:
--------------------------------------------------------------------------------
1 | import { createHonoServer } from "react-router-hono-server/node";
2 |
3 | console.log("loading server");
4 |
5 | export default await createHonoServer({
6 | getLoadContext(c, { mode, build }) {
7 | const isProductionMode = mode === "production";
8 | return {
9 | appVersion: isProductionMode ? build.assets.version : "dev",
10 | };
11 | },
12 | });
13 |
--------------------------------------------------------------------------------
/examples/node/with-vite-env/app/server.ts:
--------------------------------------------------------------------------------
1 | import { createHonoServer } from "react-router-hono-server/node";
2 |
3 | console.log("loading server");
4 |
5 | export default await createHonoServer({
6 | getLoadContext(c, { mode, build }) {
7 | const isProductionMode = mode === "production";
8 | return {
9 | appVersion: isProductionMode ? build.assets.version : "dev",
10 | };
11 | },
12 | });
13 |
--------------------------------------------------------------------------------
/examples/node/custom-mount/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { reactRouterHonoServer } from "react-router-hono-server/dev";
3 | import { defineConfig } from "vite";
4 | import tsconfigPaths from "vite-tsconfig-paths";
5 |
6 | export default defineConfig({
7 | plugins: [
8 | reactRouterHonoServer(),
9 | //
10 | reactRouter(),
11 | tsconfigPaths(),
12 | ],
13 | });
14 |
--------------------------------------------------------------------------------
/examples/node/custom-build/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { reactRouterHonoServer } from "react-router-hono-server/dev";
3 | import { defineConfig } from "vite";
4 | import tsconfigPaths from "vite-tsconfig-paths";
5 |
6 | export default defineConfig({
7 | build: {
8 | assetsDir: `file-assets`,
9 | },
10 | plugins: [reactRouterHonoServer(), reactRouter(), tsconfigPaths()],
11 | });
12 |
--------------------------------------------------------------------------------
/Dockerfile.bun:
--------------------------------------------------------------------------------
1 | # use the official Bun image
2 | # see all versions at https://hub.docker.com/r/oven/bun/tags
3 | FROM oven/bun:1 AS base
4 | WORKDIR /usr/src/app
5 |
6 | COPY . .
7 |
8 | # [optional] tests & build
9 | ENV NODE_ENV=production
10 |
11 | # run the app
12 | USER bun
13 | EXPOSE 3000/tcp
14 | EXPOSE 3000/udp
15 | ENV HOST=0.0.0.0
16 | WORKDIR /usr/src/app/examples/bun/websocket
17 | ENTRYPOINT [ "bun", "run", "build/server/index.js" ]
--------------------------------------------------------------------------------
/src/types/env.d.ts:
--------------------------------------------------------------------------------
1 | interface ReactRouterHonoServerEnv {
2 | readonly REACT_ROUTER_HONO_SERVER_BUILD_DIRECTORY: string;
3 | readonly REACT_ROUTER_HONO_SERVER_ASSETS_DIR: string;
4 | readonly REACT_ROUTER_HONO_SERVER_RUNTIME: string;
5 | readonly REACT_ROUTER_HONO_SERVER_BASENAME: string;
6 | }
7 |
8 | interface ImportMetaEnv extends ReactRouterHonoServerEnv {}
9 |
10 | interface ImportMeta {
11 | readonly env: ImportMetaEnv;
12 | }
13 |
--------------------------------------------------------------------------------
/examples/bun/simple/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { reactRouterHonoServer } from "react-router-hono-server/dev";
3 | import { defineConfig } from "vite";
4 | import tsconfigPaths from "vite-tsconfig-paths";
5 |
6 | export default defineConfig({
7 | plugins: [
8 | reactRouterHonoServer({
9 | runtime: "bun",
10 | }),
11 | reactRouter(),
12 | tsconfigPaths(),
13 | ],
14 | });
15 |
--------------------------------------------------------------------------------
/examples/bun/custom-mount/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { reactRouterHonoServer } from "react-router-hono-server/dev";
3 | import { defineConfig } from "vite";
4 | import tsconfigPaths from "vite-tsconfig-paths";
5 |
6 | export default defineConfig({
7 | plugins: [
8 | reactRouterHonoServer({
9 | runtime: "bun",
10 | }),
11 | reactRouter(),
12 | tsconfigPaths(),
13 | ],
14 | });
15 |
--------------------------------------------------------------------------------
/examples/bun/with-pre-render/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { reactRouterHonoServer } from "react-router-hono-server/dev";
3 | import { defineConfig } from "vite";
4 | import tsconfigPaths from "vite-tsconfig-paths";
5 |
6 | export default defineConfig({
7 | plugins: [
8 | reactRouterHonoServer({
9 | runtime: "bun",
10 | }),
11 | reactRouter(),
12 | tsconfigPaths(),
13 | ],
14 | });
15 |
--------------------------------------------------------------------------------
/examples/node/custom-build/app/server/index.ts:
--------------------------------------------------------------------------------
1 | import { createHonoServer } from "react-router-hono-server/node";
2 | import { exampleMiddleware } from "./middleware";
3 |
4 | console.log("loading server");
5 |
6 | export default await createHonoServer({
7 | configure(server) {
8 | server.use("*", exampleMiddleware());
9 | },
10 | listeningListener(info) {
11 | console.log(`Server is listening on http://localhost:${info.port}`);
12 | },
13 | });
14 |
--------------------------------------------------------------------------------
/examples/cloudflare/d1-drizzle/drizzle.config.ts:
--------------------------------------------------------------------------------
1 | import "dotenv/config";
2 | import { defineConfig } from "drizzle-kit";
3 |
4 | export default defineConfig({
5 | out: "./drizzle",
6 | schema: "./app/database/schema.ts",
7 | dialect: "sqlite",
8 | driver: "d1-http",
9 | dbCredentials: {
10 | token: process.env.CLOUDFLARE_TOKEN!,
11 | accountId: process.env.CLOUDFLARE_ACCOUNT_ID!,
12 | databaseId: process.env.CLOUDFLARE_DATABASE_ID!,
13 | },
14 | });
15 |
--------------------------------------------------------------------------------
/examples/cloudflare/queue/wrangler.toml:
--------------------------------------------------------------------------------
1 | workers_dev = true
2 | name = "my-worker"
3 | compatibility_date = "2024-11-18"
4 | main = "./build/server/index.js"
5 | assets = { directory = "./build/client/" }
6 |
7 | [[queues.producers]]
8 | queue = "my-queue"
9 | binding = "ERROR_QUEUE"
10 |
11 | [[queues.consumers]]
12 | queue = "my-queue"
13 | max_batch_size = 100
14 | max_batch_timeout = 30
15 |
16 | [[r2_buckets]]
17 | bucket_name = "my-bucket"
18 | binding = "ERROR_BUCKET"
--------------------------------------------------------------------------------
/examples/node/custom-app-dir/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { reactRouterHonoServer } from "react-router-hono-server/dev";
3 | import { defineConfig } from "vite";
4 | import tsconfigPaths from "vite-tsconfig-paths";
5 |
6 | export default defineConfig({
7 | plugins: [
8 | reactRouterHonoServer({
9 | serverEntryPoint: "src/server/index.ts",
10 | }),
11 | reactRouter(),
12 | tsconfigPaths(),
13 | ],
14 | });
15 |
--------------------------------------------------------------------------------
/examples/node/simple/app/routes/lazy.tsx:
--------------------------------------------------------------------------------
1 | import { Suspense, lazy } from "react";
2 |
3 | const LazyComponent = lazy(() => import("../components/lazy").then((mod) => ({ default: mod.LazyComponent })));
4 |
5 | export default function View() {
6 | return (
7 |
8 |
Route with lazy imported component
9 | Loading...}>
10 |
11 |
12 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/examples/aws-lambda/simple/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { reactRouterHonoServer } from "react-router-hono-server/dev";
3 | import { defineConfig } from "vite";
4 | import tsconfigPaths from "vite-tsconfig-paths";
5 |
6 | export default defineConfig({
7 | plugins: [
8 | reactRouterHonoServer({
9 | runtime: "aws",
10 | dev: {
11 | export: "handler",
12 | },
13 | }),
14 | reactRouter(),
15 | tsconfigPaths(),
16 | ],
17 | });
18 |
--------------------------------------------------------------------------------
/vitest.config.ts:
--------------------------------------------------------------------------------
1 | ///
2 | import { defineConfig } from "vitest/config";
3 |
4 | export default defineConfig({
5 | test: {
6 | setupFiles: [],
7 | environment: "node",
8 | globals: true,
9 |
10 | coverage: {
11 | all: false,
12 | provider: "v8",
13 | reporter: ["json-summary", "html"],
14 | thresholds: {
15 | statements: 80,
16 | branches: 80,
17 | functions: 80,
18 | lines: 80,
19 | },
20 | },
21 | },
22 | });
23 |
--------------------------------------------------------------------------------
/examples/bun/simple/public/images/database.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
18 |
--------------------------------------------------------------------------------
/examples/bun/websocket/public/images/database.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
18 |
--------------------------------------------------------------------------------
/examples/node/simple/public/images/database.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
18 |
--------------------------------------------------------------------------------
/examples/node/socketio/public/images/database.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
18 |
--------------------------------------------------------------------------------
/examples/node/virtual/public/images/database.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
18 |
--------------------------------------------------------------------------------
/examples/node/websocket/public/images/database.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
18 |
--------------------------------------------------------------------------------
/examples/aws-lambda/simple/public/images/database.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
18 |
--------------------------------------------------------------------------------
/examples/bun/custom-mount/public/images/database.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
18 |
--------------------------------------------------------------------------------
/examples/bun/with-pre-render/public/images/database.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
18 |
--------------------------------------------------------------------------------
/examples/cloudflare/queue/public/images/database.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
18 |
--------------------------------------------------------------------------------
/examples/cloudflare/simple/public/images/database.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
18 |
--------------------------------------------------------------------------------
/examples/node/custom-app-dir/public/images/database.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
18 |
--------------------------------------------------------------------------------
/examples/node/custom-app-dir/src/server/index.ts:
--------------------------------------------------------------------------------
1 | import { createHonoServer } from "react-router-hono-server/node";
2 | import { someExternalHelper } from "./lib/captcha/helper";
3 |
4 | console.log("loading server");
5 |
6 | export default await createHonoServer({
7 | getLoadContext(c, { mode, build }) {
8 | console.log("from helper", someExternalHelper());
9 | const isProductionMode = mode === "production";
10 | return {
11 | appVersion: isProductionMode ? build.assets.version : "dev",
12 | };
13 | },
14 | });
15 |
--------------------------------------------------------------------------------
/examples/node/custom-build/public/images/database.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
18 |
--------------------------------------------------------------------------------
/examples/node/custom-https/public/images/database.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
18 |
--------------------------------------------------------------------------------
/examples/node/custom-mount/public/images/database.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
18 |
--------------------------------------------------------------------------------
/examples/node/simple-future/public/images/database.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
18 |
--------------------------------------------------------------------------------
/examples/node/with-sentry/public/images/database.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
18 |
--------------------------------------------------------------------------------
/examples/node/with-vite-env/public/images/database.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
18 |
--------------------------------------------------------------------------------
/examples/bun/simple-bun-runtime/public/images/database.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
18 |
--------------------------------------------------------------------------------
/examples/cloudflare/custom-mount/public/images/database.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
18 |
--------------------------------------------------------------------------------
/examples/cloudflare/d1-drizzle/public/images/database.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
18 |
--------------------------------------------------------------------------------
/examples/cloudflare/simple-19/public/images/database.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
18 |
--------------------------------------------------------------------------------
/examples/cloudflare/websocket/public/images/database.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
18 |
--------------------------------------------------------------------------------
/examples/node/protected-routes/public/images/database.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
18 |
--------------------------------------------------------------------------------
/examples/node/with-custom-403/public/images/database.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
18 |
--------------------------------------------------------------------------------
/examples/node/with-pre-render/public/images/database.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
18 |
--------------------------------------------------------------------------------
/examples/node/with-sentry/app/server/index.ts:
--------------------------------------------------------------------------------
1 | // import the Sentry instrumentation file before anything else.
2 | // It is important to import it as .js for this to work, even if the file is .ts
3 | import "./instrument.server.js";
4 |
5 | import { createHonoServer } from "react-router-hono-server/node";
6 | import { exampleMiddleware } from "./middleware.js";
7 |
8 | console.log("loading server");
9 |
10 | export default await createHonoServer({
11 | configure(server) {
12 | server.use("*", exampleMiddleware());
13 | },
14 | });
15 |
--------------------------------------------------------------------------------
/examples/cloudflare/with-pre-render/public/images/database.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
18 |
--------------------------------------------------------------------------------
/examples/node/simple-future-middleware/public/images/database.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
18 |
--------------------------------------------------------------------------------
/examples/cloudflare/queue/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { cloudflareDevProxy } from "@react-router/dev/vite/cloudflare";
3 | import { reactRouterHonoServer } from "react-router-hono-server/dev";
4 | import { defineConfig } from "vite";
5 | import tsconfigPaths from "vite-tsconfig-paths";
6 |
7 | export default defineConfig({
8 | plugins: [
9 | cloudflareDevProxy(),
10 | reactRouterHonoServer({
11 | runtime: "cloudflare",
12 | }),
13 | reactRouter(),
14 | tsconfigPaths(),
15 | ],
16 | });
17 |
--------------------------------------------------------------------------------
/examples/cloudflare/simple/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { cloudflareDevProxy } from "@react-router/dev/vite/cloudflare";
3 | import { reactRouterHonoServer } from "react-router-hono-server/dev";
4 | import { defineConfig } from "vite";
5 | import tsconfigPaths from "vite-tsconfig-paths";
6 |
7 | export default defineConfig({
8 | plugins: [
9 | cloudflareDevProxy(),
10 | reactRouterHonoServer({
11 | runtime: "cloudflare",
12 | }),
13 | reactRouter(),
14 | tsconfigPaths(),
15 | ],
16 | });
17 |
--------------------------------------------------------------------------------
/examples/cloudflare/d1-drizzle/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { cloudflareDevProxy } from "@react-router/dev/vite/cloudflare";
3 | import { reactRouterHonoServer } from "react-router-hono-server/dev";
4 | import { defineConfig } from "vite";
5 | import tsconfigPaths from "vite-tsconfig-paths";
6 |
7 | export default defineConfig({
8 | plugins: [
9 | cloudflareDevProxy(),
10 | reactRouterHonoServer({
11 | runtime: "cloudflare",
12 | }),
13 | reactRouter(),
14 | tsconfigPaths(),
15 | ],
16 | });
17 |
--------------------------------------------------------------------------------
/examples/cloudflare/queue/app/routes/_index.tsx:
--------------------------------------------------------------------------------
1 | import type { Route } from "./+types/_index";
2 |
3 | export default function Index({ loaderData: data }: Route.ComponentProps) {
4 | return (
5 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/examples/cloudflare/websocket/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { cloudflareDevProxy } from "@react-router/dev/vite/cloudflare";
3 | import { reactRouterHonoServer } from "react-router-hono-server/dev";
4 | import { defineConfig } from "vite";
5 | import tsconfigPaths from "vite-tsconfig-paths";
6 |
7 | export default defineConfig({
8 | plugins: [
9 | cloudflareDevProxy(),
10 | reactRouter(),
11 | reactRouterHonoServer({
12 | runtime: "cloudflare",
13 | }),
14 | tsconfigPaths(),
15 | ],
16 | });
17 |
--------------------------------------------------------------------------------
/examples/cloudflare/custom-mount/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { cloudflareDevProxy } from "@react-router/dev/vite/cloudflare";
3 | import { reactRouterHonoServer } from "react-router-hono-server/dev";
4 | import { defineConfig } from "vite";
5 | import tsconfigPaths from "vite-tsconfig-paths";
6 |
7 | export default defineConfig({
8 | plugins: [
9 | cloudflareDevProxy(),
10 | reactRouterHonoServer({
11 | runtime: "cloudflare",
12 | }),
13 | reactRouter(),
14 | tsconfigPaths(),
15 | ],
16 | });
17 |
--------------------------------------------------------------------------------
/examples/cloudflare/with-pre-render/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { cloudflareDevProxy } from "@react-router/dev/vite/cloudflare";
3 | import { reactRouterHonoServer } from "react-router-hono-server/dev";
4 | import { defineConfig } from "vite";
5 | import tsconfigPaths from "vite-tsconfig-paths";
6 |
7 | export default defineConfig({
8 | plugins: [
9 | cloudflareDevProxy(),
10 | reactRouterHonoServer({
11 | runtime: "cloudflare",
12 | }),
13 | reactRouter(),
14 | tsconfigPaths(),
15 | ],
16 | });
17 |
--------------------------------------------------------------------------------
/src/middleware.ts:
--------------------------------------------------------------------------------
1 | import { createMiddleware } from "hono/factory";
2 |
3 | /**
4 | * Cache middleware
5 | *
6 | * @param seconds - The number of seconds to cache
7 | */
8 | export function cache(seconds: number) {
9 | return createMiddleware(async (c, next) => {
10 | if (!c.req.path.match(/\.[a-zA-Z0-9]+$/) || c.req.path.endsWith(".data")) {
11 | return next();
12 | }
13 |
14 | await next();
15 |
16 | if (!c.res.ok || c.res.headers.has("cache-control")) {
17 | return;
18 | }
19 |
20 | c.res.headers.set("cache-control", `public, max-age=${seconds}`);
21 | });
22 | }
23 |
--------------------------------------------------------------------------------
/examples/bun/custom-mount/app/server/index.ts:
--------------------------------------------------------------------------------
1 | import { Hono } from "hono";
2 | import { createHonoServer } from "react-router-hono-server/bun";
3 | import { API_BASENAME, api } from "./api";
4 | import { getLoadContext } from "./context";
5 |
6 | // Create a root Hono app
7 | const app = new Hono();
8 |
9 | // Mount the API app at /api
10 | app.route(API_BASENAME, api);
11 |
12 | export default await createHonoServer({
13 | // Pass the root Hono app to the server.
14 | // It will be used to mount the React Router app on the `basename` defined in react-router.config.ts
15 | app,
16 | getLoadContext,
17 | });
18 |
--------------------------------------------------------------------------------
/examples/node/custom-mount/app/server/index.ts:
--------------------------------------------------------------------------------
1 | import { Hono } from "hono";
2 | import { createHonoServer } from "react-router-hono-server/node";
3 | import { API_BASENAME, api } from "./api";
4 | import { getLoadContext } from "./context";
5 |
6 | // Create a root Hono app
7 | const app = new Hono();
8 |
9 | // Mount the API app at /api
10 | app.route(API_BASENAME, api);
11 |
12 | export default await createHonoServer({
13 | // Pass the root Hono app to the server.
14 | // It will be used to mount the React Router app on the `basename` defined in react-router.config.ts
15 | app,
16 | getLoadContext,
17 | });
18 |
--------------------------------------------------------------------------------
/examples/bun/custom-mount/app/server/context.ts:
--------------------------------------------------------------------------------
1 | import { createGetLoadContext } from "react-router-hono-server/bun";
2 |
3 | /**
4 | * Declare our loaders and actions context type
5 | */
6 | declare module "react-router" {
7 | interface AppLoadContext {
8 | /**
9 | * The app version from the build assets
10 | */
11 | readonly appVersion: string;
12 | }
13 | }
14 |
15 | export const getLoadContext = createGetLoadContext((c, { mode, build }) => {
16 | const isProductionMode = mode === "production";
17 | return {
18 | appVersion: isProductionMode ? build.assets.version : "dev",
19 | };
20 | });
21 |
--------------------------------------------------------------------------------
/examples/node/simple/app/server/middleware.ts:
--------------------------------------------------------------------------------
1 | import { createMiddleware } from "hono/factory";
2 |
3 | const module = await import("~/utils/circular");
4 | await module.getBuildInfo().then((data) => {
5 | console.log("build info", data);
6 | });
7 |
8 | export function logger() {
9 | return createMiddleware(async (c, next) => {
10 | const request = c.req.raw;
11 | const method = request.method;
12 |
13 | await next();
14 |
15 | console.log(
16 | `[${new Date().toISOString()}] ${method} ${request.url} - ${c.res.status} ${c.res.headers.get("Content-Length") || 0} bytes`
17 | );
18 | });
19 | }
20 |
--------------------------------------------------------------------------------
/examples/cloudflare/custom-mount/app/server/index.ts:
--------------------------------------------------------------------------------
1 | import { Hono } from "hono";
2 | import { createHonoServer } from "react-router-hono-server/cloudflare";
3 | import { API_BASENAME, api } from "./api";
4 | import { getLoadContext } from "./context";
5 |
6 | // Create a root Hono app
7 | const app = new Hono();
8 |
9 | // Mount the API app at /api
10 | app.route(API_BASENAME, api);
11 |
12 | export default await createHonoServer({
13 | // Pass the root Hono app to the server.
14 | // It will be used to mount the React Router app on the `basename` defined in react-router.config.ts
15 | app,
16 | getLoadContext,
17 | });
18 |
--------------------------------------------------------------------------------
/examples/node/custom-mount/app/server/context.ts:
--------------------------------------------------------------------------------
1 | import { createGetLoadContext } from "react-router-hono-server/node";
2 |
3 | /**
4 | * Declare our loaders and actions context type
5 | */
6 | declare module "react-router" {
7 | interface AppLoadContext {
8 | /**
9 | * The app version from the build assets
10 | */
11 | readonly appVersion: string;
12 | }
13 | }
14 |
15 | export const getLoadContext = createGetLoadContext((c, { mode, build }) => {
16 | const isProductionMode = mode === "production";
17 | return {
18 | appVersion: isProductionMode ? build.assets.version : "dev",
19 | };
20 | });
21 |
--------------------------------------------------------------------------------
/examples/node/simple/app/server/index.ts:
--------------------------------------------------------------------------------
1 | import { createHonoServer } from "react-router-hono-server/node";
2 | import { getEnv } from "~/utils/env.server";
3 | import { logger } from "./middleware";
4 |
5 | console.log("loading server");
6 |
7 | console.log("server env", getEnv().TZ);
8 |
9 | export default await createHonoServer({
10 | async configure(app) {
11 | app.use("*", logger());
12 | },
13 | async getLoadContext(c, { mode, build }) {
14 | const isProductionMode = mode === "production";
15 | return {
16 | appVersion: isProductionMode ? build.assets.version : "dev",
17 | };
18 | },
19 | });
20 |
--------------------------------------------------------------------------------
/examples/cloudflare/custom-mount/app/server/context.ts:
--------------------------------------------------------------------------------
1 | import { createGetLoadContext } from "react-router-hono-server/cloudflare";
2 |
3 | /**
4 | * Declare our loaders and actions context type
5 | */
6 | declare module "react-router" {
7 | interface AppLoadContext {
8 | /**
9 | * The app version from the build assets
10 | */
11 | readonly appVersion: string;
12 | }
13 | }
14 |
15 | export const getLoadContext = createGetLoadContext((c, { mode, build }) => {
16 | const isProductionMode = mode === "production";
17 | return {
18 | appVersion: isProductionMode ? build.assets.version : "dev",
19 | };
20 | });
21 |
--------------------------------------------------------------------------------
/examples/cloudflare/simple-19/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { cloudflareDevProxy } from "@react-router/dev/vite/cloudflare";
3 | import { reactRouterHonoServer } from "react-router-hono-server/dev";
4 | import { defineConfig } from "vite";
5 | import tsconfigPaths from "vite-tsconfig-paths";
6 |
7 | export default defineConfig({
8 | plugins: [
9 | cloudflareDevProxy(),
10 | reactRouterHonoServer({
11 | runtime: "cloudflare",
12 | flag: {
13 | force_react_19: true,
14 | },
15 | }),
16 | reactRouter(),
17 | tsconfigPaths(),
18 | ],
19 | });
20 |
--------------------------------------------------------------------------------
/examples/bun/websocket/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 { StrictMode, startTransition } 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 |
--------------------------------------------------------------------------------
/examples/node/socketio/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 { StrictMode, startTransition } 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 |
--------------------------------------------------------------------------------
/examples/node/virtual/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 { StrictMode, startTransition } 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 |
--------------------------------------------------------------------------------
/examples/node/websocket/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 { StrictMode, startTransition } 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 |
--------------------------------------------------------------------------------
/examples/node/custom-build/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 { StrictMode, startTransition } 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 |
--------------------------------------------------------------------------------
/examples/node/custom-https/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 { StrictMode, startTransition } 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 |
--------------------------------------------------------------------------------
/examples/node/with-sentry/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 { StrictMode, startTransition } 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 |
--------------------------------------------------------------------------------
/examples/node/with-pre-render/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 { StrictMode, startTransition } 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 |
--------------------------------------------------------------------------------
/examples/cloudflare/d1-drizzle/app/server.ts:
--------------------------------------------------------------------------------
1 | import { type DrizzleD1Database, drizzle } from "drizzle-orm/d1";
2 | import { Hono } from "hono";
3 | import { createHonoServer } from "react-router-hono-server/cloudflare";
4 |
5 | import * as schema from "~/database/schema";
6 |
7 | type Bindings = {
8 | db: DrizzleD1Database;
9 | };
10 |
11 | const app = new Hono<{ Bindings: Bindings; Variables: Env }>();
12 |
13 | export default await createHonoServer({
14 | app,
15 | getLoadContext(c) {
16 | const db = drizzle(c.var.DB, { schema });
17 | return { db };
18 | },
19 | });
20 |
21 | declare module "react-router" {
22 | interface AppLoadContext extends Bindings {}
23 | }
24 |
--------------------------------------------------------------------------------
/examples/cloudflare/websocket/wrangler.toml:
--------------------------------------------------------------------------------
1 | workers_dev = true
2 | name = "my-worker"
3 | compatibility_date = "2024-11-18"
4 | main = "./build/server/index.js"
5 | assets = { directory = "./build/client/" }
6 |
7 | [build]
8 | watch_dir = "./build/server"
9 |
10 | [[durable_objects.bindings]]
11 | name = "WEBSOCKET_MANAGER"
12 | class_name = "WebSocketManager"
13 | script_name = "my-worker"
14 |
15 | [[migrations]]
16 | tag = "v1"
17 | new_classes = ["WebSocketManager"]
18 |
19 | [env.development]
20 |
21 | [[env.development.durable_objects.bindings]]
22 | name = "WEBSOCKET_MANAGER"
23 | class_name = "WebSocketManager"
24 |
25 | [[env.development.migrations]]
26 | tag = "v1"
27 | new_classes = ["WebSocketManager"]
28 |
--------------------------------------------------------------------------------
/examples/node/simple-future-middleware/app/server.ts:
--------------------------------------------------------------------------------
1 | import { RouterContextProvider, createContext } from "react-router";
2 | import { createHonoServer } from "react-router-hono-server/node";
3 |
4 | console.log("loading server");
5 |
6 | type GlobalAppContext = {
7 | appVersion: string;
8 | };
9 |
10 | export const globalAppContext = createContext();
11 |
12 | export default await createHonoServer({
13 | getLoadContext(_c, { mode, build }) {
14 | const isProductionMode = mode === "production";
15 | const context = new RouterContextProvider();
16 |
17 | context.set(globalAppContext, { appVersion: isProductionMode ? build.assets.version : "dev" });
18 |
19 | return context;
20 | },
21 | });
22 |
--------------------------------------------------------------------------------
/examples/node/with-custom-403/app/server.ts:
--------------------------------------------------------------------------------
1 | import { createMiddleware } from "hono/factory";
2 | import { createHonoServer } from "react-router-hono-server/node";
3 |
4 | console.log("loading server");
5 |
6 | export default await createHonoServer({
7 | beforeAll(app) {
8 | app.use(
9 | createMiddleware(async (c, next) => {
10 | await next();
11 |
12 | if (c.res.status === 403) {
13 | return c.redirect("/403");
14 | }
15 | })
16 | );
17 | },
18 | configure(app) {
19 | app.use(
20 | createMiddleware(async (c, next) => {
21 | if (c.req.path.startsWith("/admin")) {
22 | return c.redirect("/403");
23 | }
24 |
25 | await next();
26 | })
27 | );
28 | },
29 | });
30 |
--------------------------------------------------------------------------------
/examples/bun/simple/README.md:
--------------------------------------------------------------------------------
1 | # Welcome to Remix + Vite!
2 |
3 | 📖 See the [Remix docs](https://remix.run/docs) and the [Remix Vite docs](https://remix.run/docs/en/main/guides/vite) for details on supported features.
4 |
5 | ## Development
6 |
7 | Run the Vite dev server:
8 |
9 | ```shellscript
10 | npm run dev
11 | ```
12 |
13 | ## Deployment
14 |
15 | First, build your app for production:
16 |
17 | ```sh
18 | npm run build
19 | ```
20 |
21 | Then run the app in production mode:
22 |
23 | ```sh
24 | npm start
25 | ```
26 |
27 | Now you'll need to pick a host to deploy it to.
28 |
29 | ### DIY
30 |
31 | If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
32 |
33 | Make sure to deploy the output of `npm run build`
34 |
35 | - `build/server`
36 | - `build/client`
37 |
--------------------------------------------------------------------------------
/examples/node/simple/README.md:
--------------------------------------------------------------------------------
1 | # Welcome to Remix + Vite!
2 |
3 | 📖 See the [Remix docs](https://remix.run/docs) and the [Remix Vite docs](https://remix.run/docs/en/main/guides/vite) for details on supported features.
4 |
5 | ## Development
6 |
7 | Run the Vite dev server:
8 |
9 | ```shellscript
10 | npm run dev
11 | ```
12 |
13 | ## Deployment
14 |
15 | First, build your app for production:
16 |
17 | ```sh
18 | npm run build
19 | ```
20 |
21 | Then run the app in production mode:
22 |
23 | ```sh
24 | npm start
25 | ```
26 |
27 | Now you'll need to pick a host to deploy it to.
28 |
29 | ### DIY
30 |
31 | If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
32 |
33 | Make sure to deploy the output of `npm run build`
34 |
35 | - `build/server`
36 | - `build/client`
37 |
--------------------------------------------------------------------------------
/examples/bun/custom-mount/README.md:
--------------------------------------------------------------------------------
1 | # Welcome to Remix + Vite!
2 |
3 | 📖 See the [Remix docs](https://remix.run/docs) and the [Remix Vite docs](https://remix.run/docs/en/main/guides/vite) for details on supported features.
4 |
5 | ## Development
6 |
7 | Run the Vite dev server:
8 |
9 | ```shellscript
10 | npm run dev
11 | ```
12 |
13 | ## Deployment
14 |
15 | First, build your app for production:
16 |
17 | ```sh
18 | npm run build
19 | ```
20 |
21 | Then run the app in production mode:
22 |
23 | ```sh
24 | npm start
25 | ```
26 |
27 | Now you'll need to pick a host to deploy it to.
28 |
29 | ### DIY
30 |
31 | If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
32 |
33 | Make sure to deploy the output of `npm run build`
34 |
35 | - `build/server`
36 | - `build/client`
37 |
--------------------------------------------------------------------------------
/examples/bun/websocket/README.md:
--------------------------------------------------------------------------------
1 | # Welcome to Remix + Vite!
2 |
3 | 📖 See the [Remix docs](https://remix.run/docs) and the [Remix Vite docs](https://remix.run/docs/en/main/guides/vite) for details on supported features.
4 |
5 | ## Development
6 |
7 | Run the Vite dev server:
8 |
9 | ```shellscript
10 | npm run dev
11 | ```
12 |
13 | ## Deployment
14 |
15 | First, build your app for production:
16 |
17 | ```sh
18 | npm run build
19 | ```
20 |
21 | Then run the app in production mode:
22 |
23 | ```sh
24 | npm start
25 | ```
26 |
27 | Now you'll need to pick a host to deploy it to.
28 |
29 | ### DIY
30 |
31 | If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
32 |
33 | Make sure to deploy the output of `npm run build`
34 |
35 | - `build/server`
36 | - `build/client`
37 |
--------------------------------------------------------------------------------
/examples/cloudflare/queue/README.md:
--------------------------------------------------------------------------------
1 | # Welcome to Remix + Vite!
2 |
3 | 📖 See the [Remix docs](https://remix.run/docs) and the [Remix Vite docs](https://remix.run/docs/en/main/guides/vite) for details on supported features.
4 |
5 | ## Development
6 |
7 | Run the Vite dev server:
8 |
9 | ```shellscript
10 | npm run dev
11 | ```
12 |
13 | ## Deployment
14 |
15 | First, build your app for production:
16 |
17 | ```sh
18 | npm run build
19 | ```
20 |
21 | Then run the app in production mode:
22 |
23 | ```sh
24 | npm start
25 | ```
26 |
27 | Now you'll need to pick a host to deploy it to.
28 |
29 | ### DIY
30 |
31 | If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
32 |
33 | Make sure to deploy the output of `npm run build`
34 |
35 | - `build/server`
36 | - `build/client`
37 |
--------------------------------------------------------------------------------
/examples/node/socketio/README.md:
--------------------------------------------------------------------------------
1 | # Welcome to Remix + Vite!
2 |
3 | 📖 See the [Remix docs](https://remix.run/docs) and the [Remix Vite docs](https://remix.run/docs/en/main/guides/vite) for details on supported features.
4 |
5 | ## Development
6 |
7 | Run the Vite dev server:
8 |
9 | ```shellscript
10 | npm run dev
11 | ```
12 |
13 | ## Deployment
14 |
15 | First, build your app for production:
16 |
17 | ```sh
18 | npm run build
19 | ```
20 |
21 | Then run the app in production mode:
22 |
23 | ```sh
24 | npm start
25 | ```
26 |
27 | Now you'll need to pick a host to deploy it to.
28 |
29 | ### DIY
30 |
31 | If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
32 |
33 | Make sure to deploy the output of `npm run build`
34 |
35 | - `build/server`
36 | - `build/client`
37 |
--------------------------------------------------------------------------------
/examples/node/virtual/README.md:
--------------------------------------------------------------------------------
1 | # Welcome to Remix + Vite!
2 |
3 | 📖 See the [Remix docs](https://remix.run/docs) and the [Remix Vite docs](https://remix.run/docs/en/main/guides/vite) for details on supported features.
4 |
5 | ## Development
6 |
7 | Run the Vite dev server:
8 |
9 | ```shellscript
10 | npm run dev
11 | ```
12 |
13 | ## Deployment
14 |
15 | First, build your app for production:
16 |
17 | ```sh
18 | npm run build
19 | ```
20 |
21 | Then run the app in production mode:
22 |
23 | ```sh
24 | npm start
25 | ```
26 |
27 | Now you'll need to pick a host to deploy it to.
28 |
29 | ### DIY
30 |
31 | If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
32 |
33 | Make sure to deploy the output of `npm run build`
34 |
35 | - `build/server`
36 | - `build/client`
37 |
--------------------------------------------------------------------------------
/examples/node/websocket/README.md:
--------------------------------------------------------------------------------
1 | # Welcome to Remix + Vite!
2 |
3 | 📖 See the [Remix docs](https://remix.run/docs) and the [Remix Vite docs](https://remix.run/docs/en/main/guides/vite) for details on supported features.
4 |
5 | ## Development
6 |
7 | Run the Vite dev server:
8 |
9 | ```shellscript
10 | npm run dev
11 | ```
12 |
13 | ## Deployment
14 |
15 | First, build your app for production:
16 |
17 | ```sh
18 | npm run build
19 | ```
20 |
21 | Then run the app in production mode:
22 |
23 | ```sh
24 | npm start
25 | ```
26 |
27 | Now you'll need to pick a host to deploy it to.
28 |
29 | ### DIY
30 |
31 | If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
32 |
33 | Make sure to deploy the output of `npm run build`
34 |
35 | - `build/server`
36 | - `build/client`
37 |
--------------------------------------------------------------------------------
/examples/node/with-sentry/README.md:
--------------------------------------------------------------------------------
1 | # Welcome to Remix + Vite!
2 |
3 | 📖 See the [Remix docs](https://remix.run/docs) and the [Remix Vite docs](https://remix.run/docs/en/main/guides/vite) for details on supported features.
4 |
5 | ## Development
6 |
7 | Run the Vite dev server:
8 |
9 | ```shellscript
10 | npm run dev
11 | ```
12 |
13 | ## Deployment
14 |
15 | First, build your app for production:
16 |
17 | ```sh
18 | npm run build
19 | ```
20 |
21 | Then run the app in production mode:
22 |
23 | ```sh
24 | npm start
25 | ```
26 |
27 | Now you'll need to pick a host to deploy it to.
28 |
29 | ### DIY
30 |
31 | If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
32 |
33 | Make sure to deploy the output of `npm run build`
34 |
35 | - `build/server`
36 | - `build/client`
37 |
--------------------------------------------------------------------------------
/examples/aws-lambda/simple/README.md:
--------------------------------------------------------------------------------
1 | # Welcome to Remix + Vite!
2 |
3 | 📖 See the [Remix docs](https://remix.run/docs) and the [Remix Vite docs](https://remix.run/docs/en/main/guides/vite) for details on supported features.
4 |
5 | ## Development
6 |
7 | Run the Vite dev server:
8 |
9 | ```shellscript
10 | npm run dev
11 | ```
12 |
13 | ## Deployment
14 |
15 | First, build your app for production:
16 |
17 | ```sh
18 | npm run build
19 | ```
20 |
21 | Then run the app in production mode:
22 |
23 | ```sh
24 | npm start
25 | ```
26 |
27 | Now you'll need to pick a host to deploy it to.
28 |
29 | ### DIY
30 |
31 | If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
32 |
33 | Make sure to deploy the output of `npm run build`
34 |
35 | - `build/server`
36 | - `build/client`
37 |
--------------------------------------------------------------------------------
/examples/bun/with-pre-render/README.md:
--------------------------------------------------------------------------------
1 | # Welcome to Remix + Vite!
2 |
3 | 📖 See the [Remix docs](https://remix.run/docs) and the [Remix Vite docs](https://remix.run/docs/en/main/guides/vite) for details on supported features.
4 |
5 | ## Development
6 |
7 | Run the Vite dev server:
8 |
9 | ```shellscript
10 | npm run dev
11 | ```
12 |
13 | ## Deployment
14 |
15 | First, build your app for production:
16 |
17 | ```sh
18 | npm run build
19 | ```
20 |
21 | Then run the app in production mode:
22 |
23 | ```sh
24 | npm start
25 | ```
26 |
27 | Now you'll need to pick a host to deploy it to.
28 |
29 | ### DIY
30 |
31 | If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
32 |
33 | Make sure to deploy the output of `npm run build`
34 |
35 | - `build/server`
36 | - `build/client`
37 |
--------------------------------------------------------------------------------
/examples/cloudflare/simple-19/README.md:
--------------------------------------------------------------------------------
1 | # Welcome to Remix + Vite!
2 |
3 | 📖 See the [Remix docs](https://remix.run/docs) and the [Remix Vite docs](https://remix.run/docs/en/main/guides/vite) for details on supported features.
4 |
5 | ## Development
6 |
7 | Run the Vite dev server:
8 |
9 | ```shellscript
10 | npm run dev
11 | ```
12 |
13 | ## Deployment
14 |
15 | First, build your app for production:
16 |
17 | ```sh
18 | npm run build
19 | ```
20 |
21 | Then run the app in production mode:
22 |
23 | ```sh
24 | npm start
25 | ```
26 |
27 | Now you'll need to pick a host to deploy it to.
28 |
29 | ### DIY
30 |
31 | If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
32 |
33 | Make sure to deploy the output of `npm run build`
34 |
35 | - `build/server`
36 | - `build/client`
37 |
--------------------------------------------------------------------------------
/examples/cloudflare/simple/README.md:
--------------------------------------------------------------------------------
1 | # Welcome to Remix + Vite!
2 |
3 | 📖 See the [Remix docs](https://remix.run/docs) and the [Remix Vite docs](https://remix.run/docs/en/main/guides/vite) for details on supported features.
4 |
5 | ## Development
6 |
7 | Run the Vite dev server:
8 |
9 | ```shellscript
10 | npm run dev
11 | ```
12 |
13 | ## Deployment
14 |
15 | First, build your app for production:
16 |
17 | ```sh
18 | npm run build
19 | ```
20 |
21 | Then run the app in production mode:
22 |
23 | ```sh
24 | npm start
25 | ```
26 |
27 | Now you'll need to pick a host to deploy it to.
28 |
29 | ### DIY
30 |
31 | If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
32 |
33 | Make sure to deploy the output of `npm run build`
34 |
35 | - `build/server`
36 | - `build/client`
37 |
--------------------------------------------------------------------------------
/examples/cloudflare/websocket/README.md:
--------------------------------------------------------------------------------
1 | # Welcome to Remix + Vite!
2 |
3 | 📖 See the [Remix docs](https://remix.run/docs) and the [Remix Vite docs](https://remix.run/docs/en/main/guides/vite) for details on supported features.
4 |
5 | ## Development
6 |
7 | Run the Vite dev server:
8 |
9 | ```shellscript
10 | npm run dev
11 | ```
12 |
13 | ## Deployment
14 |
15 | First, build your app for production:
16 |
17 | ```sh
18 | npm run build
19 | ```
20 |
21 | Then run the app in production mode:
22 |
23 | ```sh
24 | npm start
25 | ```
26 |
27 | Now you'll need to pick a host to deploy it to.
28 |
29 | ### DIY
30 |
31 | If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
32 |
33 | Make sure to deploy the output of `npm run build`
34 |
35 | - `build/server`
36 | - `build/client`
37 |
--------------------------------------------------------------------------------
/examples/node/custom-app-dir/README.md:
--------------------------------------------------------------------------------
1 | # Welcome to Remix + Vite!
2 |
3 | 📖 See the [Remix docs](https://remix.run/docs) and the [Remix Vite docs](https://remix.run/docs/en/main/guides/vite) for details on supported features.
4 |
5 | ## Development
6 |
7 | Run the Vite dev server:
8 |
9 | ```shellscript
10 | npm run dev
11 | ```
12 |
13 | ## Deployment
14 |
15 | First, build your app for production:
16 |
17 | ```sh
18 | npm run build
19 | ```
20 |
21 | Then run the app in production mode:
22 |
23 | ```sh
24 | npm start
25 | ```
26 |
27 | Now you'll need to pick a host to deploy it to.
28 |
29 | ### DIY
30 |
31 | If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
32 |
33 | Make sure to deploy the output of `npm run build`
34 |
35 | - `build/server`
36 | - `build/client`
37 |
--------------------------------------------------------------------------------
/examples/node/custom-build/README.md:
--------------------------------------------------------------------------------
1 | # Welcome to Remix + Vite!
2 |
3 | 📖 See the [Remix docs](https://remix.run/docs) and the [Remix Vite docs](https://remix.run/docs/en/main/guides/vite) for details on supported features.
4 |
5 | ## Development
6 |
7 | Run the Vite dev server:
8 |
9 | ```shellscript
10 | npm run dev
11 | ```
12 |
13 | ## Deployment
14 |
15 | First, build your app for production:
16 |
17 | ```sh
18 | npm run build
19 | ```
20 |
21 | Then run the app in production mode:
22 |
23 | ```sh
24 | npm start
25 | ```
26 |
27 | Now you'll need to pick a host to deploy it to.
28 |
29 | ### DIY
30 |
31 | If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
32 |
33 | Make sure to deploy the output of `npm run build`
34 |
35 | - `build/server`
36 | - `build/client`
37 |
--------------------------------------------------------------------------------
/examples/node/custom-https/README.md:
--------------------------------------------------------------------------------
1 | # Welcome to Remix + Vite!
2 |
3 | 📖 See the [Remix docs](https://remix.run/docs) and the [Remix Vite docs](https://remix.run/docs/en/main/guides/vite) for details on supported features.
4 |
5 | ## Development
6 |
7 | Run the Vite dev server:
8 |
9 | ```shellscript
10 | npm run dev
11 | ```
12 |
13 | ## Deployment
14 |
15 | First, build your app for production:
16 |
17 | ```sh
18 | npm run build
19 | ```
20 |
21 | Then run the app in production mode:
22 |
23 | ```sh
24 | npm start
25 | ```
26 |
27 | Now you'll need to pick a host to deploy it to.
28 |
29 | ### DIY
30 |
31 | If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
32 |
33 | Make sure to deploy the output of `npm run build`
34 |
35 | - `build/server`
36 | - `build/client`
37 |
--------------------------------------------------------------------------------
/examples/node/custom-mount/README.md:
--------------------------------------------------------------------------------
1 | # Welcome to Remix + Vite!
2 |
3 | 📖 See the [Remix docs](https://remix.run/docs) and the [Remix Vite docs](https://remix.run/docs/en/main/guides/vite) for details on supported features.
4 |
5 | ## Development
6 |
7 | Run the Vite dev server:
8 |
9 | ```shellscript
10 | npm run dev
11 | ```
12 |
13 | ## Deployment
14 |
15 | First, build your app for production:
16 |
17 | ```sh
18 | npm run build
19 | ```
20 |
21 | Then run the app in production mode:
22 |
23 | ```sh
24 | npm start
25 | ```
26 |
27 | Now you'll need to pick a host to deploy it to.
28 |
29 | ### DIY
30 |
31 | If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
32 |
33 | Make sure to deploy the output of `npm run build`
34 |
35 | - `build/server`
36 | - `build/client`
37 |
--------------------------------------------------------------------------------
/examples/node/protected-routes/README.md:
--------------------------------------------------------------------------------
1 | # Welcome to Remix + Vite!
2 |
3 | 📖 See the [Remix docs](https://remix.run/docs) and the [Remix Vite docs](https://remix.run/docs/en/main/guides/vite) for details on supported features.
4 |
5 | ## Development
6 |
7 | Run the Vite dev server:
8 |
9 | ```shellscript
10 | npm run dev
11 | ```
12 |
13 | ## Deployment
14 |
15 | First, build your app for production:
16 |
17 | ```sh
18 | npm run build
19 | ```
20 |
21 | Then run the app in production mode:
22 |
23 | ```sh
24 | npm start
25 | ```
26 |
27 | Now you'll need to pick a host to deploy it to.
28 |
29 | ### DIY
30 |
31 | If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
32 |
33 | Make sure to deploy the output of `npm run build`
34 |
35 | - `build/server`
36 | - `build/client`
37 |
--------------------------------------------------------------------------------
/examples/node/simple-future/README.md:
--------------------------------------------------------------------------------
1 | # Welcome to Remix + Vite!
2 |
3 | 📖 See the [Remix docs](https://remix.run/docs) and the [Remix Vite docs](https://remix.run/docs/en/main/guides/vite) for details on supported features.
4 |
5 | ## Development
6 |
7 | Run the Vite dev server:
8 |
9 | ```shellscript
10 | npm run dev
11 | ```
12 |
13 | ## Deployment
14 |
15 | First, build your app for production:
16 |
17 | ```sh
18 | npm run build
19 | ```
20 |
21 | Then run the app in production mode:
22 |
23 | ```sh
24 | npm start
25 | ```
26 |
27 | Now you'll need to pick a host to deploy it to.
28 |
29 | ### DIY
30 |
31 | If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
32 |
33 | Make sure to deploy the output of `npm run build`
34 |
35 | - `build/server`
36 | - `build/client`
37 |
--------------------------------------------------------------------------------
/examples/node/with-custom-403/README.md:
--------------------------------------------------------------------------------
1 | # Welcome to Remix + Vite!
2 |
3 | 📖 See the [Remix docs](https://remix.run/docs) and the [Remix Vite docs](https://remix.run/docs/en/main/guides/vite) for details on supported features.
4 |
5 | ## Development
6 |
7 | Run the Vite dev server:
8 |
9 | ```shellscript
10 | npm run dev
11 | ```
12 |
13 | ## Deployment
14 |
15 | First, build your app for production:
16 |
17 | ```sh
18 | npm run build
19 | ```
20 |
21 | Then run the app in production mode:
22 |
23 | ```sh
24 | npm start
25 | ```
26 |
27 | Now you'll need to pick a host to deploy it to.
28 |
29 | ### DIY
30 |
31 | If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
32 |
33 | Make sure to deploy the output of `npm run build`
34 |
35 | - `build/server`
36 | - `build/client`
37 |
--------------------------------------------------------------------------------
/examples/node/with-pre-render/README.md:
--------------------------------------------------------------------------------
1 | # Welcome to Remix + Vite!
2 |
3 | 📖 See the [Remix docs](https://remix.run/docs) and the [Remix Vite docs](https://remix.run/docs/en/main/guides/vite) for details on supported features.
4 |
5 | ## Development
6 |
7 | Run the Vite dev server:
8 |
9 | ```shellscript
10 | npm run dev
11 | ```
12 |
13 | ## Deployment
14 |
15 | First, build your app for production:
16 |
17 | ```sh
18 | npm run build
19 | ```
20 |
21 | Then run the app in production mode:
22 |
23 | ```sh
24 | npm start
25 | ```
26 |
27 | Now you'll need to pick a host to deploy it to.
28 |
29 | ### DIY
30 |
31 | If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
32 |
33 | Make sure to deploy the output of `npm run build`
34 |
35 | - `build/server`
36 | - `build/client`
37 |
--------------------------------------------------------------------------------
/examples/node/with-vite-env/README.md:
--------------------------------------------------------------------------------
1 | # Welcome to Remix + Vite!
2 |
3 | 📖 See the [Remix docs](https://remix.run/docs) and the [Remix Vite docs](https://remix.run/docs/en/main/guides/vite) for details on supported features.
4 |
5 | ## Development
6 |
7 | Run the Vite dev server:
8 |
9 | ```shellscript
10 | npm run dev
11 | ```
12 |
13 | ## Deployment
14 |
15 | First, build your app for production:
16 |
17 | ```sh
18 | npm run build
19 | ```
20 |
21 | Then run the app in production mode:
22 |
23 | ```sh
24 | npm start
25 | ```
26 |
27 | Now you'll need to pick a host to deploy it to.
28 |
29 | ### DIY
30 |
31 | If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
32 |
33 | Make sure to deploy the output of `npm run build`
34 |
35 | - `build/server`
36 | - `build/client`
37 |
--------------------------------------------------------------------------------
/examples/bun/simple-bun-runtime/README.md:
--------------------------------------------------------------------------------
1 | # Welcome to Remix + Vite!
2 |
3 | 📖 See the [Remix docs](https://remix.run/docs) and the [Remix Vite docs](https://remix.run/docs/en/main/guides/vite) for details on supported features.
4 |
5 | ## Development
6 |
7 | Run the Vite dev server:
8 |
9 | ```shellscript
10 | npm run dev
11 | ```
12 |
13 | ## Deployment
14 |
15 | First, build your app for production:
16 |
17 | ```sh
18 | npm run build
19 | ```
20 |
21 | Then run the app in production mode:
22 |
23 | ```sh
24 | npm start
25 | ```
26 |
27 | Now you'll need to pick a host to deploy it to.
28 |
29 | ### DIY
30 |
31 | If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
32 |
33 | Make sure to deploy the output of `npm run build`
34 |
35 | - `build/server`
36 | - `build/client`
37 |
--------------------------------------------------------------------------------
/examples/cloudflare/custom-mount/README.md:
--------------------------------------------------------------------------------
1 | # Welcome to Remix + Vite!
2 |
3 | 📖 See the [Remix docs](https://remix.run/docs) and the [Remix Vite docs](https://remix.run/docs/en/main/guides/vite) for details on supported features.
4 |
5 | ## Development
6 |
7 | Run the Vite dev server:
8 |
9 | ```shellscript
10 | npm run dev
11 | ```
12 |
13 | ## Deployment
14 |
15 | First, build your app for production:
16 |
17 | ```sh
18 | npm run build
19 | ```
20 |
21 | Then run the app in production mode:
22 |
23 | ```sh
24 | npm start
25 | ```
26 |
27 | Now you'll need to pick a host to deploy it to.
28 |
29 | ### DIY
30 |
31 | If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
32 |
33 | Make sure to deploy the output of `npm run build`
34 |
35 | - `build/server`
36 | - `build/client`
37 |
--------------------------------------------------------------------------------
/examples/cloudflare/with-pre-render/README.md:
--------------------------------------------------------------------------------
1 | # Welcome to Remix + Vite!
2 |
3 | 📖 See the [Remix docs](https://remix.run/docs) and the [Remix Vite docs](https://remix.run/docs/en/main/guides/vite) for details on supported features.
4 |
5 | ## Development
6 |
7 | Run the Vite dev server:
8 |
9 | ```shellscript
10 | npm run dev
11 | ```
12 |
13 | ## Deployment
14 |
15 | First, build your app for production:
16 |
17 | ```sh
18 | npm run build
19 | ```
20 |
21 | Then run the app in production mode:
22 |
23 | ```sh
24 | npm start
25 | ```
26 |
27 | Now you'll need to pick a host to deploy it to.
28 |
29 | ### DIY
30 |
31 | If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
32 |
33 | Make sure to deploy the output of `npm run build`
34 |
35 | - `build/server`
36 | - `build/client`
37 |
--------------------------------------------------------------------------------
/examples/node/socketio/app/server.ts:
--------------------------------------------------------------------------------
1 | import { createHonoServer } from "react-router-hono-server/node";
2 | import { Server } from "socket.io";
3 |
4 | console.log("loading server");
5 |
6 | export default await createHonoServer({
7 | onServe(server) {
8 | const io = new Server(server);
9 |
10 | io.on("connection", (socket) => {
11 | console.log("New connection 🔥", socket.id);
12 |
13 | socket.on("disconnect", (reason) => {
14 | // called when the underlying connection is closed
15 | console.log("Connection closed");
16 | });
17 |
18 | socket.on("message", (message) => {
19 | console.log(`Message from client: ${message}`);
20 | // Broadcast to all clients except sender
21 | socket.broadcast.emit("message", message);
22 | });
23 | });
24 | },
25 | });
26 |
--------------------------------------------------------------------------------
/examples/node/simple-future-middleware/README.md:
--------------------------------------------------------------------------------
1 | # Welcome to Remix + Vite!
2 |
3 | 📖 See the [Remix docs](https://remix.run/docs) and the [Remix Vite docs](https://remix.run/docs/en/main/guides/vite) for details on supported features.
4 |
5 | ## Development
6 |
7 | Run the Vite dev server:
8 |
9 | ```shellscript
10 | npm run dev
11 | ```
12 |
13 | ## Deployment
14 |
15 | First, build your app for production:
16 |
17 | ```sh
18 | npm run build
19 | ```
20 |
21 | Then run the app in production mode:
22 |
23 | ```sh
24 | npm start
25 | ```
26 |
27 | Now you'll need to pick a host to deploy it to.
28 |
29 | ### DIY
30 |
31 | If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
32 |
33 | Make sure to deploy the output of `npm run build`
34 |
35 | - `build/server`
36 | - `build/client`
37 |
--------------------------------------------------------------------------------
/examples/node/simple/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "include": ["**/*", "**/.server/**/*", "**/.client/**/*", ".react-router/types/**/*", "types/**/*"],
3 | "compilerOptions": {
4 | "lib": ["DOM", "DOM.Iterable", "ES2022"],
5 | "types": ["node", "vite/client"],
6 | "target": "ES2022",
7 | "module": "ES2022",
8 | "moduleResolution": "bundler",
9 | "jsx": "react-jsx",
10 | "rootDirs": [".", "./.react-router/types"],
11 | "baseUrl": ".",
12 | "paths": {
13 | "~/*": ["./app/*"]
14 | },
15 | "esModuleInterop": true,
16 | "forceConsistentCasingInFileNames": true,
17 | "verbatimModuleSyntax": true,
18 | "noEmit": true,
19 | "resolveJsonModule": true,
20 | "skipLibCheck": true,
21 | "strict": true,
22 | "strictNullChecks": true,
23 | "noUncheckedIndexedAccess": true
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/examples/bun/simple-bun-runtime/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "include": ["**/*", "**/.server/**/*", "**/.client/**/*", ".react-router/types/**/*", "types/**/*"],
3 | "compilerOptions": {
4 | "lib": ["DOM", "DOM.Iterable", "ES2022"],
5 | "types": ["node", "vite/client"],
6 | "target": "ES2022",
7 | "module": "ES2022",
8 | "moduleResolution": "bundler",
9 | "jsx": "react-jsx",
10 | "rootDirs": [".", "./.react-router/types"],
11 | "baseUrl": ".",
12 | "paths": {
13 | "~/*": ["./app/*"]
14 | },
15 | "esModuleInterop": true,
16 | "forceConsistentCasingInFileNames": true,
17 | "verbatimModuleSyntax": true,
18 | "noEmit": true,
19 | "resolveJsonModule": true,
20 | "skipLibCheck": true,
21 | "strict": true,
22 | "strictNullChecks": true,
23 | "noUncheckedIndexedAccess": true
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/examples/bun/simple/app/root.tsx:
--------------------------------------------------------------------------------
1 | import type { LinksFunction } from "react-router";
2 | import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
3 | import styles from "~/styles/tailwind.css?url";
4 |
5 | export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
6 |
7 | export function Layout({ children }: { children: React.ReactNode }) {
8 | return (
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | {children}
19 |
20 |
21 |
22 |
23 | );
24 | }
25 |
26 | export default function App() {
27 | return ;
28 | }
29 |
--------------------------------------------------------------------------------
/examples/bun/websocket/app/root.tsx:
--------------------------------------------------------------------------------
1 | import type { LinksFunction } from "react-router";
2 | import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
3 | import styles from "~/styles/tailwind.css?url";
4 |
5 | export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
6 |
7 | export function Layout({ children }: { children: React.ReactNode }) {
8 | return (
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | {children}
19 |
20 |
21 |
22 |
23 | );
24 | }
25 |
26 | export default function App() {
27 | return ;
28 | }
29 |
--------------------------------------------------------------------------------
/examples/node/simple/app/root.tsx:
--------------------------------------------------------------------------------
1 | import type { LinksFunction } from "react-router";
2 | import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
3 | import styles from "~/styles/tailwind.css?url";
4 |
5 | export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
6 |
7 | export function Layout({ children }: { children: React.ReactNode }) {
8 | return (
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | {children}
19 |
20 |
21 |
22 |
23 | );
24 | }
25 |
26 | export default function App() {
27 | return ;
28 | }
29 |
--------------------------------------------------------------------------------
/examples/node/socketio/app/root.tsx:
--------------------------------------------------------------------------------
1 | import type { LinksFunction } from "react-router";
2 | import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
3 | import styles from "~/styles/tailwind.css?url";
4 |
5 | export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
6 |
7 | export function Layout({ children }: { children: React.ReactNode }) {
8 | return (
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | {children}
19 |
20 |
21 |
22 |
23 | );
24 | }
25 |
26 | export default function App() {
27 | return ;
28 | }
29 |
--------------------------------------------------------------------------------
/examples/node/virtual/app/root.tsx:
--------------------------------------------------------------------------------
1 | import type { LinksFunction } from "react-router";
2 | import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
3 | import styles from "~/styles/tailwind.css?url";
4 |
5 | export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
6 |
7 | export function Layout({ children }: { children: React.ReactNode }) {
8 | return (
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | {children}
19 |
20 |
21 |
22 |
23 | );
24 | }
25 |
26 | export default function App() {
27 | return ;
28 | }
29 |
--------------------------------------------------------------------------------
/examples/aws-lambda/simple/app/root.tsx:
--------------------------------------------------------------------------------
1 | import type { LinksFunction } from "react-router";
2 | import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
3 | import styles from "~/styles/tailwind.css?url";
4 |
5 | export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
6 |
7 | export function Layout({ children }: { children: React.ReactNode }) {
8 | return (
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | {children}
19 |
20 |
21 |
22 |
23 | );
24 | }
25 |
26 | export default function App() {
27 | return ;
28 | }
29 |
--------------------------------------------------------------------------------
/examples/bun/custom-mount/app/root.tsx:
--------------------------------------------------------------------------------
1 | import type { LinksFunction } from "react-router";
2 | import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
3 | import styles from "~/styles/tailwind.css?url";
4 |
5 | export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
6 |
7 | export function Layout({ children }: { children: React.ReactNode }) {
8 | return (
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | {children}
19 |
20 |
21 |
22 |
23 | );
24 | }
25 |
26 | export default function App() {
27 | return ;
28 | }
29 |
--------------------------------------------------------------------------------
/examples/cloudflare/queue/app/root.tsx:
--------------------------------------------------------------------------------
1 | import type { LinksFunction } from "react-router";
2 | import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
3 | import styles from "~/styles/tailwind.css?url";
4 |
5 | export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
6 |
7 | export function Layout({ children }: { children: React.ReactNode }) {
8 | return (
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | {children}
19 |
20 |
21 |
22 |
23 | );
24 | }
25 |
26 | export default function App() {
27 | return ;
28 | }
29 |
--------------------------------------------------------------------------------
/examples/cloudflare/simple/app/root.tsx:
--------------------------------------------------------------------------------
1 | import type { LinksFunction } from "react-router";
2 | import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
3 | import styles from "~/styles/tailwind.css?url";
4 |
5 | export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
6 |
7 | export function Layout({ children }: { children: React.ReactNode }) {
8 | return (
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | {children}
19 |
20 |
21 |
22 |
23 | );
24 | }
25 |
26 | export default function App() {
27 | return ;
28 | }
29 |
--------------------------------------------------------------------------------
/examples/node/custom-build/app/root.tsx:
--------------------------------------------------------------------------------
1 | import type { LinksFunction } from "react-router";
2 | import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
3 | import styles from "~/styles/tailwind.css?url";
4 |
5 | export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
6 |
7 | export function Layout({ children }: { children: React.ReactNode }) {
8 | return (
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | {children}
19 |
20 |
21 |
22 |
23 | );
24 | }
25 |
26 | export default function App() {
27 | return ;
28 | }
29 |
--------------------------------------------------------------------------------
/examples/node/custom-https/app/root.tsx:
--------------------------------------------------------------------------------
1 | import type { LinksFunction } from "react-router";
2 | import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
3 | import styles from "~/styles/tailwind.css?url";
4 |
5 | export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
6 |
7 | export function Layout({ children }: { children: React.ReactNode }) {
8 | return (
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | {children}
19 |
20 |
21 |
22 |
23 | );
24 | }
25 |
26 | export default function App() {
27 | return ;
28 | }
29 |
--------------------------------------------------------------------------------
/examples/node/custom-mount/app/root.tsx:
--------------------------------------------------------------------------------
1 | import type { LinksFunction } from "react-router";
2 | import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
3 | import styles from "~/styles/tailwind.css?url";
4 |
5 | export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
6 |
7 | export function Layout({ children }: { children: React.ReactNode }) {
8 | return (
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | {children}
19 |
20 |
21 |
22 |
23 | );
24 | }
25 |
26 | export default function App() {
27 | return ;
28 | }
29 |
--------------------------------------------------------------------------------
/examples/node/simple-future/app/root.tsx:
--------------------------------------------------------------------------------
1 | import type { LinksFunction } from "react-router";
2 | import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
3 | import styles from "~/styles/tailwind.css?url";
4 |
5 | export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
6 |
7 | export function Layout({ children }: { children: React.ReactNode }) {
8 | return (
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | {children}
19 |
20 |
21 |
22 |
23 | );
24 | }
25 |
26 | export default function App() {
27 | return ;
28 | }
29 |
--------------------------------------------------------------------------------
/examples/node/websocket/app/root.tsx:
--------------------------------------------------------------------------------
1 | import type { LinksFunction } from "react-router";
2 | import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
3 | import styles from "~/styles/tailwind.css?url";
4 |
5 | export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
6 |
7 | export function Layout({ children }: { children: React.ReactNode }) {
8 | return (
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | {children}
19 |
20 |
21 |
22 |
23 | );
24 | }
25 |
26 | export default function App() {
27 | return ;
28 | }
29 |
--------------------------------------------------------------------------------
/examples/node/with-sentry/app/root.tsx:
--------------------------------------------------------------------------------
1 | import type { LinksFunction } from "react-router";
2 | import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
3 | import styles from "~/styles/tailwind.css?url";
4 |
5 | export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
6 |
7 | export function Layout({ children }: { children: React.ReactNode }) {
8 | return (
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | {children}
19 |
20 |
21 |
22 |
23 | );
24 | }
25 |
26 | export default function App() {
27 | return ;
28 | }
29 |
--------------------------------------------------------------------------------
/examples/node/with-vite-env/app/root.tsx:
--------------------------------------------------------------------------------
1 | import type { LinksFunction } from "react-router";
2 | import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
3 | import styles from "~/styles/tailwind.css?url";
4 |
5 | export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
6 |
7 | export function Layout({ children }: { children: React.ReactNode }) {
8 | return (
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | {children}
19 |
20 |
21 |
22 |
23 | );
24 | }
25 |
26 | export default function App() {
27 | return ;
28 | }
29 |
--------------------------------------------------------------------------------
/examples/bun/simple-bun-runtime/app/root.tsx:
--------------------------------------------------------------------------------
1 | import type { LinksFunction } from "react-router";
2 | import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
3 | import styles from "~/styles/tailwind.css?url";
4 |
5 | export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
6 |
7 | export function Layout({ children }: { children: React.ReactNode }) {
8 | return (
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | {children}
19 |
20 |
21 |
22 |
23 | );
24 | }
25 |
26 | export default function App() {
27 | return ;
28 | }
29 |
--------------------------------------------------------------------------------
/examples/bun/with-pre-render/app/root.tsx:
--------------------------------------------------------------------------------
1 | import type { LinksFunction } from "react-router";
2 | import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
3 | import styles from "~/styles/tailwind.css?url";
4 |
5 | export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
6 |
7 | export function Layout({ children }: { children: React.ReactNode }) {
8 | return (
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | {children}
19 |
20 |
21 |
22 |
23 | );
24 | }
25 |
26 | export default function App() {
27 | return ;
28 | }
29 |
--------------------------------------------------------------------------------
/examples/cloudflare/custom-mount/app/root.tsx:
--------------------------------------------------------------------------------
1 | import type { LinksFunction } from "react-router";
2 | import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
3 | import styles from "~/styles/tailwind.css?url";
4 |
5 | export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
6 |
7 | export function Layout({ children }: { children: React.ReactNode }) {
8 | return (
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | {children}
19 |
20 |
21 |
22 |
23 | );
24 | }
25 |
26 | export default function App() {
27 | return ;
28 | }
29 |
--------------------------------------------------------------------------------
/examples/cloudflare/d1-drizzle/app/root.tsx:
--------------------------------------------------------------------------------
1 | import type { LinksFunction } from "react-router";
2 | import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
3 | import styles from "~/styles/tailwind.css?url";
4 |
5 | export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
6 |
7 | export function Layout({ children }: { children: React.ReactNode }) {
8 | return (
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | {children}
19 |
20 |
21 |
22 |
23 | );
24 | }
25 |
26 | export default function App() {
27 | return ;
28 | }
29 |
--------------------------------------------------------------------------------
/examples/cloudflare/simple-19/app/root.tsx:
--------------------------------------------------------------------------------
1 | import type { LinksFunction } from "react-router";
2 | import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
3 | import styles from "~/styles/tailwind.css?url";
4 |
5 | export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
6 |
7 | export function Layout({ children }: { children: React.ReactNode }) {
8 | return (
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | {children}
19 |
20 |
21 |
22 |
23 | );
24 | }
25 |
26 | export default function App() {
27 | return ;
28 | }
29 |
--------------------------------------------------------------------------------
/examples/cloudflare/websocket/app/root.tsx:
--------------------------------------------------------------------------------
1 | import type { LinksFunction } from "react-router";
2 | import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
3 | import styles from "~/styles/tailwind.css?url";
4 |
5 | export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
6 |
7 | export function Layout({ children }: { children: React.ReactNode }) {
8 | return (
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | {children}
19 |
20 |
21 |
22 |
23 | );
24 | }
25 |
26 | export default function App() {
27 | return ;
28 | }
29 |
--------------------------------------------------------------------------------