You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: packages/react-scripts/template/README.md
+48-1Lines changed: 48 additions & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -47,6 +47,7 @@ You can find the most recent version of this guide [here](https://github.com/fac
47
47
-[Developing Components in Isolation](#developing-components-in-isolation)
48
48
-[Making a Progressive Web App](#making-a-progressive-web-app)
49
49
-[Deployment](#deployment)
50
+
-[Serving Apps with Client-Side Routing](#serving-apps-with-client-side-routing)
50
51
-[Building for Relative Paths](#building-for-relative-paths)
51
52
-[GitHub Pages](#github-pages)
52
53
-[Heroku](#heroku)
@@ -143,6 +144,8 @@ It correctly bundles React in production mode and optimizes the build for the be
143
144
The build is minified and the filenames include the hashes.<br>
144
145
Your app is ready to be deployed!
145
146
147
+
See the section about [deployment](#deployment) for more information.
148
+
146
149
### `npm run eject`
147
150
148
151
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
@@ -957,7 +960,51 @@ You can turn your React app into a [Progressive Web App](https://developers.goog
957
960
958
961
## Deployment
959
962
960
-
## Building for Relative Paths
963
+
`npm run build` creates a `build` directory with a production build of your app. Set up your favourite HTTP server so that a visitor to your site is served `index.html`, and requests to static paths like `/static/js/main.<hash>.js` are served with the contents of the `/static/js/main.<hash>.js` file. For example, Python contains a built-in HTTP server that can serve static files:
964
+
965
+
```sh
966
+
cd build
967
+
python -m SimpleHTTPServer 9000
968
+
```
969
+
970
+
If you're using [Node](https://nodejs.org/) and [Express](http://expressjs.com/) as a server, it might look like this:
Create React App is not opinionated about your choice of web server. Any static file server will do. The `build` folder with static assets is the only output produced by Create React App.
987
+
988
+
However this is not quite enough if you use client-side routing. Read the next section if you want to support URLs like `/todos/42` in your single-page app.
989
+
990
+
### Serving Apps with Client-Side Routing
991
+
992
+
If you use routers that use the HTML5 [`pushState` history API](https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries) under the hood (for example, [React Router](https://github.com/ReactTraining/react-router) with `browserHistory`), many static file servers will fail. For example, if you used React Router with a route for `/todos/42`, the development server will respond to `localhost:3000/todos/42` properly, but an Express serving a production build as above will not.
993
+
994
+
This is because when there is a fresh page load for a `/todos/42`, the server looks for the file `build/todos/42` and does not find it. The server needs to be configured to respond to a request to `/todos/42` by serving `index.html`. For example, we can amend our Express example above to serve `index.html` for any unknown paths:
0 commit comments