diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index f247a2f2f24..7c7eda4b497 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -46,6 +46,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Developing Components in Isolation](#developing-components-in-isolation) - [Making a Progressive Web App](#making-a-progressive-web-app) - [Deployment](#deployment) + - [Serving Apps with Client-Side Routing](#serving-apps-with-client-side-routing) - [Building for Relative Paths](#building-for-relative-paths) - [GitHub Pages](#github-pages) - [Heroku](#heroku) @@ -142,6 +143,8 @@ It correctly bundles React in production mode and optimizes the build for the be The build is minified and the filenames include the hashes.
Your app is ready to be deployed! +See the section about [deployment](#deployment) for more information. + ### `npm run eject` **Note: this is a one-way operation. Once you `eject`, you can’t go back!** @@ -952,7 +955,51 @@ You can turn your React app into a [Progressive Web App](https://developers.goog ## Deployment -## Building for Relative Paths +`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..js` are served with the contents of the `/static/js/main..js` file. For example, Python contains a built-in HTTP server that can serve static files: + +```sh +cd build +python -m SimpleHTTPServer 9000 +``` + +If you're using [Node](https://nodejs.org/) and [Express](http://expressjs.com/) as a server, it might look like this: + +```javascript +const express = require('express'); +const path = require('path'); +const app = express(); + +app.use(express.static('./build')); + +app.get('/', function (req, res) { + res.sendFile(path.join(__dirname, './build', 'index.html')); +}); + +app.listen(9000); +``` + +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. + +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. + +### Serving Apps with Client-Side Routing + +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. + +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: + +```diff + app.use(express.static('./build')); + +-app.get('/', function (req, res) { ++app.get('/*', function (req, res) { + res.sendFile(path.join(__dirname, './build', 'index.html')); + }); +``` + +Now requests to `/todos/42` will be handled correctly both in development and in production. + +### Building for Relative Paths By default, Create React App produces a build assuming your app is hosted at the server root.
To override this, specify the `homepage` in your `package.json`, for example: