From 80b89909860bbf5aacddaf1b4ebf637e13d91db4 Mon Sep 17 00:00:00 2001 From: Eddie Ren Date: Tue, 16 Jan 2018 22:05:06 -0500 Subject: [PATCH] Updated react-scripts Readme.md to better document GitHub Pages hosting with custom domains --- packages/react-scripts/template/README.md | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 7c641456056..de0633d5908 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -300,7 +300,7 @@ In the WebStorm menu `Run` select `Edit Configurations...`. Then click `+` and s Start your app by running `npm start`, then press `^D` on macOS or `F9` on Windows and Linux or click the green debug icon to start debugging in WebStorm. -The same way you can debug your application in IntelliJ IDEA Ultimate, PhpStorm, PyCharm Pro, and RubyMine. +The same way you can debug your application in IntelliJ IDEA Ultimate, PhpStorm, PyCharm Pro, and RubyMine. ## Formatting Code Automatically @@ -1675,7 +1675,7 @@ Use the following [`launch.json`](https://code.visualstudio.com/docs/editor/debu "name": "Debug CRA Tests", "type": "node", "request": "launch", - "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts", + "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts", "args": [ "test", "--runInBand", @@ -1989,7 +1989,7 @@ If you’re using [Apache HTTP Server](https://httpd.apache.org/), you need to c RewriteRule ^ index.html [QSA,L] ``` -It will get copied to the `build` folder when you run `npm run build`. +It will get copied to the `build` folder when you run `npm run build`. If you’re using [Apache Tomcat](http://tomcat.apache.org/), you need to follow [this Stack Overflow answer](https://stackoverflow.com/a/41249464/4878474). @@ -2142,6 +2142,11 @@ or for a GitHub user page: "homepage": "https://myusername.github.io", ``` +or for a custom domain page: +```json + "homepage": "https://mywebsite.com", +``` + Create React App uses the `homepage` field to determine the root URL in the built HTML file. #### Step 2: Install `gh-pages` and add `deploy` to `scripts` in `package.json` @@ -2202,6 +2207,12 @@ Finally, make sure **GitHub Pages** option in your GitHub project settings is se You can configure a custom domain with GitHub Pages by adding a `CNAME` file to the `public/` folder. +Your CNAME file should look like this: + +``` +mywebsite.com +``` + #### Notes on client-side routing 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: @@ -2418,7 +2429,7 @@ To resolve this: 1. Open an issue on the dependency's issue tracker and ask that the package be published pre-compiled. * Note: Create React App can consume both CommonJS and ES modules. For Node.js compatibility, it is recommended that the main entry point is CommonJS. However, they can optionally provide an ES module entry point with the `module` field in `package.json`. Note that **even if a library provides an ES Modules version, it should still precompile other ES6 features to ES5 if it intends to support older browsers**. -2. Fork the package and publish a corrected version yourself. +2. Fork the package and publish a corrected version yourself. 3. If the dependency is small enough, copy it to your `src/` folder and treat it as application code.