Creating An Automated CI/CD Pipeline To Deploy a React App With Heroku
Overview
In this tutorial, we will create an automated CI/CD pipeline that will deploy a React App on Heroku.
We will be using an application called Listen and Swipe. The idea behind Listen and Swipe is a web application that uses a user’s Spotify account to suggest songs to the user. After logging into Spotify through the Spotify API, the user will be given a set of suggested songs displayed in a card format. If they like the song, they can swipe right on the card, otherwise, they can swipe left, similar to Tinder. At the end of the list of songs, they can see the songs they liked compiled in a list.
If you want to see the deployment of the application demoed in this article, you can view it here: https://listen-and-swipe-demo.herokuapp.com/
Plan
Before beginning implementation, a blueprint must be made. To plan our architecture as well as to divide tasks between group members we used Notion. Notion is a project management software that is designed for collaboration to prioritize efficiency and productivity. Each time an idea was put towards our project it was added to Notion where we could keep track of its progress. If an idea was active in our workflow we would mark it “Not Started”, “In Progress”, or “Done”. If an idea was in our workflow previously but ended up getting shelved, we would mark it as “Archived”.
While Notion is a great tool for project organization, we wanted to introduce a tool that would help us plan our application visually. Figma is a design tool that prioritizes collaboration and provides a wide range of functionality with an intuitive user interface.
Code
For this project, we used Visual Studio Code to code the application in React and JavaScript.
Visual Studio Code is a streamlined code editor with support for development operations like debugging, syntax highlighting, intelligent auto-complete, and embedded Git. It offers collaboration capabilities that are perfect for continuous integration of code.
For the purposes of this tutorial, you can use any React application and store the source code on a GitHub repository.
Here is a link to the repository containing our application
GitHub is a code hosting platform for version control. It’s where millions of developers shape the future of software, together.
GitHub can be seamlessly integrated into many tools and services to extend our workflow, and since we chose Heroku to deploy our application on, GitHub was the best tool available to upload and push our changes securely.
Making a project in Heroku
The first step in using Heroku to automate the building, releasing, and deploying of our application is to make a new project. On the Heroku homepage, you should be able to add a new project by pressing the plus button on the top right. Name it as you wish.
Here I named mine listen-and-swipe-demo!
Linking GitHub Repository
You should be taken to a page like this where you can link your GitHub repository. After giving Heroku access to your GitHub account, you should be able to search for your repository like so.
Tip: It’s best practice to make a new branch specifically for your Heroku deployment as opposed to taking the deployment from the main branch!
Deploying the Application
After choosing the repository, you’ll be taken to the Deploy tab.
You can deploy your application manually first by clicking the Deploy Branch button in the Manual Deploy section. However, it’s likely that you’re going to get an error when checking out your page. You can read more about why that might be here.
My problem was that I didn’t run the npm i -serve command locally on my device.
After getting that running and pushing the repository to GitHub, the website worked!
If you’re still having problems, I would look at other solutions here and here. If these don’t help, try checking out the logs and searching for your errors.
How do we automate it?
Once you have it up and running, you can integrate other CI/CD applications (i.e. Jenkins) into your deployment of the site here. Since our project didn’t necessarily need too much of that, we decided to just create something similar on Heroku. You can choose to make an automatic deployment as seen on the page above. The trigger, in this case, would be any pushes made into the repository.
Once we push changes into the GitHub repository, Heroku automatically runs the project on its own self-contained containers: Dynos. It runs the npm start command here. If you need it to run a different command, you can make a Procfile and specify the command needed to build the project.
Monitor
Heroku provides a lot of plugins that could be integrated into our application for monitoring and testing.
We will certainly be considering some of the Heroku add-ons like Pingdom for uptime monitoring and Bugsnag or Sentry for capturing errors thrown by the application.
This Project was a collaborative effort between Deepti Trivedi, Meredith Quintana, and myself!
Was this helpful? Confusing? If you have any questions feel free to comment below! Make sure to follow if you’re interested in similar content and want to keep learning alongside me!
