HOW TO
Painlessly Deploy a React App with Heroku
Today, I deployed my first application with Heroku. Read on to see how I did it and why you might want to try it out for yourself.
I recently finished working on the first version of my portfolio website. Yay me! It is strictly a front end website that I built with React’s create-react-app and using other libraries like emailjs and react-scroll to add some useful functionality. emailjs allowed me to enable emails to be sent directly to me without the need for a back end component and database, which is really cool. I also wrote my own CSS to customize the styling to my liking, which probably took up a majority of my time while creating this project. I like to play around with the way things look for a while before I ultimately settle on an aesthetic — thats the meticulous, graphic designer in me.
Isn’t Heroku a Japanese poem?
No, no, what you are thinking of is a Haiku.
Heroku is a cloud platform that allows developers to deploy, manage and scale modern applications on the web. Its the perfect tool to get started with deploying your projects because it offers a free plan and deployments can be as short as a few minutes to get set up. Heroku can deploy applications in languages/frameworks such as Ruby, Node.js, Scala, Clojure, Python, PHP, Go, React and several others. Since both hardware and servers are managed by Heroku, developers are free to focus on their actual application and not have to worry about setting up their own configuration for deployment.
Getting set up
So the first thing you want to do is build out your application of course. Once you are all set up, sign up for a free Heroku account here. After signing up and confirming your email, you are ready to really get started.
Navigate to the create new app page that will look something like this:
And fill out the fields to create the app. Once this is done, you should be automatically directed to the dashboard where you will go into the Deploy tab. There are three different deployment methods you can choose from: Heroku Git, GitHub, Container Registry. I went with the second option so that I could connect to my GitHub account directly from the Heroku site instead of utilizing the CLI. Note that if you didn’t use GitHub to host your repository, this is obviously not the right option for you.
After connecting to your GH account, you will be prompted to connect to the specific repository of the app you are deploying. This is mine:
Now, this last step took me a few minutes of light research to figure out, but you are going to navigate to the Settings tab. Here is where you can edit the name of the app which should, in turn, change the domain url. Instead of doing that, you can also go down to the Domains section to add your own custom url if you have one. For my purposes, I am just going to use the url that Heroku provides. Here is the app overview of my project:
Back to getting the deployment running, scroll down to the Buildpacks section and add a buildpack that is specific to the tech stack you used to create your project. Since my app was built with create-react-app, I used this one: https://github.com/mars/create-react-app-buildpack.
For the last step, go back to the Deploy page. Scroll down to the Automatic deploys and Manual deploy sections. I opted in to enable the automatic deploys on my master branch because it will be able to deploy a new version of my project after any new pushes are made to this branch. This means I will be able to modify my portfolio and the new changes will be deployed automatically to Heroku.
In the Manual deploy section, just click Deploy Branch and watch the magic happen — it could take a few minutes.
As long as everything went smoothly, you can now navigate to your live site!
Here is my site if you want to take a look: https://react-portfolio-amandena.herokuapp.com/.
I still have a few changes to make, but I’m glad to finally have a working portfolio site that I can add to my resume.
