Deploy a Create-React-App to Github
Tags: react, github, tutorial, git
Published: 2020-11-22 05:06:14

#**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](https://reactjs.org/docs/create-a-new-react-app.html). 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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/oaf6oukt32rsj9p5kxkw.png)


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. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/v01os30r2fpa3u3fmulr.png)

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
```
<p>&nbsp;</p>
&emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; That's it!
<p>&nbsp;</p>
![Congratulations](https://media.giphy.com/media/S6qkS0ETvel6EZat45/giphy.gif)
&emsp; &emsp; &emsp;Well done! Your CRA is now live on your Github!
<p>&nbsp;</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wv4zp3md8kafhzc0swkf.png)

<p>&nbsp;</p>
#**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.

<p>&nbsp;</p>

Select the dropdown and set it to Main then select Save. Once this is done your address will be displayed for you to copy.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/oyhg4kdqdsemttc2jke0.png)

<p>&nbsp;</p>

###**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. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5nihvh2qzkjukuy5o02n.png)
*Disregard the versions of the dependencies as they may have changed from the time of this screenshot*

<p>&nbsp;</p>

Under the `scripts` section, you will add these two lines:
```
"predeploy": "yarn build",
"deploy": "gh-pages -d build"
```
It should look like this:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9m62bg1l33tkji4yqo1p.png)
<p>&nbsp;</p>

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
```
<p>&nbsp;</p>

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

<p>&nbsp;</p>

###**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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6ko6v3dxltb6nsewwv47.png)
<p>&nbsp;</p>

Use the new link on Github Pages and you should see your CRA now hosted on Github Pages!
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6jah0o60uik9zhx6ep42.png)

<p>&nbsp;</p>

![You did it](https://media.giphy.com/media/slOhiKAVFgwr6/giphy.gif)

<p>&nbsp;</p>

#**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.