Client app setup

The client app uses React Router v7.

Since v7, React Router uses Vite as the default bundler. The template comes with a vite.config.ts file that is configured to use React Router (@react-router/dev), Tailwindcss v4 (@tailwindcss/vite) and TypeScript (vite-tsconfig-paths):

vite.config.ts
import tailwindcss from "@tailwindcss/vite";
import { reactRouter } from "@react-router/dev/vite";
import tsconfigPaths from "vite-tsconfig-paths";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
});

The only folder inside the initial template is app:

  • root.tsx: entry point of the app
  • routes.ts: routes definition (@react-router/dev)
  • app.css: entry point for tailwindcss v4 styles
  • routes: folder containing the implementation of each route component
Initial minimal client app structure, containing only a single route and the main configuration files for layout and styles.
Initial minimal client app structure, containing only a single route and the main configuration files for layout and styles.

The template comes with all the basic scripts already configured inside package.json:

package.json
"scripts": {
  "dev": "react-router dev",
  "build": "react-router build",
  "start": "react-router-serve ./build/server/index.js",
  "typecheck": "react-router typegen && tsc"
}