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!
- Bash shell
- Copy the script below and paste it in your project root, or wherever your
- 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.
- Start a shell instance at the project root. Run the script:
If you are a Windows user, you might want to use git bash.
- Enable Github Pages in your Github repository settings:
a) Go to Settings > Pages
b) Under the source heading, select source branch to be
- 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 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.
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.