Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Suggest serve for running in production #1760

Merged
merged 9 commits into from
Mar 8, 2017
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions packages/react-scripts/scripts/build.js
Original file line number Diff line number Diff line change
Expand Up @@ -184,16 +184,16 @@ 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('serve')} -s build`);
console.log(
` ${chalk.cyan(openCommand)} http://localhost:${process.env.PORT || 9000}`
` ${chalk.cyan(openCommand)} http://localhost:${process.env.PORT || 3000}`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is 3000 the default? It might be confusing for our users who already have npm start running on 3000 by default, and want to test their production build without stopping the devserver.

Copy link
Contributor Author

@leo leo Mar 8, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@gaearon Another great thing about serve is that it cares about the port already being in use. If it is, it will show a big red message and use an open one. The URL will be copied to the clipboard automatically in addition.

As the last great thing, it will also show the URL on the network.

Here's how it looks by default:

screen shot 2017-03-08 at 15 40 50

And that's how it looks when the default port is already in use AND no --port is specified:

screen shot 2017-03-08 at 15 41 09

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK, that looks cool.

);
console.log();
}
Expand Down
25 changes: 24 additions & 1 deletion packages/react-scripts/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)
- [Node.js (Static)](#nodejs-static)
- [Other Platforms (+ Non-Static)](#other-platforms--non-static)
- [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,7 +1212,28 @@ 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.

### Node.js (Static)

For environments using Node.js, 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 **3000**. 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
serve -h
```

### Other Platforms (+ Non-Static)

You don't necessarily need Node.js or a static webserver in order to run a `create-react-app` project in production. For example, Python contains a built-in HTTP server that can serve static files:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My only concern here is SimpleHTTPServer isn't really meant for production. Do you think there's a good way to reword it, or an alternative example that would fit better?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done! 👍


```sh
cd build
Expand Down