From 38ad0c03901798b85ee0aa4930ec7b3ecff6cef1 Mon Sep 17 00:00:00 2001 From: Leo Lamprecht Date: Wed, 8 Mar 2017 08:21:00 +0100 Subject: [PATCH 1/9] Suggest `serve` for serving the `build` directory --- packages/react-scripts/scripts/build.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js index 548ff3cc68e..74b59369245 100644 --- a/packages/react-scripts/scripts/build.js +++ b/packages/react-scripts/scripts/build.js @@ -184,14 +184,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('serve')} -s build`); console.log( ` ${chalk.cyan(openCommand)} http://localhost:${process.env.PORT || 9000}` ); From 727e1d1d42df232dab06a9a5937a330ae7fdb8c5 Mon Sep 17 00:00:00 2001 From: Leo Lamprecht Date: Wed, 8 Mar 2017 08:38:17 +0100 Subject: [PATCH 2/9] How to handle it with Node in prod (or other platforms) --- packages/react-scripts/template/README.md | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index fdbd58c6fb9..d233b9c40aa 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) + - [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,26 @@ 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. + +### 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: ```sh cd build From 9fc4c28222c33fbc5665d9e28dd2018a0d68ba75 Mon Sep 17 00:00:00 2001 From: Leo Lamprecht Date: Wed, 8 Mar 2017 08:39:57 +0100 Subject: [PATCH 3/9] Pretty newline added --- packages/react-scripts/template/README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index d233b9c40aa..eb414fafe4a 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1223,7 +1223,9 @@ 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: +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 From d9dc5decd0330caf3ffc254eb8324e00f27d83f4 Mon Sep 17 00:00:00 2001 From: Leo Lamprecht Date: Wed, 8 Mar 2017 08:46:52 +0100 Subject: [PATCH 4/9] Adjusted default port of static server --- packages/react-scripts/scripts/build.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js index 74b59369245..ec3b23734f1 100644 --- a/packages/react-scripts/scripts/build.js +++ b/packages/react-scripts/scripts/build.js @@ -193,7 +193,7 @@ function build(previousFileSizes) { } 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}` ); console.log(); } From 63e3ccbd82cc56d03f64baf7955ecd5ef6e9abde Mon Sep 17 00:00:00 2001 From: Leo Lamprecht Date: Wed, 8 Mar 2017 18:01:26 +0100 Subject: [PATCH 5/9] Remove `open` command from output --- packages/react-scripts/scripts/build.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js index ec3b23734f1..0ca30e610a9 100644 --- a/packages/react-scripts/scripts/build.js +++ b/packages/react-scripts/scripts/build.js @@ -192,9 +192,6 @@ function build(previousFileSizes) { console.log(` ${chalk.cyan('npm')} install -g serve`); } console.log(` ${chalk.cyan('serve')} -s build`); - console.log( - ` ${chalk.cyan(openCommand)} http://localhost:${process.env.PORT || 3000}` - ); console.log(); } }); From 20780a2fb6dd10c4e26bdebde39934488f8c026b Mon Sep 17 00:00:00 2001 From: Leo Lamprecht Date: Wed, 8 Mar 2017 19:50:31 +0100 Subject: [PATCH 6/9] Removed constant assignment --- packages/react-scripts/scripts/build.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js index 0ca30e610a9..69f249f22a3 100644 --- a/packages/react-scripts/scripts/build.js +++ b/packages/react-scripts/scripts/build.js @@ -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; From 43df1da46d2d7a73d727c1c64ad3ba27affb3cfe Mon Sep 17 00:00:00 2001 From: Leo Lamprecht Date: Wed, 8 Mar 2017 23:12:37 +0100 Subject: [PATCH 7/9] Better explanation for not using having to use a static server --- packages/react-scripts/template/README.md | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index eb414fafe4a..11aefcad349 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -62,8 +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) + - [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) @@ -1214,7 +1214,7 @@ You can turn your React app into a [Progressive Web App](https://developers.goog `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. -### Node.js (Static) +### Static Server 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: @@ -1231,16 +1231,11 @@ Run this command to get a full list of the options available: serve -h ``` -### Other Platforms (+ Non-Static) +### Other Solutions -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: +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. -```sh -cd build -python -m SimpleHTTPServer 9000 -``` - -If you’re using [Node](https://nodejs.org/) and [Express](http://expressjs.com/) as a server, it might look like this: +Here's a programmatic example using [Node](https://nodejs.org/) and [Express](http://expressjs.com/): ```javascript const express = require('express'); @@ -1256,7 +1251,7 @@ 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. From ff2020c442e4309957c61cbeb5ed6ec4698f3f9d Mon Sep 17 00:00:00 2001 From: Leo Lamprecht Date: Wed, 8 Mar 2017 23:13:38 +0100 Subject: [PATCH 8/9] Cute newline added --- packages/react-scripts/template/README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 11aefcad349..a9fd8dfd73b 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1251,7 +1251,9 @@ app.get('/', function (req, res) { app.listen(9000); ``` -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. +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. From f3e09201d6eb92568372d78c2ce34fd0676161f5 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Wed, 8 Mar 2017 22:33:45 +0000 Subject: [PATCH 9/9] Style nits --- packages/react-scripts/template/README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index a9fd8dfd73b..933e9b0cdcb 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1216,14 +1216,14 @@ You can turn your React app into a [Progressive Web App](https://developers.goog ### Static Server -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: +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 **3000**. Like many of [serve](https://github.com/zeit/serve)'s internal settings, the port can be adjusted using the `-p` or `--port` flags. +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: @@ -1233,9 +1233,9 @@ serve -h ### 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. +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/): +Here’s a programmatic example using [Node](https://nodejs.org/) and [Express](http://expressjs.com/): ```javascript const express = require('express'); @@ -1251,7 +1251,7 @@ app.get('/', function (req, res) { app.listen(9000); ``` -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 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.