React Router Kitchen

Project structure

Bulletproof react

Setup

💡 You can use Yarn or pnpm as alternatives to npm

Copy .env.example

cp .env.example .env

Install node_modules

npm ci

Execute npm run setup

npm run setup

Preview (Only works with client-side rendering)

💡 Avoid using preview in production environments.

1. Build

npm run build

2. preview

npm run preview

How to serve

Client-side rendering

1. build

npm run build

2. serve build/client/

You can serve build/client/ using nginx, serve, sirv-cli...etc.

Server-side rendering

1. Setup

• react-router.config.ts

import type { Config } from "@react-router/dev/config";

export default {
  prerender: true,
-  ssr: false,
+  ssr: true,
} satisfies Config;

• package.json

+  "start": "react-router-serve ./build/server/index.js",

• install @react-router/serve

npm i @react-router/serve

• playwright.config.ts

	webServer: {
-		command: process.env.CI ? 'npm run start' : 'npm run dev',
+		command: process.env.CI ? 'npm run preview' : 'npm run dev',

2. build

npm run build

3. serve

npm run start

References

• react
• react-router
• vite
• vitest
• testing-library
• playwright
• storybook
• biome
• knip