Deploying a React App to GitHub Pages

GitHub Pages provides a convenient way to showcase and share your React applications with the world. In this guide, we'll walk through the process of deploying a React app to GitHub Pages.

Step 1. Create a GitHub Repository

1. Start by creating a new repository on GitHub. You can do this by clicking on the "+" sign near your profile and selecting "New Repository."
2. Provide a name for your repository and click "Create repository."
3. Initialize the repository by executing the following commands in your VS Code terminal.

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

Step 2. Add GitHub Pages Dependency

1. Install the gh-pages dependency using npm.

   npm install gh-pages --save-dev
   

Step 3. Update package.json

1. Open your package.json file and add the following properties.

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

   Replace <username> with your GitHub username and <repo-name> with the name of your repository.

2. Add the following scripts in the scripts section.

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

Step 4. Push Code Updates and Deploy

1. Push your code updates to GitHub.

   git add .
   git commit -m "commit"
   git push
   

2. Deploy the application using the following command:

   npm run deploy
   

Step 5. View the Deployed App

1. Visit your GitHub repository and navigate to "Settings."
2. Under "GitHub Pages," you'll find the link to your deployed React app.

Congratulations! Your React app is now live on GitHub Pages, and you can share the link with others.

By following these steps, you've successfully deployed your React app, making it accessible to a wider audience. Whether it's a personal project or a portfolio piece, GitHub Pages provides a straightforward way to showcase your work.

GitHub Repository Create