How to Publish a React App on GitHub

Finishing up my second project at Flatiron School I wanted to host my app on GitHub, like I did my first project. That way I can share my projects with people that aren't developers... like my Mom. I quickly found out that deploying a React application (using create-react-app) on GitHub isn't as simple as a vanilla javascript repo. I was quite confused when I went to my link and all I could get to show was the README file. In this post I wanted to describe the process I took to get my link to actually show my app.

The first thing I did was add a few lines to the package.json file. The homepage URL {with your own info} is in the top of the file and the next two are in "scripts"

"homepage": "https://{github username}.github.io/{your project name}"

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

Next run the following command in your terminal.

npm run build

This will create a new "Build" folder in your projects directory.

Followed by these commands:

npm install --save gh-pages
npm run deploy

I had to create a new branch called "gh-pages" and push my work to this branch.

In your repository on github, navigate to settings>Pages.

Here you will select your source to be:

Branch:gh-pages in the /root directory.

Save this and try your homepage link!