Hosting your React application on GitHub Pages is a simple and effective way to share your project online for free. Whether you’re a beginner or an experienced developer, this Step-by-step guide to hosting React app on GitHub Pages will walk you through the entire process. But before diving into the steps, let’s cover some basics.

facebook react and github pages

What is React?

Developed by Facebook, React is a well-known JavaScript library for building user interfaces. It simplifies making of fast, interactive, and scalable apps. React’s easy to use component-based structure and simple syntax is the reason why so many developers love it.

What is a Static React App?

A static React app is basically your React project in plain old HTML, CSS, and JavaScript files. These files can be served directly to users without a need of a backend server. This makes static React apps super light and perfect for platforms like GitHub Pages.

What Are GitHub Pages?

It is a free service from GitHub that allows you to publish static websites straight from your GitHub repositories. It is perfect hosting choice for personal projects, portfolios, or any documentation, and it works seamlessly with your code.

Benefits of Deploying on GitHub Pages

  1. Free Hosting: There is no need to pay anything to host your static websites.
  2. Custom Domain Support: You can easily connect your custom domain.
  3. Version Control: Hosting your app on GitHub ensures your code is version-controlled and accessible.
  4. Easy Sharing: Your app gets a live URL, making it easy to share your work.

Step-by-Step Guide to Hosting Your React App on GitHub Pages

Prerequisites

Before you begin, ensure you have the following:

  • Node.js and npm: Installed on your system. Download here.
  • Git: Installed and configured. Download here.
  • GitHub Account: Sign up at GitHub if you don’t already have an account.

Step 1: Create Your React App

If you haven’t created your React app yet, you can do so using Create React App:

npx create-react-app my-app
cd my-app

Step 2: Install Gh-Pages

The gh-pages package simplifies deployment to GitHub Pages. Install it as a development dependency:

npm install gh-pages --save-dev

Step 3: Update package.json

Edit your package.json file to include:

  • Homepage Field: Specify your app’s deployment URL. Replace your-username and your-repo-name:
"homepage": "https://your-username.github.io/your-repo-name"
  • Deployment Scripts: Add predeploy and deploy scripts:
"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

Step 4: Initialize a Git Repository

If your project isn’t already a Git repository, initialize it:

git init
git add .
git commit -m "Initial commit"

Step 5: Push to GitHub

Create a new repository on GitHub and push your code:

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

Step 6: Deploy Your App

Run the deploy script to build and publish your app on GitHub Pages:

npm run deploy

This command creates a gh-pages branch in your repository and hosts the app at the URL specified in the homepage field.

Step 7: Access Your Deployed App

Once the deployment is complete, you can access your app at:

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

Conclusion

Deploying a React app to GitHub Pages is an easy and efficient way to showcase your projects. With free hosting, version control, and custom domain support, GitHub Pages is an ideal choice for static React apps. Follow this guide, and you’ll have your app live in no time!

Got questions or feedback? Let us know in the comments below!

Related Posts