Skip to content

Commit 394e834

Browse files
ldctalexdriaguine
authored andcommitted
Document what npm build does and pushState (facebook#933)
* Document what npm build does and pushState * Fix typos, add express example * Tweaks * Update README.md
1 parent 2026c56 commit 394e834

File tree

1 file changed

+48
-1
lines changed

1 file changed

+48
-1
lines changed

packages/react-scripts/template/README.md

Lines changed: 48 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ You can find the most recent version of this guide [here](https://github.com/fac
4747
- [Developing Components in Isolation](#developing-components-in-isolation)
4848
- [Making a Progressive Web App](#making-a-progressive-web-app)
4949
- [Deployment](#deployment)
50+
- [Serving Apps with Client-Side Routing](#serving-apps-with-client-side-routing)
5051
- [Building for Relative Paths](#building-for-relative-paths)
5152
- [GitHub Pages](#github-pages)
5253
- [Heroku](#heroku)
@@ -143,6 +144,8 @@ It correctly bundles React in production mode and optimizes the build for the be
143144
The build is minified and the filenames include the hashes.<br>
144145
Your app is ready to be deployed!
145146

147+
See the section about [deployment](#deployment) for more information.
148+
146149
### `npm run eject`
147150

148151
**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
957960
958961
## Deployment
959962
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:
971+
972+
```javascript
973+
const express = require('express');
974+
const path = require('path');
975+
const app = express();
976+
977+
app.use(express.static('./build'));
978+
979+
app.get('/', function (req, res) {
980+
res.sendFile(path.join(__dirname, './build', 'index.html'));
981+
});
982+
983+
app.listen(9000);
984+
```
985+
986+
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:
995+
996+
```diff
997+
app.use(express.static('./build'));
998+
999+
-app.get('/', function (req, res) {
1000+
+app.get('/*', function (req, res) {
1001+
res.sendFile(path.join(__dirname, './build', 'index.html'));
1002+
});
1003+
```
1004+
1005+
Now requests to `/todos/42` will be handled correctly both in development and in production.
1006+
1007+
### Building for Relative Paths
9611008
9621009
By default, Create React App produces a build assuming your app is hosted at the server root.<br>
9631010
To override this, specify the `homepage` in your `package.json`, for example:

0 commit comments

Comments
 (0)