Auto update React app in Heroku upon git push on GitHub
Tags: github, react, heroku, workflow
Published: 2022-07-16 12:28:45

> _Hello everyone! This is going to be my first ever post here. I hope you'll find this useful!! Arigatogozaimasuuu!_

> _Update: Heroku is not free anymore, these tutorial is outdated and will be updated soon_

Have you ever wondered if it is possible to just push your application update in your Github repo and then it will auto re-deploy your app in Heroku? Well, stop wondering because today I will share you the process on how to setup one in your React app project and save you the hassle of searching it on your own!

We will utilize the use of what we call, "the magical" Github Actions. This is the main key that will unlock the possibility on how to make this idea come true.

> I will assume that you already know how to create a Github repo, create an application in Heroku, and know the basics of Git. With that in mind, let us now start doing it!

<br>
### Prerequisites
- [node.js](https://nodejs.org/en/)
- [Git](https://git-scm.com/)
- [Heroku account](heroku.com) 
- [Github account](https://github.com/) 

## Setting up Github and Heroku

1) First, you need to create a Github repository and push your React project there. In my case, I just pushed the default React app created by using npx create-react-app. ![github repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a9vdvuakom53w050da91.png) 
2) After that, you can now create an app in Heroku. Just leave the tabs open for the moment ;)![heroku app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4cndmawsspb28fjwgkoo.png)

## Setting up your React app

3) Now in your project's root directory, create a new folder or a directory if that's what you want to call it, name it as `server` and then create a new file inside naming `app.js` and paste this code.
```javascript
const path = require('path');
const express = require('express');
const port = process.env.PORT || 3000;
const app = express();

const publicPath = path.join(__dirname, '..', 'build');
app.use(express.static(publicPath));

app.get('*', (req, res) => {
res.sendFile(path.join(publicPath, 'index.html'));
}); 

app.listen(port, () => {
console.log(`Server is up on port ${port}!`);
});
```
What in the world does this code do? Well, if you read it carefully, it's just serving your app's public folder to the browser.

4) The project should look something like this.
![project structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zsb0rml1milocjqy0vtl.png)

5) Now open your favorite terminal, navigate inside the `server` directory of your React app, and initiate node.js by 
```bash
npm init --y
```
![init node](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s4d09wfxa2llsshbsgsi.png)

6) Now from here, I recommend using [yarn](https://www.npmjs.com/package/yarn), and then install express.js by ```bash
yarn add express
```

7) After installing express you should probably add a `.gitignore` file containing `node_modules` inside. You don't want to push it in Heroku because of its massive size. It should look like this.![gitignore](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ybyqnuso0id8rr6szkz3.png)

8) Navigate back to our project's root directory and create a `Procfile` file and paste this inside 
```Procfile
web: node ./server/app.js
```
It should now look something like this.
![procfile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s5ymlnhfkljh1k6mnzus.png)
 
## Setting up the Github action
9) After adding that, open a new terminal and login to Heroku by typing 
```bash
heroku login
```
If heroku is unknown to your system, you should [install](https://devcenter.heroku.com/articles/heroku-cli) the Heroku cli first. It will open a login prompt in your browser. Just follow the instructions there and if it works, you should see something like this. 
![heroku login](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vn72f6hwt7kkt9yfrc9m.png)
 
10) After successfully logging in, switch back to your previous terminal or open a new one and navigate back to your project's root directory. Commit all of your changes to your local branch, and add a remote branch for Heroku by typing in 
```bash
heroku git:remote -a [name of your app]
```
It should look like this.
![add heroku branch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jeh5gmv1uqwgt84xy98i.png)
 
11) Now push your React app to Heroku by typing 
```bash
git push heroku [your master branch]
```
My master branch is `main` so it should look like this.
![start](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dekoghau5woztivo89w4.png)
 ![done](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kyocfnd53kbstfnksqjj.png)
 
12) After pushing it to Heroku successfully, from your project's root directory, create a new directory following this structure.
![structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xdrjdfyfqc5t7szcxyxk.png)
 
13) In the newly created file `main.yml`, paste this code inside.
```yaml
name: Deploy

on:
  push:
    branches:
      - [gitmainbranch]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: akhileshns/heroku-deploy@v3.12.12 # This is the action
        with:
          heroku_api_key: ${{secrets.HEROKU_API_KEY}}
          heroku_app_name: "[herokuappname]" #Must be unique in Heroku
          heroku_email: "[emailloggedinheroku]"
```

Replace *[gitmainbranch]* with your master branch or main branch.
Replace *[herokuappname]* with your Heroku app name.
Replace *[emailloogedinheroku]* with the email you use in your Heroku account. 

This code is just a simple Github workflow that tells Github to auto update Heroku upon changes in the main branch of your React application.

With my setup, it should look like this.
![yml](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qtjt3yobgl9jvgocp3sg.png)
 
14) In your Heroku account, go to account settings and reveal your API key, and guess what? Copy it.
 ![api key](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f37s11dzemv4oty8y9al.png)
 
15) In your Github repo, go to your repository settings and add a new secret named `HEROKU_API_KEY` and paste the API key you copied from Heroku.
![secret](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iks3s5we5b9a5p93erbz.png)
 
16) We're almost done!!! Now save all files, commit all the changes and push it to your Github repo by 
```bash
git push origin main
```
It should be something like this. 
![commit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t04gukln100fkepiieam.png)

## You're done! Congrats!
17) Hooray!! We're done! Try making some changes in your app and push it on Github repo by 
```bash
git push origin main
```
or by merging a certain branch to your master branch. This action will be triggered whenever there's a change in your master branch. Once you've pushed a change, you'll see something like this in your action tab.
![action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/blmneb1npyg5svhawumb.png)
 You'll also gonna see the logs in your Heroku app
![Heroku log](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w9ctxv55sdxm00sik3di.png)
 
<br>
## Thanks!
That's it! You have now successfully setup your Github-Heroku workflow that will auto update your deployed React app on the go. 
I hope you've liked my first content here at DEV! I will post more in the future! Please see my [website](https://joshmatthew.herokuapp.com) to know me more! Thanks!