DEV Community

Cover image for Deploy React App to Heroku using Github Actions!
Aishika Midder
Aishika Midder

Posted on

Deploy React App to Heroku using Github Actions!

My Workflow

mywebsite

Hey there, lovely people of the internet, I have built this website using ReactJS. It is a covid-19 virus tracker(using real-time data), which I have made keeping in mind the recent rise of the deadly corona virus.

I have configured my project to be deployed on Heroku. Recently, I have been wanting to add new features to it to make the website more useful for the community. However, each time I commit and push a new change to my GitHub repository I have to push it again to Heroku to make the new changes visible.

Then recently I came to know about GitHub actions and this is where I thought of making a fruitful use of it. I have created a GitHub action which will automatically push the commit to Heroku so that I only need to push my changes to GitHub and my website gets updated on its own. Cool, isn't it?
heroku-deploy

Here's a look at my newly created Github action!

Alt Text

My website ran and updated the changes. It was a success!

You can checkout my website here, if you want to: https://covid-19-virus-tracker.herokuapp.com/

Submission Category:

DIY Deployments

Yaml File or Link to Code

GitHub logo aishikamidder05 / covidtrack

A simple covid-19 virus tracker built with React JS and latest JS features like ES6 (Github Actions)

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you canโ€™t go back!

If you arenโ€™t satisfied with the build toolโ€ฆ

Hope you find my post useful. Thanks for reading till the end.
Adios! ^_^

Top comments (9)

Collapse
 
petr7555 profile image
Petr Janik

Cool! Have you considered connecting the GitHub repo to Heroku and enabling automatic deploys? To me, this seems to solve the same issue and is supported first-hand from Heroku.

Collapse
 
aishikamidder05 profile image
Aishika Midder

Thanks, but both are actually different processes. You can check my post on automatic deployments using Github actiona via heroku here : dev.to/aishikamidder05/deploy-reac...

Collapse
 
petr7555 profile image
Petr Janik

Yes, I read that post, I actually commented on it :D. Could you please explain how are the two processes different? Or more importantly, how is the end result different? I have some apps connected to the Heroku this way and each time I push changes to GitHub, it gets automatically redeployed on Heroku.

Thread Thread
 
aishikamidder05 profile image
Aishika Midder • Edited

Oh, I'm so sorry, got confused. I got a notif on my other post. In the other one, I've utilized a library and used actions to send me notifications automatically via twilio and mailgun.
Here, I've done same like you explained. I've just automated the deployment process using github actions. So, when I make a commit, it gets updated on it's own.

Thread Thread
 
midnjerry profile image
Jerry Balderas

Heroku charges you to automatically run tests. With GitHub Actions, you can automate unit tests for free and host to Heroku for free.

Collapse
 
vanigami profile image
Vanna

This is so helpful!!! Thank you!

Collapse
 
aishikamidder05 profile image
Aishika Midder

glad you find it useful ! ^-^

Collapse
 
jorawarsinghnijjar profile image
Jorawar Singh Nijjar

Thanks for sharing! Thats called programming.

Collapse
 
aishikamidder05 profile image
Aishika Midder

glad you found it useful!