Add minimal template (#54)

brophdawg11 · brookslybrand · web-flow · commit ed4e0bc31dba · 2025-01-30T09:52:52.000-06:00
* Add minimal template

* Remove autoprefixer

* Upgrade to vite 6

* Add isbot, remove cross-env

* Add favicon back

* Add ErrorBoundsary to root

* add simple tailwindcss setup

* add tests

* Add link to the docs

* Minor alignments with default

* remove package-lock.json from .gitignore

---------

Co-authored-by: Brooks Lybrand &lt;brookslybrand@gmail.com&gt;
diff --git a/.tests/test.minimal.ts b/.tests/test.minimal.ts
@@ -0,0 +1,37 @@
+import { expect, Page } from "@playwright/test";
+import getPort from "get-port";
+
+import { matchLine, testTemplate, urlRegex } from "./utils";
+
+const test = testTemplate("minimal");
+
+test("typecheck", async ({ $ }) => {
+  await $(`pnpm typecheck`);
+});
+
+test("dev", async ({ page, $ }) => {
+  const port = await getPort();
+  const dev = $(`pnpm dev --port ${port}`);
+
+  const url = await matchLine(dev.stdout, urlRegex.viteDev);
+  await workflow({ page, url });
+  expect(dev.buffer.stderr).toBe("");
+});
+
+test("build + start", async ({ page, $ }) => {
+  await $(`pnpm build`);
+
+  const port = await getPort();
+  const start = $(`pnpm start`, { env: { PORT: String(port) } });
+
+  const url = await matchLine(start.stdout, urlRegex.reactRouterServe);
+  await workflow({ page, url });
+  expect(start.buffer.stderr).toBe("");
+});
+
+async function workflow({ page, url }: { page: Page; url: string }) {
+  await page.goto(url);
+  await page.getByRole("heading", { name: "Hello, React Router" }).waitFor();
+  await page.getByRole("link", { name: "React Router Docs" }).waitFor();
+  expect(page.errors).toStrictEqual([]);
+}
diff --git a/minimal/.gitignore b/minimal/.gitignore
@@ -0,0 +1,6 @@
+.DS_Store
+/node_modules/
+
+# React Router
+/.react-router/
+/build/
diff --git a/minimal/README.md b/minimal/README.md
@@ -0,0 +1,32 @@
+# Welcome to React Router!
+
+A minimal template for experimenting with React Router v7.
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/remix-run/react-router-templates/tree/main/minimal)
+
+> ![NOTE]
+> This template should not be used for production apps and is intended more for experimentation and demo applications. Please see the [default](https://github.com/remix-run/react-router-templates/tree/main/default) template for a more full-featured template.
+
+## Getting Started
+
+### Installation
+
+Install the dependencies:
+
+```bash
+npm install
+```
+
+### Development
+
+Start the development server with HMR:
+
+```bash
+npm run dev
+```
+
+Your application will be available at `http://localhost:5173`.
+
+---
+
+Built with ❤️ using React Router.
diff --git a/minimal/app/app.css b/minimal/app/app.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/minimal/app/root.tsx b/minimal/app/root.tsx
@@ -0,0 +1,62 @@
+import {
+  isRouteErrorResponse,
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from "react-router";
+
+import type { Route } from "./+types/root";
+import "./app.css";
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        {children}
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+export default function App() {
+  return <Outlet />;
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+  let message = "Oops!";
+  let details = "An unexpected error occurred.";
+  let stack: string | undefined;
+
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? "404" : "Error";
+    details =
+      error.status === 404
+        ? "The requested page could not be found."
+        : error.statusText || details;
+  } else if (import.meta.env.DEV && error && error instanceof Error) {
+    details = error.message;
+    stack = error.stack;
+  }
+
+  return (
+    <main className="pt-16 p-4 container mx-auto">
+      <h1>{message}</h1>
+      <p>{details}</p>
+      {stack && (
+        <pre className="w-full p-4 overflow-x-auto">
+          <code>{stack}</code>
+        </pre>
+      )}
+    </main>
+  );
+}
diff --git a/minimal/app/routes.ts b/minimal/app/routes.ts
@@ -0,0 +1,3 @@
+import { type RouteConfig, index } from "@react-router/dev/routes";
+
+export default [index("routes/home.tsx")] satisfies RouteConfig;
diff --git a/minimal/app/routes/home.tsx b/minimal/app/routes/home.tsx
@@ -0,0 +1,19 @@
+import type { Route } from "./+types/home";
+
+export function loader() {
+  return { name: "React Router" };
+}
+
+export default function Home({ loaderData }: Route.ComponentProps) {
+  return (
+    <div className="text-center p-4">
+      <h1 className="text-2xl">Hello, {loaderData.name}</h1>
+      <a
+        className="block mt-2 text-blue-500 underline hover:text-blue-600"
+        href="https://reactrouter.com/docs"
+      >
+        React Router Docs
+      </a>
+    </div>
+  );
+}
diff --git a/minimal/package.json b/minimal/package.json
@@ -0,0 +1,28 @@
+{
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "react-router build",
+    "dev": "react-router dev",
+    "start": "react-router-serve ./build/server/index.js",
+    "typecheck": "react-router typegen && tsc"
+  },
+  "dependencies": {
+    "@react-router/node": "*",
+    "@react-router/serve": "*",
+    "isbot": "^5.1.17",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router": "*"
+  },
+  "devDependencies": {
+    "@react-router/dev": "*",
+    "@types/node": "^20",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.1",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.11",
+    "vite-tsconfig-paths": "^5.1.4"
+  }
+}
diff --git a/minimal/public/favicon.ico b/minimal/public/favicon.ico
diff --git a/minimal/react-router.config.ts b/minimal/react-router.config.ts
@@ -0,0 +1,7 @@
+import type { Config } from "@react-router/dev/config";
+
+export default {
+  // Config options...
+  // Server-side render by default, to enable SPA mode set this to `false`
+  ssr: true,
+} satisfies Config;
diff --git a/minimal/tailwind.config.js b/minimal/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./app/**/*.{ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
diff --git a/minimal/tsconfig.json b/minimal/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "include": [
+    "**/*",
+    "**/.server/**/*",
+    "**/.client/**/*",
+    ".react-router/types/**/*"
+  ],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "types": ["node", "vite/client"],
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "rootDirs": [".", "./.react-router/types"],
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./app/*"]
+    },
+    "esModuleInterop": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true
+  }
+}
diff --git a/minimal/vite.config.ts b/minimal/vite.config.ts
@@ -0,0 +1,13 @@
+import { reactRouter } from "@react-router/dev/vite";
+import tailwindcss from "tailwindcss";
+import { defineConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+  css: {
+    postcss: {
+      plugins: [tailwindcss],
+    },
+  },
+  plugins: [reactRouter(), tsconfigPaths()],
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+@tailwind base;`
	`2`	`+@tailwind components;`
	`3`	`+@tailwind utilities;`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import { type RouteConfig, index } from "@react-router/dev/routes";`
	`2`	`+`
	`3`	`+export default [index("routes/home.tsx")] satisfies RouteConfig;`