DEV Community

Sandeep
Sandeep

Posted on

Deploying a React JS app using GitHub Pages

#git #github #react #webdev

Deploying a React app to GitHub Pages is straightforward. Here's a step-by-step guide:

✅ Step 1: Prepare Your React App
Make sure your React app is working locally. This assumes you created it using create-react-app.

✅ Step 2: Install GitHub Pages Package
In the root of your project:

npm install --save gh-pages
Enter fullscreen mode Exit fullscreen mode

✅ Step 3: Update package.json
Modify your package.json file with the following:

Add the homepage field at the top:

"homepage": "https://<your-username>.github.io/<repository-name>"
Enter fullscreen mode Exit fullscreen mode

Add scripts:

"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}
Enter fullscreen mode Exit fullscreen mode

✅ Step 4: Push Your App to GitHub
If your app is not already in a GitHub repo, initialize and push it:

git init
git remote add origin https://github.com/<your-username>/<repository-name>.git
git add .
git commit -m "Initial commit"
git push -u origin main
Enter fullscreen mode Exit fullscreen mode

✅ Step 5: Deploy to GitHub Pages

Run:

npm run deploy
Enter fullscreen mode Exit fullscreen mode

This will:

  • Build the app
  • Push the build folder to the gh-pages branch
  • Make the app live at the URL you specified in the homepage field

✅ Step 6: Enable GitHub Pages in Repo Settings

Go to your GitHub repo:

  • Click Settings > Pages
  • Under Source, select gh-pages branch and click Save

✅ Step 7: Access Your App

It will be live at:

https://<your-username>.github.io/<repository-name>
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
ehsanmashruf profile image
Mashruf Ehsan •

Thanks for sharing. ❤️