Deploying create-react-app one-page application to GitHub Pages
Tags: github, npm, react
Published: 2021-07-03 16:30:38

I wanted to create a one-page application for trying out Github Pages. The issue I had was constantly getting error 404 or readme.md. I read a lot of articles to find a way to solve those issues and get the default create-react-app page shown. However, I failed to find a ready-to-go solution that worked for me.

So here I will describe what I did to make my GitHub pages work with my repository. I skipped creating a GitHub repo, cloning the project, and running create-react-app to create a project. I assume you have already done that before you follow my steps. 

Please, keep in mind that if you design an application with multiple pages additional configuration might be needed. My application contains only one page, this is why I did not use react-router.

So, let me start.

###  Steps 1:
I remove `node_modules` folder and reinstall npm modules. This is optional and should be done if deployment haven't worked for you previously (e.g. the following error appeared: `'fatal: Couldn't find remote ref refs/heads/gh-pages'`).

### Step 2:
It was pointed out in the sources I read that GitHub pages do not play very well with SPA so I needed to do few changes to `package.json` file.

First, I install `gh-pages` as devDependencies.
```
npm i --save-dev gh-pages // -> using npm
yarn add -D gh-pages // -> using yarn
```

*`gh-pages` module helps with deploying the application and it creates a branch where we want to deploy our code. That is why there is no need to create a branch manually.*


Now I need to add in package.json file.
```json
{
  "homepage": "https://[GITHUB_USER].github.io/[GITHUB_REPOSITORY_NAME]"
}
```
This will be URL of the project homepage.

After that, I add the following lines in the scripts section in package.json.
```json
{
  "predeploy": "npm run build", // or yarn build
  "deploy": "gh-pages -b gh-deploy -d build",
}
```
**-b** *name of the branch I am pushing to, the default branch is `gh-pages`*
**-d** *Base directory for source files*

When I run `deploy` it automatically runs `predeploy` first. Also, the code that was built with `predeploy` command is deployed to the`gh-deploy` branch.

The final result should look like this:
```json
{
  "homepage": "https://[GITHUB_USER].github.io/[GITHUB_PROJECT]",
  ...
  "scripts": {
    "predeploy": "npm run build", // or yarn build
    "deploy": "gh-pages -b gh-deploy -d build",
    ...
  },
  ...
  "devDependencies": {
    "gh-pages": "^3.2.3"
  },
  ...
}
```

### Step 3:
1. Open GitHub and open your repository.
2. Click Settings.![Screenshot 2021-07-03 at 18.04.52](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s9kiin98g8fuet0g0grs.png)
 
 
3. Click Pages.
![Screenshot 2021-07-03 at 18.05.00](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/386rv3b9jfca127wxpe7.png)
4. Select `gh-deploy` branch from dropdown.
![Screenshot 2021-07-03 at 18.06.24](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jyqif9x603tlrtue4jy2.png)
5. Click Save.
![Screenshot 2021-07-03 at 18.06.30](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zkwtsvv4wtgbbb3t93xt.png)  
6. Wait for deployment to finish and then check out the app.


This is one of the ways you can deploy your one-page application to GitHub pages. Hopefully, it will help you if you find yourself struggling with the same issues.

## Sources
- https://dev.to/yuribenjamin/how-to-deploy-react-app-in-github-pages-2a1f
- https://create-react-app.dev/docs/deployment/
- https://towardsdev.com/github-pages-does-not-work-for-me-f9d48fd44a5f