loading...
Cover image for Deploy React App to Heroku using Github Actions!

Deploy React App to Heroku using Github Actions!

aishikamidder05 profile image Aishika Midder ・2 min read

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! ^_^

Posted on by:

aishikamidder05 profile

Aishika Midder

@aishikamidder05

Full time cat lover part time tech devotee | CSE Sophomore at National Institute of Technology, Durgapur, India

Discussion

pic
Editor guide
 

This is so helpful!!! Thank you!

 

glad you find it useful ! ^-^

 

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.

 

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

 

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.

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.

 

Thanks for sharing! Thats called programming.

 

glad you found it useful!