How to deploy React app in GitHub pages when using WebStorm

1. Create a repository in GitHub (or identify an existing one).
2. Edit package.json:
   1. Add a homepage property to the top level:

      "name":...
      "version":...
      "property:...
      "homepage":"http://{username}.github.io/{repo-name}"
      

   2. Add some new npm scripts to the existing scripts property:

      "scripts": {
        // existing stuff
        "install gh-pages": "npm install gh-pages --save-dev",
        "predeploy": "npm run build",
        "deploy": "gh-pages -d build"
      }
      

3. Install gh-pages package:
   1. Click on npm tab.
   2. Click on Reload button at top of npm pane.
   3. Double-click on "install gh-pages"

      That'll install the gh-pages package. It may take time as that downloads.

4. Setup your local git repository to point to your GitHub repository.
   1. Get your GitHub repo URL (click on Code button in GitHub). The URL should be something like: git@github.com:{username}/{reponame}.git.
   2. In the Terminal window in WebStorm, execute

      git remote add origin git@github.com:{username}/{reponame}.git
      

5. Double-click deploy in the npm panel of WebStorm.

   That'll build the package and then push to GitHub. On success, it'll print "Published" in the Run pane.

6. In Github, go to Settings/Pages and verify that the Source branch is set to gh-pages. If it isn't, go ahead and change the Source branch to gh-pages.