Overview

I find that being able to document and share my experiences helps to reinforce them. So as I dive deeper and deeper down the React Rabbit Hole, I want to help those who come across the question, "How do I deploy my Create-React-App onto my Github Repo and/or Github Pages?".

As a preamble, I assume that you are already familiar with using the command line interface, using packages, and using Github.

At the end of this, you will know how to have your CRA(Create-React-App) on your Github repository and also hosted on Github Pages.

Create-React-App

First, start off by making sure you are in the folder where you want to install your application. In this example, I am going to be installing my CRA in my CRA-GH folder. You can learn more about initializing CRA from their documentation here. Using your Command Line Interface(CLI), initialize your application.

Efren_Marin CRA-GH % npx create-react-app cra-gh-example

Once your CRA is installed, go into the application file. In my example, the folder was called CRA-GH and my application was named cra-gh-example.

Efren_Marin cra-gh-example % 

Test out your application by running the npm start command.

GH-Pages Package

First, make sure to close down your server instance using CTRL + C.

Next, to incorporate Github you need to include the package with the command yarn add gh-pages

Efren_Marin cra-gh-example % yarn add gh-pages

Git Initial Commit

Once the gh-pages package is installed you need to add the changes and commit them.

Efren_Marin cra-gh-example % git add -A
Efren_Marin cra-gh-example % git commit -m "First Commit"

Awesome! Now let's work on your repository.

Github Repository

Create the repository that you want your CRA to be pushed to.

Once you create your repository, you'll be faced with many options on how to proceed. We will be choosing to push an existing repository from the command line.

You can enter these commands one at a time in order or copy and paste.

Efren_Marin cra-gh-example % git remote add origin https://github.com/efrenmarin45/cra-gh-example.git
Efren_Marin cra-gh-example % git branch -M main
Efren_Marin cra-gh-example % git push -u origin main

                      That's it!

     Well done! Your CRA is now live on your Github!

Deploying to Github Pages

You can also set up your CRA to deploy to Github Pages with a few simple steps. In this example I will be using VS Code.

Github Pages Source

In order to direct your application to deploy directly to Github Pages, you need an address. On your settings tab in Github, scroll down until you come Github Pages.

Select the dropdown and set it to Main then select Save. Once this is done your address will be displayed for you to copy.

Code Editor

Go into your project files using your code editor of choice and find your package.json file.

Add a key of homepage and a value of the link to your Github Page. See line 5 for an example. This directs your application to deploy to that address once you run it.

Disregard the versions of the dependencies as they may have changed from the time of this screenshot

Under the scripts section, you will add these two lines:

"predeploy": "yarn build",
"deploy": "gh-pages -d build"

It should look like this:

Finally commit your changes using these git commands.

Efren_Marin cra-gh-example % git add -A
Efren_Marin cra-gh-example % git commit -m "Added Github configuration"
Efren_Marin cra-gh-example % git push origin main

Build App

Once the changes have been made and pushed to your repo, you need to build it using the command yarn run deploy

Final Step

Almost there! Go onto your Github and go to the settings tab. Scroll down to Github Pages and change the source from Main to gh-pages.

Use the new link on Github Pages and you should see your CRA now hosted on Github Pages!

In Conclusion

There are multiple ways to set up your development environment and there are a vast amount of ways to go about it. This way has helped me streamline my process and I hope it helped you learn something new.