5 Easy steps to deploy a React App in Github Pages

So you spent quite some time crafting your awesome React App 🎊, and it is time to publish it and share the love with everyone else. Github Pages is a free static site hosting service that works quite well with most use cases. Let’s learn how we can deploy a React app for free on Github pages!

Photo by Roman Synkevych on Unsplash

Prerequisite

  • Git
  • Bash shell

Steps

  1. Copy the script below and paste it in your project root, or wherever your package.json is.
  2. Update the placeholders:
    a) myapp.com to your domain, if you have one. Make sure to configure your domain’s DNS beforehand.
    b) your Github repository URL.
  3. Start a shell instance at the project root. Run the script: bash ./deploy.sh .
    If you are a Windows user, you might want to use git bash.
  4. Enable Github Pages in your Github repository settings:
    a) Go to Settings > Pages
    b) Under the source heading, select source branch to be gh-pages.
  5. That’s it! Sit back and relax. Your app should be deployed on Github Pages now.

What is happening here?

We are essentially running the build command provided by React script. The build command will compile our JavaScript files and generate optimised production static files in a build folder. Note: the build folder is regenerated every time the build command is run.

Once the command is completed, we will cd into it and initialise a git repository. This will automatically create a local master branch. We will then make a commit. After that, we will push to the gh-pages branch in our repository.

Caveat

If you are using React router, make sure to use the hash router, otherwise you may get a 404 error on your React pages. This is because we need extra configuration on the webserver in order for the browser router to work, and we don’t have access to Github Pages’ server configuration.

Web Development. https://acadea.io/learn . Follow me on Youtube: https://www.youtube.com/c/acadeaio