diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js index c35d6b8f274..4c61dc93ba7 100644 --- a/packages/react-scripts/scripts/build.js +++ b/packages/react-scripts/scripts/build.js @@ -147,13 +147,19 @@ function build(previousSizeMap) { console.log('The ' + chalk.cyan('build') + ' folder is ready to be deployed.'); console.log('To publish it at ' + chalk.green(homepagePath) + ', run:'); console.log(); - console.log(' ' + chalk.cyan('git') + ' commit -am ' + chalk.yellow('"Save local changes"')); - console.log(' ' + chalk.cyan('git') + ' checkout -B gh-pages'); - console.log(' ' + chalk.cyan('git') + ' add -f build'); - console.log(' ' + chalk.cyan('git') + ' commit -am ' + chalk.yellow('"Rebuild website"')); - console.log(' ' + chalk.cyan('git') + ' filter-branch -f --prune-empty --subdirectory-filter build'); - console.log(' ' + chalk.cyan('git') + ' push -f origin gh-pages'); - console.log(' ' + chalk.cyan('git') + ' checkout -'); + console.log(' ' + chalk.cyan('npm') + ' install --save-dev gh-pages'); + console.log(); + console.log('Add the following script in your ' + chalk.cyan('package.json') + '.'); + console.log(); + console.log(' ' + chalk.dim('// ...')); + console.log(' ' + chalk.yellow('"scripts"') + ': {'); + console.log(' ' + chalk.dim('// ...')); + console.log(' ' + chalk.yellow('"deploy"') + ': ' + chalk.yellow('"gh-pages -d build"')); + console.log(' }'); + console.log(); + console.log('Then run:'); + console.log(); + console.log(' ' + chalk.cyan('npm') + ' run deploy'); console.log(); } else if (publicPath !== '/') { // "homepage": "http://mywebsite.com/project" diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 75d25b126b1..651b351892f 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -885,19 +885,29 @@ Open your `package.json` and add a `homepage` field: **The above step is important!**
Create React App uses the `homepage` field to determine the root URL in the built HTML file. -Now, whenever you run `npm run build`, you will see a cheat sheet with a sequence of commands to deploy to GitHub pages: +Now, whenever you run `npm run build`, you will see a cheat sheet with instructions on how to deploy to GitHub pages: + +To publish it at [http://myusername.github.io/my-app](http://myusername.github.io/my-app), run: ```sh -git commit -am "Save local changes" -git checkout -B gh-pages -git add -f build -git commit -am "Rebuild website" -git filter-branch -f --prune-empty --subdirectory-filter build -git push -f origin gh-pages -git checkout - +npm install --save-dev gh-pages +``` + +Add the following script in your `package.json`: + +```js + // ... + "scripts": { + // ... + "deploy": "gh-pages -d build" + } ``` -You may copy and paste them, or put them into a custom shell script. You may also customize them for another hosting provider. +Then run: + +```sh +npm run deploy +``` Note that GitHub Pages doesn't support routers that use the HTML5 `pushState` history API under the hood (for example, React Router using `browserHistory`). This is because when there is a fresh page load for a url like `http://user.github.io/todomvc/todos/42`, where `/todos/42` is a frontend route, the GitHub Pages server returns 404 because it knows nothing of `/todos/42`. If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions: * You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to `hashHistory` for this effect, but the URL will be longer and more verbose (for example, `http://user.github.io/todomvc/#/todos/42?_k=yknaj`). [Read more](https://github.com/reactjs/react-router/blob/master/docs/guides/Histories.md#histories) about different history implementations in React Router.