-
-
Notifications
You must be signed in to change notification settings - Fork 26.9k
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
Changes from 4 commits
38ad0c0
727e1d1
9fc4c28
d9dc5de
63e3ccb
20780a2
43df1da
ff2020c
f3e0920
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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) | ||
|
@@ -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: | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. My only concern here is There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Done! 👍 |
||
|
||
```sh | ||
cd build | ||
|
There was a problem hiding this comment.
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.There was a problem hiding this comment.
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:
And that's how it looks when the default port is already in use AND no
--port
is specified:There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
OK, that looks cool.