How to host react projects on GH Pages?

Want to host a react website? You cant afford paying bills for each and every project?

Well, Don't worry now you can do that for free with the help of Github Pages. Using GH Pages you can host any website for free in a secured way.

When you host any static website or blog on github servers, basically your domain name would be in this format: {username}.github.io/{repo-name}, if you wish to host it on your own domain, no problem you can do that as well.

In this post let's see how to host a react project on GH Pages.

Before continuing further, I assume that you know what is Github and how to create a react app. Let's get started...

Create a repository

First things first, create a repository in your Github profile. For instance I'd like to create an app with name deploy-react-app

Note: If you have already developed a react app and pushed it onto Github you can skip this section..

Create react app

After creating a repo, Let's create a react app usingcreate-react-app.

npx create-react-app deploy-react-app
cd deploy-react-app

Once you created a react app and changed into its directory. Run the following commands in terminal/command prompt.

git init
git add -A
git commit -m "initial commit"
git remote add origin https://github.com/username/deploy-react-app.git
git push origin master

Note: replace username with your own Github username and if you are using ssh instead of https for Github repo add git remote add origin [e-mail]:username/deploy-react-app.git

Once you pushed your code to Github...

Deploy app on GH Pages

• Install gh-pages as dev-dependency of react app.

   npm install gh-pages --save-dev

• Add the homepage property in your package.json file. homepage attribute value should be String. http://{username}.github.io/{repo-name} (username must be your Github username and repo-name must be your GitHub repository)

   "homepage": "https://g-savitha.github.io/deploy-react-app"

• Add the predeploy and deploy properties with existing scripts property in your project's package.json

   "scripts": {
   "start": "react-scripts start",
   "predeploy": "npm run build",
   "deploy": "gh-pages -d build",
   "build": "react-scripts build",
   "test": "react-scripts test",
   "eject": "react-scripts eject"
   },

The predeploy script initiates after running our deploy script, which bundles our application for deployment.

• Deploy your application to GH pages.

   npm run deploy

After succesfully deploying the application, Open your github repository. Go to Settings tab of the repository, scroll down until you reach Github Pages section and choose gh-pages branch as the source.

BOOM! 💥 your website is hosted on Github pages now.

---

Other than Github, you can host your website on Heroku, Vercel, Firebase, Netlify and more. Try out as many as you can to determine which best aligns with your deployment requirements. After all they're free to use 😃.

For a good next step, try to add custom domains to your deployed application. It’s good to have a distinctive domain for projects.

Until next time, Happy coding! 💻 🎉