Skip to content

Instantly share code, notes, and snippets.

@mikepianka
Last active November 6, 2020 03:22
Show Gist options
  • Save mikepianka/1d33d99008c36cb9b24b637ceb2b1ea5 to your computer and use it in GitHub Desktop.
Save mikepianka/1d33d99008c36cb9b24b637ceb2b1ea5 to your computer and use it in GitHub Desktop.
Auto Deploy React app to GitHub Pages

Auto deploy React app to GitHub Pages

project should be pushed up to a GitHub repo before following these instructions

install gh-pages

install the gh-pages package in your project as a dev dependency

npm install gh-pages --save-dev

edit package.json

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"

deploy to GitHub Pages

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...

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';

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment