project should be pushed up to a GitHub repo before following these instructions
install the gh-pages package in your project as a dev dependency
npm install gh-pages --save-dev
add homepage
field to tell React the root for the app
"homepage": "https://myusername.github.io/myreponame",
add predeploy script that will create a production build
"predeploy": "npm run build"
add deploy script that will run gh-pages with the production build
"deploy": "gh-pages -d build"
just run the following to deploy (predeploy will automatically run before the deploy)
npm run deploy
a gh-pages
branch containing the production build will be created / updated in your repo
wait a minute for the deploy to percolate, then view your app at
https://myusername.github.io/myreponame
if the app has routes, switch from using BrowserRouter to HashRouter to make the routes work properly in GitHub pages
just change this...
import { BrowserRouter as Router, Route} from 'react-router-dom';
to this...
import { HashRouter as Router, Route} from 'react-router-dom';