React Router CLI

Framework

The React Router CLI comes from the @react-router/dev package. Make sure it is in your package.json devDependencies so it doesn't get deployed to your server.

To get a full list of available commands and flags, run:

npx @react-router/dev -h

react-router build

Builds your app for production with Vite. This command will set process.env.NODE_ENV to production and minify the output for deployment.

react-router build

react-router dev

Runs your app in development mode with HMR and Hot Data Revalidation (HDR), powered by Vite.

react-router dev

Reverse proxies

The built-in react-router dev and vite preview servers provided by the reactRouter() Vite plugin automatically use X-Forwarded-Proto when constructing request.url. This preserves the browser-facing protocol when a reverse proxy terminates HTTPS and forwards requests over HTTP, allowing same-origin action submissions to pass origin validation. No React Router configuration is required.

The first header value is used if it is http or https (case-insensitive, with surrounding whitespace and an optional trailing : ignored). Missing or invalid values fall back to the connection's protocol. The URL host and port still come from Host, not X-Forwarded-Host or the standard Forwarded header. Preserve the browser-facing host and port in Host and configure Vite's server.allowedHosts or preview.allowedHosts as needed.

react-router reveal

React Router handles the entry points of your application by default.

If you want to have control over these entry points, you can run npx react-router reveal to generate the entry.client.tsx and entry.server.tsx files in your app directory. When these files are present, React Router will use them instead of the defaults.

npx react-router reveal

react-router routes

Prints the routes in your app to the terminal.

react-router routes

Your route tree will be in a JSX format by default. You can also use the --json flag to get the routes in a JSON format.

react-router routes --json

react-router typegen

Generates TypeScript types for your routes. This happens automatically during development, but you can manually run it when needed, e.g., to generate types in CI before running tsc. See Type Safety for more information.

react-router typegen