In this final post of the series, I'll be talking about how I deploy my MVP API product FavoritesAPI using Netlify for the frontend and Heroku for the backend.
Deployment Decisions
Your first question might be - "why would you use two different deployment services for the same app"? Which is a very fair question. The answer (covered here) is that the two parts of my application have very different needs. Their distinct needs affect the deployment services I use. For instance, our backend API service needs to be dead simple to deploy. It also needs to talk to a persistent data store. Heroku is a great fit because it makes it incredibly simple to stand up and network with a Postgres database. If you decided to do this on your own (in AWS for instance), you would need to worry about:
- security groups
- networking
- database backups
- snapshots
- separate migration tooling
Heroku abstracts all of this away. With that being said, it's a poor fit for a static marketing site because it doesn't have CDN support out of the box. You can configure DNS addons, but this is an extra layer of complexity compared to a service like Netlify. Netlify rolls out with Netlify Edge, which works like a traditional CDN with more bells and whistles.
Now that we've covered the benefits, let's talk about how to get set up in Heroku.
Heroku Setup
First things first, you'll need to create a Heroku account. No surprise there. Go ahead and also create a new app on the apps page. Next, you'll want to download the heroku CLI.
Database Creation
Now, let's spin up our Postgres database with heroku addons:create heroku-postgresql:hobby-dev. You should now see your database listed when you run heroku addons, and you should see a URL when you run heroku config:get DATABASE_URL. This is the URL that we will use to connect to our database.
Cool, so only a couple minutes in you should have a working app (that's not doing anything), and a working database. Let's now deploy our actual application.
Code Deployment
To do so, go to your app's deployment page, and connect your Github repo. You can either manually deploy, or turn on automatic deploys (which will trigger whenever there's a push to master). Once the deploy is done, you can check out your logs by going to "More" (top left) and "View logs". Don't be surprised if you are getting DB connection errors, since there's nothing in your database at the moment. That is, unless you force sync your models (which you probably shouldn't for prod).
Data Migration
Let's go ahead and add in the data we want. Since I am using sequelize, I need to specify sequelize-cli as a dependency to my project. From there, you can run heroku run sequelize db:create and heroku run sequelize db:migrate to bring up your database. You can double check that the database got set up correctly with production queries (heroku psql). From now on, whenever you have a new database migration, you'll need to run heroku run sequelize db:migrate. You could also make migrating part of your build step, but I don't recommend that added complexity while your app is still small.
Now we'll need to set some environment configs for our application. For instance, I'm using SmallSMS to send myself a text whenever I get a signup. To configure that environment variable, I run heroku config:set SMALLSMS_KEY=MY_KEY. Do the same with your email provider credentials, billing provider, etc.
With all that out of the way, your app should be deployed in a good state. Go ahead and hit your endpoints to be sure, and check out the data with heroku psql.
I've obviously left a gaping hole in this series - which how to write your own API code. I recommend checking out my starter template here if you want to build your own API. I designed the project to make it easily extensible, but feel free to reach out if you have any questions.
Good luck, and thanks for reading!
For tips on how I set up Netlify for my frontend, check out the Landing page tutorial. For any further info about how I set up FavoritesAPI, email me at stephen.huffnagle@gmail.com
