Skip to content

Commit f4a4e8f

Browse files
leogaearon
authored andcommitted
Suggest serve for running in production (#1760)
* 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
1 parent 06086f9 commit f4a4e8f

File tree

2 files changed

+29
-11
lines changed

2 files changed

+29
-11
lines changed

packages/react-scripts/scripts/build.js

+4-6
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,6 @@ function build(previousFileSizes) {
8989
printFileSizesAfterBuild(stats, previousFileSizes);
9090
console.log();
9191

92-
var openCommand = process.platform === 'win32' ? 'start' : 'open';
9392
var appPackage = require(paths.appPackageJson);
9493
var publicUrl = paths.publicUrl;
9594
var publicPath = config.output.publicPath;
@@ -148,15 +147,14 @@ function build(previousFileSizes) {
148147
}
149148
var build = path.relative(process.cwd(), paths.appBuild);
150149
console.log('The ' + chalk.cyan(build) + ' folder is ready to be deployed.');
151-
console.log('You may also serve it locally with a static server:')
150+
console.log('You may serve it with a static server:');
152151
console.log();
153152
if (useYarn) {
154-
console.log(' ' + chalk.cyan('yarn') + ' global add pushstate-server');
153+
console.log(` ${chalk.cyan('yarn')} global add serve`);
155154
} else {
156-
console.log(' ' + chalk.cyan('npm') + ' install -g pushstate-server');
155+
console.log(` ${chalk.cyan('npm')} install -g serve`);
157156
}
158-
console.log(' ' + chalk.cyan('pushstate-server') + ' ' + build);
159-
console.log(' ' + chalk.cyan(openCommand) + ' http://localhost:' + (process.env.PORT || 9000));
157+
console.log(` ${chalk.cyan('serve')} -s build`);
160158
console.log();
161159
}
162160
});

packages/react-scripts/template/README.md

+25-5
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,8 @@ You can find the most recent version of this guide [here](https://github.com/fac
6262
- [Developing Components in Isolation](#developing-components-in-isolation)
6363
- [Making a Progressive Web App](#making-a-progressive-web-app)
6464
- [Deployment](#deployment)
65+
- [Static Server](#static-server)
66+
- [Other Solutions](#other-solutions)
6567
- [Serving Apps with Client-Side Routing](#serving-apps-with-client-side-routing)
6668
- [Building for Relative Paths](#building-for-relative-paths)
6769
- [Azure](#azure)
@@ -1208,14 +1210,30 @@ You can turn your React app into a [Progressive Web App](https://developers.goog
12081210

12091211
## Deployment
12101212

1211-
`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:
1213+
`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.
1214+
1215+
### Static Server
1216+
1217+
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:
1218+
1219+
```sh
1220+
npm install -g serve
1221+
serve -s build
1222+
```
1223+
1224+
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.
1225+
1226+
Run this command to get a full list of the options available:
12121227

12131228
```sh
1214-
cd build
1215-
python -m SimpleHTTPServer 9000
1229+
serve -h
12161230
```
12171231

1218-
If you’re using [Node](https://nodejs.org/) and [Express](http://expressjs.com/) as a server, it might look like this:
1232+
### Other Solutions
1233+
1234+
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.
1235+
1236+
Here’s a programmatic example using [Node](https://nodejs.org/) and [Express](http://expressjs.com/):
12191237

12201238
```javascript
12211239
const express = require('express');
@@ -1231,7 +1249,9 @@ app.get('/', function (req, res) {
12311249
app.listen(9000);
12321250
```
12331251

1234-
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.
1252+
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.
1253+
1254+
The `build` folder with static assets is the only output produced by Create React App.
12351255

12361256
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.
12371257

0 commit comments

Comments
 (0)