React logo next to Github logo

Deploy React App to Github Pages

We’re going to learn how to create a react app and then deploy it to GitHub Pages. This post assumes you already have node installed. If not, you can do download it here. You should also already have a Github account. If not, you can sign up here.

Create React App

Open the terminal and cd to the area you want your new project folder. Desktop, Documents, etc.

cd Documents/

Now create your react app. You can use npm or npx, but Facebook’s documentation recommends npx to ensure your app uses the latest versions of everything.

npx create-react-app my-project

Note: Replace my-project with the name of your project folder.

Now cd to your newly created folder.

cd my-project

Let’s make sure our app is working.

npm start

Is your app running? Great! If not, redo the above steps.

Once we confirmed the app is running, we can exit out of it. While in the terminal click control + c to stop the npm start.

Deploy to Github

Now it’s time to work on deploying the newly created app.

Go to your Github account and create a new repository. Name it, add a description if you like, keep it public, click create repository.

Note: Your create-react-app set up will handle the README and the .gitignore for you.

Keep this new repository page open because we will need it again soon.

Now we’re going to go back to the terminal. Be sure you’re still in your project folder. If not, cd into it.

We are going to add a Github Pages package as a dependency. Type in

npm install gh-pages --save-dev

Add all your folder’s files to the branch and commit them with a commit message.

git add .
git commit -m “Initial commit.”

Go back to your Github repository and look for the second option that says “…or push an existing repository from the command line”. Copy those two lines of code and paste them into the terminal. It should look something like this.

git remote add origin https://github.com/my-github-username/my-repo-name.git
git push -u origin master

Refresh your Github and you should now see the files. At the top of your repository page, click Settings, then scroll down to Github Pages. Under Source select “master branch”.

This will reload the page and you will now see a link under Github Pages that looks like this https://username.github.io/my-repo-name/. Clicking the link will take you to your README, but we don’t want that. We want the app.

Copy that link.

In your preferred code editor, open the package.json file.

Under “private” but above “dependencies”, paste the Github Pages link you just copied like so.

"homepage": "http://username.github.io/my-repo-name",

Now go to the “scripts” section and at the bottom of that section add

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

Note: If any errors pop up, be sure “homepage” and “predeploy” have a comma at the end.

Save and close the file.

We’re going back to the terminal again. We have to commit the changes we just made to the package.json file.

git add .
git commit -m “Add Github Pages config.”

Now let’s build and deploy the app!

npm run deploy

Let’s go back to Github again. Refresh the page.

Under Github Pages > Source, there should now be a gh-pages branch. We’re using that now so, change it from master branch to gh-pages branch.

Wait a few mins and try the link. If it still shows the README, just wait a bit longer and keep refreshing.

CONGRATS!!! You just deployed your react app!

Updates

Some of you may be wondering… now what? How do I update it?

The good news is you can work on, edit, and save the files as you normally would. When you’re ready to deploy the updates, cd to your folder again and keep reading below.

If you have exited the terminal since originally pushing, we need to make sure we are in the correct branch, gh-pages. While cd’d into your folder, view your branches.

git branch -a

You should see something like this below. Whichever has the * is the active branch.

* master
gh-pages
remotes/origin/gh-pages
remotes/origin/master

If your * is next to gh-pages, then you can skip this part and go here. If your * is on master, let’s change that.

git checkout gh-page

That’s it! That easy. Now double check it is right.

git branch -a

This is what you should see now.

* gh-pages
master
remotes/origin/gh-pages
remotes/origin/master

Now we can do what we did the first time and commit the changes.

git add .
git commit -m “Commit Message.”

Now deploy again.

npm run deploy

Just like the initial deploy, it may take a moment for the updates to show.

Hopefully this has helped someone to become 1 step closer to becoming a better developer.

Leave a Reply