DEV Community

Cover image for Auto update React app in Heroku upon git push on GitHub
Jay-Em
Jay-Em

Posted on • Updated on

Auto update React app in Heroku upon git push on GitHub

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!

Prerequisites

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
2) After that, you can now create an app in Heroku. Just leave the tabs open for the moment ;)heroku app

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.

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}!`);
});
Enter fullscreen mode Exit fullscreen mode

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

5) Now open your favorite terminal, navigate inside the server directory of your React app, and initiate node.js by

npm init --y
Enter fullscreen mode Exit fullscreen mode

init node

6) Now from here, I recommend using yarn, and then install express.js by

yarn add express
Enter fullscreen mode Exit fullscreen mode

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

8) Navigate back to our project's root directory and create a Procfile file and paste this inside

web: node ./server/app.js
Enter fullscreen mode Exit fullscreen mode

It should now look something like this.
procfile

Setting up the Github action

9) After adding that, open a new terminal and login to Heroku by typing

heroku login
Enter fullscreen mode Exit fullscreen mode

If heroku is unknown to your system, you should install 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

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

heroku git:remote -a [name of your app]
Enter fullscreen mode Exit fullscreen mode

It should look like this.
add heroku branch

11) Now push your React app to Heroku by typing

git push heroku [your master branch]
Enter fullscreen mode Exit fullscreen mode

My master branch is main so it should look like this.
start
done

12) After pushing it to Heroku successfully, from your project's root directory, create a new directory following this structure.
structure

13) In the newly created file main.yml, paste this code inside.

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

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

14) In your Heroku account, go to account settings and reveal your API key, and guess what? Copy it.
api key

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

16) We're almost done!!! Now save all files, commit all the changes and push it to your Github repo by

git push origin main
Enter fullscreen mode Exit fullscreen mode

It should be something like this.
commit

You're done! Congrats!

17) Hooray!! We're done! Try making some changes in your app and push it on Github repo by

git push origin main
Enter fullscreen mode Exit fullscreen mode

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
You'll also gonna see the logs in your Heroku app
Heroku log

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 to know me more! Thanks!

Top comments (0)