Deploying A Live Site With Netlify and/or Heroku (Part 2)

I left off in Part 1 with just how you can use Netlify to deploy a frontend project. Now I’m going to go through how you can deploy with Heroku, and then how you can use them together for the same overall project. So let’s dive into Heroku.

Heroku

Setting up Heroku is not quite as easy as setting up Netlify, but it’s still fairly straight forward. The first thing you’ll need to do is create an account on their site. Once you have an account setup, what I’ve found to be an effective strategy is to use the Heroku CLI to proceed with setting up your project on their server. You can easily google “Heroku CLI” and there’s instructions on their docs about how to get it set up. How to download:

And getting started:

These shots are straight from the official docs and there’s more info there that I’m not going to go into here, but it’s pretty easy to follow.

So once you’re setup with the CLI, before going any further you need to know that you need to have a postgresQL database in order for it to work on Heroku’s servers. I built my projects and backends with Rails so if you’re like me the default database is Sqlite. This can be an issue if you’re not aware of it. The best thing to do is that if you know when starting the project that you’ll be deploying it, you can override the default and set up a postgres database from the beginning, then you’re good.

rails new myapp --database=postgresql

If you didn’t do that you can just change it before deploying. It’s something that scares newer devs to have to deal with, but in my experience it’s not too bad. I’m not going to go through the steps here, but some quick googling will get you what you need.

So at this point things are pretty simple although it is easy to run into some issues. Once you’re logged in via the Heroku CLI, you want to make sure you’re in the correct directory, then type ‘heroku create’ in your terminal. This is going to actually create the project on Heroku’s end and you should see the weird random name it gives to the project like “hidden-thicket-etc.”

Now at this point you should just be able to run a normal git commit but instead of running the normal ‘git push’ command you would type this:

git push heroku main

Basically this just pushes the project to the repo on Heroku’s server instead of just your personal github. Where it says ‘main’, this is referring to the branch you want to get pushed to Heroku, so if you want a different branch other than main, you need to specify that. Once you run this command you’ll see the full deployment happening in your terminal. At this point there are often things that cause the deployment to fail. It can be frustrating, but Heroku is pretty good at pointing out what went wrong, and will often tell you exactly how to fix it. It usually has to do with the way your project is configured, and it can’t read a particular version or a dependency or something like that. It’ll tell you how to update what you need to, you run that command (which you can usually copy and paste from the terminal), then run ‘git push heroku main’ again and it’ll retry the deployment.

Once your deployment completes successfully you just need to migrate your database:

heroku run rake db:migrate

You can seed your database with any data you may have:

heroku run rake db:seed

And then you can just run ‘heroku open’ and your live app with open in the browser. As you can see the commands are things you are probably familiar with just adding in the ‘heroku’ to let your terminal know exactly what you’re dealing with. And that’s it! You now have a live site via Heroku. If you want to make any updates you just need to remember to run ‘git push heroku main’ again when you make a commit.

Heroku And Netlify Combined

So with what I just described above if you had a completely self contained Rails app for instance, then when you run ‘heroku open’ and go to the url Heroku builds for you, you will see your full app in the browser at that url. Heroku works very well in that instance. But you can also use it to purely host the backend for a project, while hosting the frontend on Netlify. This combination comes in handy when you have something like a Rails backend API working with a fully Javascript frontend. If this is the case when you go to your Heroku url you’ll see something like this:

It’ll just look like any other API data because that’s all thats been setup there. To actually see the app you’ll need to go to the Netlify url. Similarly if you’re making fetch requests from your frontend to backend you’ll need to now use the Heroku url to make those.

Conclusion

Being able to deploy a live site to the internet is a true milestone for a new dev that’s just starting out. Netlify and Heroku and two services that make it pretty easy to get your project up there for the world to see. There’s a lot more that you can do, this is definitely just the tip of the iceberg, but it’s a great place to start and know that you’re making some real progress.