Remix / React Router v7

A React Router v7 template in Framework mode (the next iteration of Remix). Loaders, components, and the root layout live under app/; ReScript provides both the home loader and the Greet component. SSR is on by default through @react-router/dev’s Vite plugin and runs in production via @react-router/serve.

Generated layout

app/
├── root.tsx
├── routes.ts
├── routes/
│   └── home.tsx
├── components/
│   └── Greet.res
├── loaders/
│   └── HomeLoader.res
└── __tests__/
    └── Greet.test.mjs
vite.config.ts
react-router.config.ts
tsconfig.json
rescript.json
package.json

Key files

• app/root.tsx — Defines the Layout and the App shell shared by every route.

• app/routes.ts — Explicit route registry using helpers from @react-router/dev/routes. Mounts routes/home.tsx as index.

• app/routes/home.tsx — Home route. Uses the typed Route namespace generated by react-router typegen; consumes the ReScript loader and component through their compiled .res.mjs artifacts.

• app/loaders/HomeLoader.res — Sample loader written in ReScript so the route can keep its TSX glue thin and unit-test the loader on its own.

• vite.config.ts — Just the reactRouter() plugin — @vitejs/plugin-react is unnecessary because the router plugin already configures the React refresh runtime.

npm scripts

Command	Description
dev	Start react-router dev with rescript -w.
build	Compile ReScript and run react-router build.
start	Serve the production bundle through @react-router/serve.
typecheck	Generate route types and run tsc --noEmit.
test	Run Vitest.

Day-two pointers

• Add routes — extend app/routes.ts with route(":id", "routes/show.tsx"), layout("routes/dashboard.tsx", [...]), etc. Run pnpm typecheck after edits to refresh the typed +types/... modules.

• Add actions — export export async function action(args: Route.ActionArgs) from a route file and post to it from a <Form method="post">.

• Switch to SPA mode — set ssr: false in react-router.config.ts for client-only deployments.