Client app setup

The client app uses React Router v7 (prerelease). The structure is based on the basic template maintained by React Router:

npx degit remix-run/react-router/templates/basic#dev client

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/vite), 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/routes)
  • 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"
}