DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Cover image for How to Publish a React App on GitHub
Ben Perry
Ben Perry

Posted on

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",
Enter fullscreen mode Exit fullscreen mode

Next run the following command in your terminal.

npm run build
Enter fullscreen mode Exit fullscreen mode

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

Followed by these commands:

npm install --save gh-pages
npm run deploy
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)

Become a ModeratorHey! We would love your help!

Fill out this survey and help us moderate our community by becoming a tag moderator here at DEV.