Skip to content

Commit 03f574c

Browse files
markdalgleishbrophdawg11
authored and
joseph0926
committed
Add docs for react-router CLI (#14148)
Co-authored-by: Matt Brophy <[email protected]>
1 parent d00ec35 commit 03f574c

File tree

1 file changed

+127
-0
lines changed

1 file changed

+127
-0
lines changed

‎docs/api/other-api/dev.md‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
---
2+
title: "@react-router/dev (CLI)"
3+
---
4+
5+
# React Router CLI
6+
7+
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.
8+
9+
To get a full list of available commands and flags, run:
10+
11+
```shellscript nonumber
12+
npx @react-router/dev -h
13+
```
14+
15+
## `react-router build`
16+
17+
Builds your app for production with [Vite][vite]. This command will set `process.env.NODE_ENV` to `production` and minify the output for deployment.
18+
19+
```shellscript nonumber
20+
react-router build
21+
```
22+
23+
| Flag | Description | Type | Default |
24+
| --------------------- | ------------------------------------------------------- | --------------------------------------------------- | ----------- |
25+
| `--assetsInlineLimit` | Static asset base64 inline threshold in bytes | `number` | `4096` |
26+
| `--clearScreen` | Allow/disable clear screen when logging | `boolean` | |
27+
| `--config`, `-c` | Use specified config file | `string` | |
28+
| `--emptyOutDir` | Force empty outDir when it's outside of root | `boolean` | |
29+
| `--logLevel`, `-l` | Use specified log level | `"info" \| "warn" \| "error" \| "silent" \| string` | |
30+
| `--minify` | Enable/disable minification, or specify minifier to use | `boolean \| "terser" \| "esbuild"` | `"esbuild"` |
31+
| `--mode`, `-m` | Set env mode | `string` | |
32+
| `--profile` | Start built-in Node.js inspector | | |
33+
| `--sourcemapClient` | Output source maps for client build | `boolean \| "inline" \| "hidden"` | `false` |
34+
| `--sourcemapServer` | Output source maps for server build | `boolean \| "inline" \| "hidden"` | `false` |
35+
36+
## `react-router dev`
37+
38+
Runs your app in development mode with HMR and Hot Data Revalidation (HDR), powered by [Vite][vite].
39+
40+
```shellscript nonumber
41+
react-router dev
42+
```
43+
44+
<docs-info>
45+
46+
What is "Hot Data Revalidation"?
47+
48+
Like HMR, HDR is a way of hot updating your app without needing to refresh the page.
49+
That way you can keep your app state as your edits are applied in your app.
50+
HMR handles client-side code updates like when you change the components, markup, or styles in your app.
51+
Likewise, HDR handles server-side code updates.
52+
53+
That means any time you make a change to the current page (or any code that your current page depends on), React Router will re-fetch data from your [loaders][loaders].
54+
That way your app is _always_ up-to-date with the latest code changes, client-side or server-side.
55+
56+
</docs-info>
57+
58+
| Flag | Description | Type | Default |
59+
| ------------------ | ----------------------------------------------------- | --------------------------------------------------- | ------- |
60+
| `--clearScreen` | Allow/disable clear screen when logging | `boolean` | |
61+
| `--config`, `-c` | Use specified config file | `string` | |
62+
| `--cors` | Enable CORS | `boolean` | |
63+
| `--force` | Force the optimizer to ignore the cache and re-bundle | `boolean` | |
64+
| `--host` | Specify hostname | `string` | |
65+
| `--logLevel`, `-l` | Use specified log level | `"info" \| "warn" \| "error" \| "silent" \| string` | |
66+
| `--mode`, `-m` | Set env mode | `string` | |
67+
| `--open` | Open browser on startup | `boolean \| string` | |
68+
| `--port` | Specify port | `number` | |
69+
| `--profile` | Start built-in Node.js inspector | | |
70+
| `--strictPort` | Exit if specified port is already in use | `boolean` | |
71+
72+
## `react-router reveal`
73+
74+
React Router handles the entry points of your application by default.
75+
76+
If you want to have control over these entry points, you can run `npx react-router reveal` to generate the [`entry.client.tsx`][entry-client] and [`entry.server.tsx`][entry-server] files in your `app` directory. When these files are present, React Router will use them instead of the defaults.
77+
78+
```shellscript nonumber
79+
npx react-router reveal
80+
```
81+
82+
| Flag | Description | Type | Default |
83+
| ----------------- | ------------------------------- | --------- | ------- |
84+
| `--config`, `-c` | Use specified config file | `string` | |
85+
| `--mode`, `-m` | Set env mode | `string` | |
86+
| `--no-typescript` | Generate plain JavaScript files | `boolean` | `false` |
87+
| `--typescript` | Generate TypeScript files | `boolean` | `true` |
88+
89+
## `react-router routes`
90+
91+
Prints the routes in your app to the terminal.
92+
93+
```shellscript nonumber
94+
react-router routes
95+
```
96+
97+
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.
98+
99+
```shellscript nonumber
100+
react-router routes --json
101+
```
102+
103+
| Flag | Description | Type | Default |
104+
| ---------------- | ---------------------------- | --------- | ------- |
105+
| `--config`, `-c` | Use specified config file | `string` | |
106+
| `--json` | Output routes in JSON format | `boolean` | `false` |
107+
| `--mode`, `-m` | Set env mode | `string` | |
108+
109+
## `react-router typegen`
110+
111+
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][type-safety] for more information.
112+
113+
```shellscript nonumber
114+
react-router typegen
115+
```
116+
117+
| Flag | Description | Type | Default |
118+
| ---------------- | ------------------------- | --------- | ------- |
119+
| `--config`, `-c` | Use specified config file | `string` | |
120+
| `--mode`, `-m` | Set env mode | `string` | |
121+
| `--watch` | Watch for changes | `boolean` | `false` |
122+
123+
[loaders]: ../../start/framework/data-loading
124+
[vite]: https://vite.dev
125+
[entry-server]: ../framework-conventions/entry.server.tsx
126+
[entry-client]: ../framework-conventions/entry.client.tsx
127+
[type-safety]: ../../explanation/type-safety

0 commit comments

Comments
 (0)