Hosting a React App for Free using Github Pages
In this tutorial, I walk you through setting up a simple React.js application that can be hosted on Github Pages. I really like hosting here because it's free for me personally, and Github handles "server management". Once I deploy my React app and verify it's up, Github handles the traffic surges, updates, etc.
I typically use this MERN boilerplate repository repository but it has too much extra stuff specifically for a Node server. I found this repository. It's a much simpler boilerplate code base and only focuses on React. Please star, my fork so I know people are still using it. I also recommend copy the files into your repository.
The first step is verifying we have a full project and it can be run. I am assuming you have Node.js on your computer and that the environment has been used before. If not, just go to the Node.js website and download it. For me (you can be on a different version, but try to be at least later):
I copied my files over to a new empty repository so I'm first going to commit them up. GH-Pages is the npm package under the hood shipping to the build to Github Pages. GH-Pages pulls from master.
The next step is to run it locally. We need to install all dependencies with:
And we can run it locally on our computer using:
It will either open a browser or you can open
Our app is running and we have our environment setup.
Shipping to GH-Pages
Now, we will send this very simple app to GH-Pages. Run:
You can find more information about your app under the Github repository settings.
As you can probably see, there is a way to add a custom domain to a project. Skip this if you do not have one. You want to create a file called
CNAME in the route of the project. Put just the domain name without
https. For me it's:
Head over to the Github Pages settings in the settings tab. For the first time add it there too. You may need to verify domain ownership. You should also force HTTPS. On your DNS Record, you just need to add the following records:
I had one issue with this code when using the CNAME. Every time I would deploy it would remove the CNAME. I added the following to my
package.json. I had this in scripts:
And I changed it to:
This will move the CNAME file into the build. This solves the issue.
I am going to switch to local development again, but the same applies when you do a deploy to Github Pages. The other aspect that does not work out of the box is React Router for handling multiple routes.
We will setup the application to handle multiple routes. The first is moving files:
I have remove a few files that are not required for this lesson. I've moved
App.js into multiple subdirectories.
index.js to be:
App.js to be:
Home.js to be:
HelloWorld.js to be:
We are missing a few packages. We need the React Router. Run:
Now you can test it with:
Both routes worked. If this fails on the Github pages, you can add the following (I did it for my site):
Github Pages is a fantastic way to host web pages. Now you are able to do it very easily using React.
Thanks for reading!