deploy_to_gh_pages.md

How to deploy React app to GitHub Pages

Install the gh-pages package as a "dev-dependency" of the app.

$ npm install gh-pages --save-dev

• The commands shown in the following steps can all be issued from within the app's folder.

Add some properties to the app's package.json file.

• At the top level, add a homepage property. Define its value to be the string http://{username}.github.io/{repo-name}, where {username} is your GitHub username, and {repo-name} is the name of the GitHub repository you created in step 1. Since my GitHub username is gitname and the name of my GitHub repository is react-gh-pages, I added the following property:

    "homepage": "http://gitname.github.io/react-gh-pages"

• In the existing scripts property, add a predeploy property and a deploy property, each having the values shown below:

   "scripts": {
     //...
     "predeploy": "npm run build",
     "deploy": "gh-pages -d build"
   }

Commit your source code to the "master" branch and push your commit to GitHub.

    $ git add .
    $ git commit -m "Add to gh pages"
    $ git push origin master

Create a build and publish - run the next two lines from your command line

    $ npm run build
    $ npm run deploy

• your project should now be available at the address in your package.json file under the value of the "homepage" key

NOTE: It can take several minutes for your code to upload to GH servers after running the deploy command