DEV Community

Cover image for Deploying your ReactJS App to Github Pages
April Smith
April Smith

Posted on • Updated on

Deploying your ReactJS App to Github Pages

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 
Enter fullscreen mode Exit fullscreen mode
  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"
}
Enter fullscreen mode Exit fullscreen mode
  1. Then Deploy it in your local terminal
yarn deploy
Enter fullscreen mode Exit fullscreen mode

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

Top comments (2)

Collapse
 
makampos profile image
Matheus de Campos

Very simple!

Collapse
 
aralovelace profile image
April Smith

yes it is! I love React!