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.

Photo by Danielle MacInnes on Unsplash

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:

I named mine react-portfolio-amandena

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.

Automatic deploys section

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!

This is what I deployed

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.

--

--

--

No Matter What People Tell You, Words And Ideas Can Change The World.

Recommended from Medium

Boost Angular Development with Nx Schematics/Generators

Completing Phase 2

Facet filter: Front end or backend

Stop handling async effects this way!

Host a static website on S3 using AWS CDK

How to create a webworkers driven multithreading App — Part 2

Moving cubes using events

Use the popular cayman theme in React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Amanda M Johnson

Amanda M Johnson

Full Stack Software Engineer | manda.m.johnson@gmail.com

More from Medium

Introduction to React.js and Pros and Cons of using React.js

Run localhost on https in React App

Implement a 360˚ Video Player in JavaScript

NPM: World’s Largest Software Registry

npm install