From 4473863b7362859fae38b5bd8f5e7a6d4033db67 Mon Sep 17 00:00:00 2001 From: David Ernst Date: Tue, 25 Oct 2016 04:21:00 -0700 Subject: [PATCH 1/5] Always build before deploying to gh-pages --- packages/react-scripts/template/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 6f13b12d2e0..39369d9a6c0 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -901,7 +901,7 @@ Add the following script in your `package.json`: // ... "scripts": { // ... - "deploy": "gh-pages -d build" + "deploy": "npm run build && gh-pages -d build" } ``` From 776f370a38638e44b2eb23b41cf33d204d953557 Mon Sep 17 00:00:00 2001 From: David Ernst Date: Tue, 25 Oct 2016 04:29:32 -0700 Subject: [PATCH 2/5] Add line to gh-pages deploy docs about CNAME file --- packages/react-scripts/template/README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 39369d9a6c0..0954b2ed045 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -915,6 +915,8 @@ Note that GitHub Pages doesn't support routers that use the HTML5 `pushState` hi * 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. * Alternatively, you can use a trick to teach GitHub Pages to handle 404 by redirecting to your `index.html` page with a special redirect parameter. You would need to add a `404.html` file with the redirection code to the `build` folder before deploying your project, and you’ll need to add code handling the redirect parameter to `index.html`. You can find a detailed explanation of this technique [in this guide](https://github.com/rafrex/spa-github-pages). +You can configure a custom domain with GitHub pages, by adding a `CNAME` file to the `public/` folder. + ### Heroku Use the [Heroku Buildpack for Create React App](https://github.com/mars/create-react-app-buildpack).
From 58b22fb702bbbc6ebc80e3178d0cd4f2eb9636c1 Mon Sep 17 00:00:00 2001 From: David Ernst Date: Thu, 27 Oct 2016 23:27:43 -0700 Subject: [PATCH 3/5] Remove spaces in npm run command for Windows --- packages/react-scripts/template/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 0954b2ed045..2f44ca477b1 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -901,7 +901,7 @@ Add the following script in your `package.json`: // ... "scripts": { // ... - "deploy": "npm run build && gh-pages -d build" + "deploy": "npm run build&&gh-pages -d build" } ``` From 4d148cb06fcf625f3010300feeeb3afecdc649c1 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Fri, 28 Oct 2016 13:49:28 +0100 Subject: [PATCH 4/5] Grammar nit --- packages/react-scripts/template/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 2f44ca477b1..bbe021198bf 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -915,7 +915,7 @@ Note that GitHub Pages doesn't support routers that use the HTML5 `pushState` hi * 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. * Alternatively, you can use a trick to teach GitHub Pages to handle 404 by redirecting to your `index.html` page with a special redirect parameter. You would need to add a `404.html` file with the redirection code to the `build` folder before deploying your project, and you’ll need to add code handling the redirect parameter to `index.html`. You can find a detailed explanation of this technique [in this guide](https://github.com/rafrex/spa-github-pages). -You can configure a custom domain with GitHub pages, by adding a `CNAME` file to the `public/` folder. +You can configure a custom domain with GitHub pages by adding a `CNAME` file to the `public/` folder. ### Heroku From c53e77f910216aa6480bfa0ddce15ea6d9a3244d Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Fri, 28 Oct 2016 13:50:56 +0100 Subject: [PATCH 5/5] Minor tweaks --- packages/react-scripts/template/README.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index bbe021198bf..d34ef0e7c74 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -887,7 +887,7 @@ 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 instructions on how 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: @@ -905,18 +905,20 @@ Add the following script in your `package.json`: } ``` +(Note: the lack of whitespace is intentional.) + Then run: ```sh npm run deploy ``` +You can configure a custom domain with GitHub Pages by adding a `CNAME` file to the `public/` folder. + 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. * Alternatively, you can use a trick to teach GitHub Pages to handle 404 by redirecting to your `index.html` page with a special redirect parameter. You would need to add a `404.html` file with the redirection code to the `build` folder before deploying your project, and you’ll need to add code handling the redirect parameter to `index.html`. You can find a detailed explanation of this technique [in this guide](https://github.com/rafrex/spa-github-pages). -You can configure a custom domain with GitHub pages by adding a `CNAME` file to the `public/` folder. - ### Heroku Use the [Heroku Buildpack for Create React App](https://github.com/mars/create-react-app-buildpack).