Host React app in GitHub pages
Tags: react, hosting, githubpages, github
Published: 2023-04-11 05:56:31

---
title: Host React app in GitHub pages
published: true
date: 2023-04-11 04:11:36 UTC
tags: react, hosting, githubpages, github
canonical_url: https://blog.vishnuprasaath.dev/host-react-app-in-github-pages
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m88pgh1icj97yhkpfv9p.png
---

There is a lot of documentation out there to host your react app on GitHub pages for FREE, which is accessible via `https://<git_user>.github.io/<repo_name>`  
**ex:** `adam.github.io/portfolio` , `vishnu.github.io/my-dev`

But this doc will guide you to host react app at `https://<git_user>.github.io` (no need to cling the repo name with URL)  
**ex:** `adam.github.io` , `vishnu.github.io`

This approach is preferred for hosting a portfolio or dev-profile website.

There are three types of GitHub Pages sites:

1. User Site

2. Project Site

3. Organization Site

This blog is inclined toward setting up a **User Site**

**Let's get started!**

### Step 1 - Create a repo on GitHub

Create a new **GitHub repo** named username.github.io (replace username with your current git user name) and make it **Public** (to host private repo in GH pages you need a GitHub Enterprise account)

![img1](https://cdn.hashnode.com/res/hashnode/image/upload/v1681028943747/a7b5d1b9-a715-4e76-8f62-5f486395f5be.png)

* * *

### Step 2 - Create React app and Push to repo

Create your react app following the official doc - [https://create-react-app.dev/docs/getting-started/](https://create-react-app.dev/docs/getting-started/)

Init **git** and **push** it to the above-created repo

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

```

* * *

### Step 3 - Setup gh-pages

The npm package [gh-pages](https://www.npmjs.com/package/gh-pages) helps in configuring and deploying your app to GitHub pages

```
npm install gh-pages save-dev

```

**Homepage property**

Add the below `homepage` property to your `package.json` file.

```
For free GitHub user site, add this: 
"homepage": "https://{username}.github.io"

If you own a domain, add this:
"homepage": "https://mydomainname.com"

```

![img2](https://cdn.hashnode.com/res/hashnode/image/upload/v1681030015020/bc19bfff-fb70-457e-b0ff-6a0e5a2ab97d.png)

**Deploy Script**

Add both **predeploy** and **deploy** property scripts to the `package.json` as below

```
"predeploy": "npm run build",
"deploy": "gh-pages -d build"

```

**predeploy** - bundle the react application  
**deploy** - deploy the bundled file.

![img3](https://cdn.hashnode.com/res/hashnode/image/upload/v1681030290187/7fb123aa-6a9a-4864-9b67-b36cba2bbbf1.png)

Push these changes to the git repo

```
git commit -m "configure gh-pages"
git push

```

* * *

### Step 4 - Deploy the app to GitHub Pages

Run the below command to deploy your react application to GitHub Pages

```
npm run deploy

```

* * *

### Step 5 - Finally access the deployed site

- Go to the GitHub repo

- Click **Settings** menu

- Go to the **Code and Automation** -> **Pages** section

- In the **Build and Deployment** section, select **Source** to **Deploy from a branch**

- Select the **branch** to **"gh-pages"** and click on the **"Save"** button

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1681030949821/769b9096-2a16-4702-8a6a-03f0b1b632a5.png)

Visit `username.github.io` and check out your site.

Yayy!

Your website is hosted for FREEEE in GitHub Pages and accessible to the world.