# How to host React app on GitHub Pages

Yes, hosting your react website like regular HTML and CSS websites with GitHub pages is possible. And that is what I am going to cover in this article. So let's begin.

# 1. Create a GitHub repository
First, create a GitHub repository to upload your files. If you still don't have any account then [sign up](https://github.com/signup) now.


![create new github repo](https://cdn.hashnode.com/res/hashnode/image/upload/v1655835513124/LESSqr4e1.png align="center")

After you've clicked on create a new repository, you will get a page where you will be asked to provide information about the repository.

![GitHub new repository](https://cdn.hashnode.com/res/hashnode/image/upload/v1655835743989/kYQdz7F-L.png align="center")

Fill in the name of the repository and choose the visibility as public and leave the rest of all the fields as they are. If you are a pro user of GitHub then you can also choose private otherwise GitHub pages are only available for public repositories so please choose public. Then simply hit that create repository button.

# 2. Push code to GitHub repository
After you have created a repo, you now need to push code to the repo. There are two ways to do that:
- Drag and drop files
- Use the git commands


![GitHub new repository](https://cdn.hashnode.com/res/hashnode/image/upload/v1655836335281/IfDo4Qr4F.png align="left")

> Note: If you are planning to drag and drop files then maybe you want to do that after the next step. Otherwise, just use those good old git commands.

# 3. Configure package.json
Add this line to your package.json file
```javascript
  "homepage": "https://myusername.github.io/my-app",
```

![configure the app](https://cdn.hashnode.com/res/hashnode/image/upload/v1655836555968/nFxRv8Rli.png align="left")

Be sure to replace `myusername` with your username and  `my-app` with your repository name. After changing your package.json file should look like this:

![Package.json final configuration](https://cdn.hashnode.com/res/hashnode/image/upload/v1655837049401/agIy_HIy4.png align="center")

# 4. Install gh-pages package
Next, you should install gh-pages with either of the following commands.

For NPM:
```
npm install --save gh-pages

```

For Yarn:
```
yarn add gh-pages
```

And add these lines inside of your script:
``` javascript
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
```
And your package.json will look like this:

![Final package.json](https://cdn.hashnode.com/res/hashnode/image/upload/v1655837415992/pDDK7f-YM.png align="center")

# 5. Deploy
Deploy the app by running this command:
```
npm run deploy
```

> Unfortunately, if you are trying to make things work with just drag and drop then please keep in mind that the process will get over complicated. I advise you to go with the good old git terminal. 
You can still do with drag and drop by creating a new branch and selecting that branch, I am not saying it is impossible but it is terribly possible.

At last, you will see a message that says **Published**, if you see that then congrats your site is published. But it may take some time to reflect.


![published react app on github pages](https://cdn.hashnode.com/res/hashnode/image/upload/v1655837941098/DJ5DDm9k6.png align="center")

**Maybe you're thinking** where you can find your react app, right? Then let me tell you my little friend, the URL of your website is on your package.json file. The **homepage** property you set is your website's URL. In my case, it is [https://aashishpanthi.me/react-gh-pages-deploy/](https://aashishpanthi.me/react-gh-pages-deploy/).

If you get stuck in any of the above steps then you can follow [this video tutorial](https://www.youtube.com/watch?v=yvaJNaqQwew) or feel free to ping me anytime.