DEV Community

loading...
Cover image for Deploying your ReactJS App to Github Pages

Deploying your ReactJS App to Github Pages

aralovelace profile image April Smith Updated on ・1 min read

Why host your React portfolio app with GitHub Pages?

  1. It's Free!
  2. Real time updates
  3. Making your code open-source, It is a great way to showcase your skills Custom-domain, if you have existing domain, you can add a CNAME file to your repository
  4. It's Easy!

Note: GitHub Pages is a static service and does not support server-side scripting such as, PHP, Ruby, or Python.

Here is a new quick tutorial on how to deploy your reactJS application via Github Pages. I still prefer Heroku for dynamic web apps but here is the quick guide if you have a very simple React App and wanted to deploy it quickly to add it to your Frontend Development skills portfolio

Steps:

Note: I am using yarn as my package manager.
I already created my github repo and React project

  1. Install GitHub Pages package as a dev-dependency
yarn add gh-pages 
  1. Add properties needed to package.json file
"homepage": "http://{github_username}.github.io/{your-app-repo-title}"
"scripts": {
  //...
  "predeploy": "yarn run build",
  "deploy": "gh-pages -b master -d build"
}
  1. Then Deploy it in your local terminal
yarn deploy

And Done! The branch that Github pages used is the gh-pages not the master. Everytime you deploy it will update the gh-pages branch.

You can now check your app at this URL format: http://{github_username}.github.io/{your-repo-title}

Alt Text

Discussion

pic
Editor guide
Collapse
makampos profile image
Collapse
aralovelace profile image
April Smith Author

yes it is! I love React!