Building And Hosting A React App For Free Using Github

Build & Host React App for FREE using GitHub Pages 🚀 After creating your React project, the next important step is deployment. Instead of keeping your project only on localhost, you can host it online for free 🌐 GitHub Pages allows you to deploy your React app easily without any cost.
In this tutorial, we will learn:

Step 1: Build React App

Before deploying, you need to create an optimized production build of your app.

npm run build

This command will create a build folder containing all optimized files.

Step 2: Install GitHub Pages Package

Install the gh-pages package to help deploy your app.

npm install gh-pages --save-dev

Step 3: Update package.json

Add homepage and deployment scripts inside your package.json.

"homepage": "https://your-username.github.io/your-repo-name",

"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

Step 4: Initialize Git & Push to GitHub

If not already done, initialize Git and push your project to GitHub.

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/your-username/your-repo-name.git
git push -u origin main

Step 5: Deploy React App 🚀

Now run the deploy command:

npm run deploy

After a few seconds, your app will be live at:

https://your-username.github.io/your-repo-name

Step 6: Enable GitHub Pages

Go to your GitHub repository → Settings → Pages Select branch: gh-pages and save.

Important Note ⚠️

If you are using React Router, add this in your package.json:

"homepage": "."

Or use HashRouter instead of BrowserRouter to avoid routing issues.

Features and Benefits:-