From 23d6fbba78b5cfeb7f844df09323264e45fce260 Mon Sep 17 00:00:00 2001 From: Leo Lamprecht Date: Wed, 8 Mar 2017 23:34:31 +0100 Subject: [PATCH] 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 --- packages/react-scripts/scripts/build.js | 10 +++----- packages/react-scripts/template/README.md | 30 +++++++++++++++++++---- 2 files changed, 29 insertions(+), 11 deletions(-) diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js index 7e22a8f795d..63c88120af8 100644 --- a/packages/react-scripts/scripts/build.js +++ b/packages/react-scripts/scripts/build.js @@ -89,7 +89,6 @@ function build(previousFileSizes) { printFileSizesAfterBuild(stats, previousFileSizes); console.log(); - var openCommand = process.platform === 'win32' ? 'start' : 'open'; var appPackage = require(paths.appPackageJson); var publicUrl = paths.publicUrl; var publicPath = config.output.publicPath; @@ -148,15 +147,14 @@ function build(previousFileSizes) { } var 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(); } }); diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 23ce6328f5d..a5203365f51 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -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) @@ -1208,14 +1210,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..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: +`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. + +### 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'); @@ -1231,7 +1249,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.