Deploying Couch Potato with Heroku
At this point in our project, we had a functioning chat website that allowed users to either start a new chat room or join an existing room. We were able to send messages back and forth, which we tested by running the Node.js application in two browsers (Chrome and Safari) side by side, to make sure messages sent from one browser were received by the other.
As you may know, the goal of this project was to configure the chat room next to a Hulu video player so Couch Potato users could chat with each other while streaming Hulu content. In order for our users to have access to the chat room without having to run it on their local machines, our next step was to deploy the application on Heroku. Heroku hosts applications on their platform, allowing any internet user with the address access to them. We chose to deploy using Heroku because that’s what we used exclusively throughout our time at Grace Hopper Academy, and we decided to stick with what we knew.
Deploying to Heroku can be really simple, especially if you already have a Heroku account and the Heroku Command Line Interface installed. We created an account on the Heroku website and then followed these instructions: https://devcenter.heroku.com/articles/heroku-cli. Installing the Heroku CLI gives you access to commands such as heroku, create and deploy.
We knew we would need to implement automatic deployment because we used Webpack to build our application, which meant we had a bundle.js and a bundle.js.map file being ignored by Git. In order to deploy successfully on Heroku, Git needed access to these files. We would have to force add these otherwise ignored bundle files so our deployment would succeed, and it made sense to do this in a script rather than manually every time we deployed. Other benefits of automatic deployment include making it easy for each member of our team to deploy the application and eliminating the possibility of human error.
In order to configure automatic deployment, we adding a deploy script to our package.json, which points to a file in our project’s directory. This file strings a bunch of commands together that, in short, gives Heroku access to our build files and then deploys our application. The script contains a command to checkout to a new “deploy” branch in Git, one to add the ignored files to this branch, one for committing any changes, and finally one to push the deploy branch onto the master branch. The script will delete the deploy branch once the build completes. This script file is also useful because anytime a single line of the script fails, the script will quit, causing no damage to the previous version.
We found the following Fullstack Academy tutorial super helpful while creating the deploy script.
Once we had our script, all we had to do was use the Heroku command create with our application name, Couch Potato, to create a new Heroku app (you only have to do this once!) and then we could use npm run deploy anytime we wanted to deploy the latest version of our application. Once we had automatic deployment set up, we didn’t have to think twice about deploying our application for the rest of our project, which saved us a lot of time in the long run. If you’re considering using automatic deployment, we highly recommend it!
Stay tuned for our next post where we talk about incorporating our chat room into our Chrome extension!
Interested in learning more about Couch Potato? Start this blog series from the beginning! And don’t forget to download Couch Potato from the Chrome store so you can start watching shows with friends now!
