Skip to content

Commit

Permalink
Suggest serve for running in production (facebook#1760)
Browse files Browse the repository at this point in the history
* Suggest `serve` for serving the `build` directory

* How to handle it with Node in prod (or other platforms)

* Pretty newline added

* Adjusted default port of static server

* Remove `open` command from output

* Removed constant assignment

* Better explanation for not using having to use a static server

* Cute newline added

* Style nits
  • Loading branch information
leo authored and gaearon committed Mar 8, 2017
1 parent 87bcf90 commit 428cd4b
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 13 deletions.
12 changes: 4 additions & 8 deletions scripts/build.js
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,6 @@ function build(previousFileSizes) {
printFileSizesAfterBuild(stats, previousFileSizes);
console.log();

const openCommand = process.platform === 'win32' ? 'start' : 'open';
const appPackage = require(paths.appPackageJson);
const publicUrl = paths.publicUrl;
const publicPath = config.output.publicPath;
Expand Down Expand Up @@ -184,17 +183,14 @@ function build(previousFileSizes) {
}
const build = path.relative(process.cwd(), paths.appBuild);
console.log(`The ${chalk.cyan(build)} folder is ready to be deployed.`);
console.log('You may also serve it locally with a static server:');
console.log('You may serve it with a static server:');
console.log();
if (useYarn) {
console.log(` ${chalk.cyan('yarn')} global add pushstate-server`);
console.log(` ${chalk.cyan('yarn')} global add serve`);
} else {
console.log(` ${chalk.cyan('npm')} install -g pushstate-server`);
console.log(` ${chalk.cyan('npm')} install -g serve`);
}
console.log(` ${chalk.cyan('pushstate-server')} build`);
console.log(
` ${chalk.cyan(openCommand)} http://localhost:${process.env.PORT || 9000}`
);
console.log(` ${chalk.cyan('serve')} -s build`);
console.log();
}
});
Expand Down
30 changes: 25 additions & 5 deletions template/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,8 @@ 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)
- [Static Server](#static-server)
- [Other Solutions](#other-solutions)
- [Serving Apps with Client-Side Routing](#serving-apps-with-client-side-routing)
- [Building for Relative Paths](#building-for-relative-paths)
- [Azure](#azure)
Expand Down Expand Up @@ -1210,14 +1212,30 @@ You can turn your React app into a [Progressive Web App](https://developers.goog

## Deployment

`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:
`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.

### Static Server

For environments using [Node](https://nodejs.org/), the easiest way to handle this would be to install [serve](https://github.com/zeit/serve) and let it handle the rest:

```sh
npm install -g serve
serve -s build
```

The last command shown above will serve your static site on the port **5000**. Like many of [serve](https://github.com/zeit/serve)’s internal settings, the port can be adjusted using the `-p` or `--port` flags.

Run this command to get a full list of the options available:

```sh
cd build
python -m SimpleHTTPServer 9000
serve -h
```

If you’re using [Node](https://nodejs.org/) and [Express](http://expressjs.com/) as a server, it might look like this:
### Other Solutions

You don’t necessarily need a static server in order to run a Create React App project in production. It works just as fine integrated into an existing dynamic one.

Here’s a programmatic example using [Node](https://nodejs.org/) and [Express](http://expressjs.com/):

```javascript
const express = require('express');
Expand All @@ -1233,7 +1251,9 @@ app.get('/', function (req, res) {
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.
The choice of your server software isn’t important either. Since Create React App is completely platform-agnostic, there’s no need to explicitly use Node.

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.

Expand Down

0 comments on commit 428cd4b

Please sign in to comment.