Deploying React Website with Git Pages
Deployment has always been a source of headache for me. After I spend days working on a particular project, I find myself struggling to deploy it. As a cheapskate, I refuse to fork out money to deploy my application. Fortunately, there is something called Git pages which is free of charge and allows free website hosting! The only pre-requisite is that one needs to own a GitHub account and as far as I know, one account is entitled to one free hosting domain.
Assuming you are roughly familiar with React and own a GitHub account…..this post serves to document the tries I did while trying to deploy my own application. Hopefully, it will be of some help to someone :)
Initial Failed Try:
The GitHub documentation for this feature is found in this link. However, I find it to be not very detailed. After I followed the instructions in the link, my website did not seem to be deployed. It only showed me the static README.md page and not my website!! I wasn’t sure why….but after reading some posts on Stack overflow, I think it was because my index.html was placed inside a sub-folder called public and git pages was unable to detect the file index.html at the root level.
Therefore, I decided to place index.html in the root directory (same level as README.md) instead of being inside the sub-folder public. This helped in making sure that the README.md contents were not displayed and when I checked my supposedly-deployed website, it did render the contents of my index.html.
However, this led to another problem because I wanted to display index.jsx which was placed inside another sub folder called src and not index.html :(
For a while, I wondered how does the index.html get linked to the index.jsx…..Why was it that when I started the react project locally, it was able to display index.jsx contents and not index.html? Why is the deployment environment making the code fail?
Initially, I thought that I had to add line 21 and 22. Somehow adding a script tag and referring the index.jsx inside the index.html might solve the issue??
However, this did not solve the issue and I faced with 404 error when I checked my deployed website.
After some googling, I came across this stack overflow post. Turns out it had to do with some webpack configurations and the update to the index.html code I did previously was useless lol.
At this point, I was lost. Not very sure what was going on beneath the hood :(
Then, I came across this WONDERFUL Medium Article and decided to try it out from the beginning.
Overall, I found the above Medium article to be very helpful and it mentioned extra stuff that the official GitHub Page Documentation that I was referring to did not have. However, it was not all sunshine and rainbows from this point onwards. Some of the stuff mentioned in the Medium post did not entirely work for me and there were some gaps. This was because the sample website that the author created was a simple website with no routing involved while mine had. Also, the project I was trying to deploy was actually one that I had started working on a year ago but haven’t gotten around to complete the code and deploy it….hence the contents of my index.html might have missed out some stuff…
Therefore, the next section will sort of be a summary of the above Medium article with some additional points.
Success(?), finally….
Step 1: Finish committing my last changes for the React App and push to the Master branch of my GitHub repository.
You could follow the steps provided in the article for the section on creating your React Project. Here are some extra changes I discovered that I had to make to my original code along the way…
Change 1:
As you probably noticed, my entry point file has an extension of .jsx instead of .js. Hence, I renamed the file to be index.jsx -> index.js. If I do not rename it, the github page deployment would face errors as the webpack config expects a index.js file (at least, this is what I think…).
Change 2:
Updated my index.html contents. I actually have no idea where my index.html contents came from as I started this project last year and have forgotten how I created it..not sure why the content seems different from the one created from create-react-app. Hence, following the helpful Medium article, I re-created another project by following the steps below. For step 3, I replaced the src contents with my own src content instead of from the author’s repository. I also edited the contents of my index.html file.
Change 3:
The last change I had to make was to change my router type in my landing page. This was not mentioned in the above Medium article and I only found out about it after much trial and error when I kept facing the 404 error in deployment….
Originally, I was using the BrowserRouter imported from react-router-dom. However, it seems that BrowserRouter does not work well with gh-pages (to be introduced later). As suggested in another helpful medium article, HashRouter is another replacement for it. This medium article suggested to add the following prop basename={process.env.PUBLIC_URL} to HashRouter, but I found it to be unnecessary and omitted it from my code…
(Taken from the medium article: https://daryllwong.medium.com/github-pages-does-not-work-for-me-f9d48fd44a5f)
import React, { Component } from "react";
import { HashRouter, Route, Switch } from "react-router-dom";
import Home from "./components/Homepage";
import Page2 from "./components/Page2";
import "./App.css";class App extends Component {
render() {
return (
<div>
<HashRouter>
<div className="App">
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/page2" component={Page2} />
</Switch>
</div>
</HashRouter>
</div>
);
}
}export default App;Before going on to the next step, make sure ALL changes have been pushed to the Master branch.
Step 2: Deployment
As mentioned in the helpful Medium article in the section of deployment,
Step 2a: npm install gh-pages — save-dev
Step 2b: Add a homepage field to the package.json file: “homepage”: “https://{Github-username}.github.io/{Github-repo-name}"
- At this point, I would like to add that it is important that the homepage url link is added correctly. It is case-sensitive and for me, I changed http to https.
Step 2c: Add some extra deploy lines under scripts field inside the package.json file
“scripts”: {
//…
“predeploy”: “npm run build”,
“deploy”: “gh-pages -d build”
}Step 2d: Deploy to GitHub page
Assuming that you already have a github repository..…type in the git bash terminal: npm run deploy.
You will then see that a new branch named gh-pages will be created.
You could go to your GitHub repository, settings -> pages and then set the GitHub source page.
- Initially I wasn’t sure what the gh-pages branch should contain. Should it contain the react code as well??? Turns out, no.
Ta da!! Hopefully you can access your newly deployed website!
Extensions
Dealing with .env file with git pages.
Gitbooks is another good publishing tool as well.
If you want to create your own personal website but is lazy to create an application with code and deploy it, GitBooks is worth considering.
