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. 
2) After that, you can now create an app in Heroku. Just leave the tabs open for the moment ;)
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}!`);
});
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.
5) Now open your favorite terminal, navigate inside the server directory of your React app, and initiate node.js by
npm init --y
6) Now from here, I recommend using yarn, and then install express.js by
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.
8) Navigate back to our project's root directory and create a Procfile file and paste this inside
web: node ./server/app.js
It should now look something like this.
Setting up the Github action
9) After adding that, open a new terminal and login to Heroku by typing
heroku login
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.
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]
It should look like this.
11) Now push your React app to Heroku by typing
git push heroku [your master branch]
My master branch is main so it should look like this.
12) After pushing it to Heroku successfully, from your project's root directory, create a new directory following this 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]"
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.
14) In your Heroku account, go to account settings and reveal your API key, and guess what? Copy it.
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.
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
It should be something like this.
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
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.
You'll also gonna see the logs in your Heroku app
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)