So You Want To Deploy Your Web App?

Photo by Tianyi Ma on Unsplash

Here are the steps you can take to ensure that your deployment goes smoothly.

In this article, we’ll use a combination of Heroku and Travis CI in order to deploy your application.

First, let’s backup. Heroku is a cloud platform that allows developers to build and deploy in the cloud. Here are the steps you should take to install Heroku:

1. Install the Heroku CLI: https://devcenter.heroku.com/articles/heroku-cli (we will need it later!)
2. Go to heroku.com and sign up
3. Click “new” and create a new app. Choose the app’s name and click create app
4. Next to deployment method, select “Github”, then search for your GitHub repo
5. If your app has any secrets (API keys, client keys, etc), click settings and add them to “config vars”
6. If your app needs to be connected to a database, click resources, under “add ons” type Postgres, click the free option. In your terminal, run “heroku run bash” and then you can seed your database (if necessary)
7. Choose a branch to deploy and then click deploy

*note: you could also do all of this from the command line here: https://devcenter.heroku.com/articles/heroku-cli

Heroku is pretty straightforward — you sign up, connect your GitHub repo, connect a database, and voila! You have a deployed site! That’s pretty awesome! Now you can send your mom your website! Only problem is, what if I make a few edits in my code editor and now I want the changes to be reflected on my site…Do I have to re-deploy every time I want to integrate my app? And how will I know if my tests are still passing with my most recent changes?

That’s what Travis is for! Let’s talk about Travis CI. CI stands for continuous integration. CI often gets paired with CD, which stands for continuous deployment. Continuous Integration and Continuous Deployment (CI/CD) is an extremely valuable middleman that ensures that your app is functioning as expected. Travis is cool because it will run the tests you’ve written for your app, and if nothing breaks it will send it to Heroku to be automatically deployed. This is awesome because you don’t have to manually deploy in Heroku every time you make an update (which can sometimes take *forever*). It also prevents major issues and things breaking horribly down the line in your deployed app because Travis is constantly running your tests based on your changes to ensure everything is working as expected. Here are the steps you can follow in order to successfully integrate your app with Travis-CI:

1. Go to travis-ci.org and sign up, sync your GitHub account
2. Enable Travis on your app’s repository by toggling the button
3. Add a .travis.yml file (follow directions here to know what goes in the yml file: https://docs.travis-ci.com/user/tutorial/ )
4. Find your Heroku API key
5. To connect to Heroku, you’ll need to encrypt a Heroku authentication token into your .travis.yml file. In the command line, run “gem install travis”, and then “travis encrypt your-heroku-api-key“.
6. Commit and push your files to GitHub. In your Travis build logs, you’ll see that the build is running. You’ll know the build was successful if your most recent changes are highlighted in green. If your changes are green, then you can check Heroku and you should see a successful deployment.

So here are some things to remember when you’re working with Travis:

1. If Travis shows your most recent GitHub changes in red, that means that something broke (maybe your tests failed? Maybe the way you named your files doesn’t match with what Travis sees?) and your app was not sent to Heroku to be deployed.

2. If Travis shows your most recent GitHub changes in green, then that means that your tests passed and your app was sent to Heroku for the changes to be integrated.

3. Travis also needs access to your SECRETS! This was a confusing issue I ran into when I was trying to deploy my app and Travis kept failing with no explanation.

4. The Travis logs are usually helpful and you should try to read them to understand why things are failing. One time when I was deploying through Travis, my build was failing because it was looking for a lowercase “forms” folder but my app listed an uppercase “Forms” folder. Ultimately I had to move the files out of the forms folder because even renaming the files didn’t help Travis understand. Sometimes Travis can be a mystery!

Travis is definitely a little confusing when you’re first getting started, but once you understand what it does and how it works with Heroku, you’ll have a much easier time debugging and finding errors within the Travis build files. Overall, Travis is an extremely useful tool that will monitor your changes and ensure your tests are passing, especially as your app grows in size. Once you have Heroku and Travis up and running, you can sit back, relax, and know your app is smoothly deployed.