refactor: routing

.github/workflows/lighthouse.yml

@@ -3,9 +3,6 @@ name: Lighthouse CI
 on:
   push:
 
-env:
-  VITE_GROWTH_BOOK_KEY: ${{ secrets.VITE_GROWTH_BOOK_KEY }}
-
 jobs:
   lighthouseci:
     runs-on: ubuntu-latest
@@ -27,6 +24,8 @@ jobs:
         run: pnpm install --frozen-lockfile && pnpm add -g @lhci/[email protected]
       - name: Build
         run: pnpm run build
+        env:
+          VITE_GROWTH_BOOK_KEY: ${{ secrets.VITE_GROWTH_BOOK_KEY }}
       - run: lhci autorun
         env:
           LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}

.gitignore

@@ -9,8 +9,9 @@
 # Node modules
 node_modules/
 
-# Build
+# Artifacts
 dist/
+build/
 
 # TypeScript build
 tsconfig.tsbuildinfo
@@ -27,6 +28,7 @@ storybook-static/
 # Test Coverage
 coverage/
 
+# React router
 .react-router/
 
 # Playwright

.vscode/extensions.json

@@ -2,6 +2,8 @@
   "recommendations": [
     "bradlc.vscode-tailwindcss",
     "esbenp.prettier-vscode",
-    "github.vscode-github-actions"
+    "github.vscode-github-actions",
+    "github.vscode-pull-request-github",
+    "dbaeumer.vscode-eslint"
   ]
 }

README.md

@@ -6,18 +6,63 @@ The app allows you to browse your news feed, add new posts, edit and delete them
 
 - React
 - TypeScript
+- [React Router](https://reactrouter.com/)
 - daisyUI & TailwindCSS
 - Dexie.js (indexedDB wrapper)
 - Storybook
 
-## Contribution
+## Getting Started
 
-    $ pnpm install
-    $ pnpm run dev
+### Installation
 
-## Production build
+Install the dependencies:
 
-    $ pnpm run build
+```sh
+pnpm install
+```
+
+### Development
+
+Start the development server with HMR:
+
+```sh
+pnpm run dev
+```
+
+Your application will be available at `http://localhost:5173`.
+
+## Building for Production
+
+Create a production build:
+
+```sh
+pnpm run build
+```
+
+## Deployment
+
+### Docker Deployment
+
+This template includes a Dockerfile optimized for the pnpm package manager: `Dockerfile.pnpm`
+
+To build and run using Docker:
+
+```sh
+# For pnpm
+docker build -f apps/client/Dockerfile.pnpm -t app-client .
+
+# Run the container
+docker run -p 3000:3000 app-client
+```
+
+The containerized application can be deployed to any platform that supports Docker, including:
+
+- AWS ECS
+- Google Cloud Run
+- Azure Container Apps
+- Digital Ocean App Platform
+- Fly.io
+- Railway
 
 ## NX
 

apps/client/.dockerignore

@@ -0,0 +1,5 @@
+.react-router
+dist
+build
+node_modules
+README.md

apps/client/Dockerfile.pnpm

@@ -0,0 +1,26 @@
+FROM node:22-alpine AS dependencies-env
+RUN npm i -g pnpm
+COPY . /app
+
+FROM dependencies-env AS development-dependencies-env
+COPY ./package.json pnpm-lock.yaml /app/
+WORKDIR /app
+RUN pnpm i --frozen-lockfile
+
+FROM dependencies-env AS production-dependencies-env
+COPY ./package.json pnpm-lock.yaml /app/
+WORKDIR /app
+RUN pnpm i --prod --frozen-lockfile
+
+FROM dependencies-env AS build-env
+COPY ./package.json pnpm-lock.yaml /app/
+COPY --from=development-dependencies-env /app/node_modules /app/node_modules
+WORKDIR /app
+RUN pnpm build
+
+FROM dependencies-env
+COPY ./package.json pnpm-lock.yaml /app/
+COPY --from=production-dependencies-env /app/node_modules /app/node_modules
+COPY --from=build-env /app/build /app/build
+WORKDIR /app
+CMD ["pnpm", "start"]

apps/client/app/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: false,
+} satisfies Config;

apps/client/app/root.tsx

@@ -0,0 +1,77 @@
+import {
+  isRouteErrorResponse,
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  type ErrorResponse,
+} from 'react-router';
+
+// import type { Route } from './+types/root';
+// import stylesheet from './app.css?url';
+
+export const links = () => [
+  { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
+  {
+    rel: 'preconnect',
+    href: 'https://fonts.gstatic.com',
+    crossOrigin: 'anonymous',
+  },
+  {
+    rel: 'stylesheet',
+    href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
+  },
+  { rel: 'stylesheet' },
+];
+
+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 }: { error: ErrorResponse | Error }) {
+  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="container mx-auto p-4 pt-16">
+      <h1>{message}</h1>
+      <p>{details}</p>
+      {stack && (
+        <pre className="w-full overflow-x-auto p-4">
+          <code>{stack}</code>
+        </pre>
+      )}
+    </main>
+  );
+}

apps/client/app/routes.ts

@@ -0,0 +1,4 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { type RouteConfig, index } from '@react-router/dev/routes';
+
+export default [index('routes/home.tsx')] satisfies RouteConfig;

apps/client/app/routes/home.tsx

@@ -0,0 +1,13 @@
+// import { Welcome } from '../welcome/welcome';
+
+export function meta() {
+  return [
+    { title: 'New React Router App' },
+    { name: 'description', content: 'Welcome to React Router!' },
+  ];
+}
+
+export default function Home() {
+  // return <Welcome />;
+  return <div />;
+}

apps/client/package.json

@@ -22,7 +22,8 @@
   "author": "pure-js",
   "devDependencies": {
     "@playwright/test": "^1.49.1",
-    "@tailwindcss/typography": "^0.5.7",
+    "@react-router/dev": "^7.1.1",
+    "@types/node": "22",
     "@types/react": "^19.0.1",
     "@types/react-dom": "^19.0.1",
     "@types/uuid": "^9.0.0",
@@ -37,7 +38,7 @@
     "browserslist": "~4.22.1",
     "chromatic": "~9.0.0",
     "cssnano": "^6.0.1",
-    "eslint": "^8.57.0",
+    "eslint": "^8.57.1",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.1.0",
     "eslint-config-love": "~43.1.0",
@@ -60,17 +61,22 @@
     "typescript": "^5.7.2",
     "vite": "^6.0.1",
     "vite-plugin-pwa": "^0.21.1",
+    "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^2.0.5"
   },
   "dependencies": {
     "@growthbook/growthbook-react": "^0.20.0",
+    "@react-router/node": "^7.1.1",
+    "@react-router/serve": "^7.1.1",
+    "@tailwindcss/typography": "^0.5.15",
     "@vanilla-extract/css": "^1.15.5",
     "daisyui": "^4.12.14",
     "dexie": "^4.0.8",
     "dexie-react-hooks": "^1.1.7",
+    "isbot": "^5",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router": "^7.0.2",
+    "react-router": "^7.1.1",
     "theme-change": "^2.5.0",
     "uuid": "^9.0.0"
   },

apps/client/tailwind.config.ts

@@ -0,0 +1,27 @@
+/* eslint-disable global-require */
+import type { Config } from 'tailwindcss';
+
+export default {
+  content: ['./app/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}'],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: [
+          '"Inter"',
+          'ui-sans-serif',
+          'system-ui',
+          'sans-serif',
+          '"Apple Color Emoji"',
+          '"Segoe UI Emoji"',
+          '"Segoe UI Symbol"',
+          '"Noto Color Emoji"',
+        ],
+      },
+    },
+  },
+  plugins: [require('@tailwindcss/typography'), require('daisyui')],
+  daisyui: {
+    themes: ['forest', 'winter'],
+  },
+  darkMode: ['class', '[data-theme="forest"]'],
+} satisfies Config;

apps/client/tsconfig.json

@@ -6,5 +6,12 @@
       "~/*": ["./app/*"]
     }
   },
-  "include": ["app", "./vite-env.d.ts"]
+  "include": [
+    "./app",
+    "./vite-env.d.ts",
+    "**/.server/**/*",
+    "**/.client/**/*",
+    ".react-router/types/**/*"
+  ],
+  "types": ["node", "vite/client"]
 }

apps/client/vite.config.ts

@@ -1,4 +1,10 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable import/no-extraneous-dependencies */
+// import { reactRouter } from '@react-router/dev/vite';
+// import autoprefixer from 'autoprefixer';
+// import tailwindcss from 'tailwindcss';
+// import tsconfigPaths from 'vite-tsconfig-paths';
+
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
@@ -26,6 +32,8 @@ export default defineConfig({
       },
     }),
     vanillaExtractPlugin(),
+    // reactRouter(),
+    // tsconfigPaths(),
     VitePWA(),
   ],
   define: {

apps/docs/tsconfig.app.json

@@ -6,6 +6,7 @@
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
 
     /* Bundler mode */
     "moduleResolution": "bundler",

apps/docs/tsconfig.node.json

@@ -1,10 +1,11 @@
 {
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2022",
-    "lib": ["ES2023"],
+    "target": "ESNext",
+    "lib": ["ESNext"],
     "module": "ESNext",
     "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
 
     /* Bundler mode */
     "moduleResolution": "bundler",