hosting react on gh pages

Hosting React on GitHub Pages#

If you are looking for a free and easy way to host your React application, then GitHub Pages is a great option. GitHub Pages is a static site hosting service that allows you to publish your static web pages directly from a GitHub repository for free. In this guide, we will walk you through the steps to host your React application on GitHub Pages.

Step 1: Create a New Repository#

The first step is to create a new repository on GitHub. To do this, log in to your GitHub account and click on the "New" button in the top-left corner of your dashboard. Give your repository a name and make it public so that everyone can access it. Then, click on the "Create repository" button.

Step 2: Clone the Repository#

Once you have created the repository, you need to clone it to your local machine using Git. Open your terminal and run the following command:

git clone https://github.com/username/repository-name.git

Replace "username" with your GitHub username and "repository-name" with the name of your repository. This will create a new folder in your current directory with the same name as your repository.

Step 3: Create a React App#

If you have not already done so, create a new React application using the command:

npx create-react-app my-app

This will create a new folder called "my-app" with all the necessary files and folders for a basic React application.

Step 4: Build the React App#

Next, you need to build your React application for production using the following command:

npm run build

This will create a new folder called "build" in your React application's directory with all the production-ready files.

Step 5: Configure the GitHub Pages Settings#

Now that you have built your React application, you need to tell GitHub Pages to use it as the source for your site. To do this, create a new file in the root of your repository called "gh-pages" with the following content:

{"homepage": "https://username.github.io/repository-name/"}

Replace "username" with your GitHub username and "repository-name" with the name of your repository.

Step 6: Deploy Your React App#

The final step is to deploy your React application to GitHub Pages using the following commands:

npm install --save-dev gh-pages

npm run deploy

This will create a new branch in your repository called "gh-pages" with all the production-ready files from the "build" folder. Your React application is now live on GitHub Pages at the following URL:

https://username.github.io/repository-name/

Alternate Method#

Another way to host your React application on GitHub Pages is to use a tool called "gh-pages". This tool allows you to deploy your React application with just one command. To do this, first install the "gh-pages" package using the command:

npm install --save-dev gh-pages

Then, add the following scripts to your package.json file:

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

Finally, deploy your React application to GitHub Pages using the command:

npm run deploy

This will create a new branch in your repository called "gh-pages" with all the production-ready files from the "build" folder. Your React application is now live on GitHub Pages at the following URL:

https://username.github.io/repository-name/