Host Your Web Application For Free With Heroku (step-by-step)

No Comments

Do you want to learn how to host your next web application for free with Heroku? In this post, you will learn what is required to host your site, and then I will show you how to do so step-by-step!

In this post, we will cover the following topics:

What is Heroku?

Heroku is a cloud and container-based Platform as a Service that allows you to deploy, manage and scale your web applications. It offers multiple different ways that we will look at in the following sections. Heroku offers a free tier that enables you to host your web application for free. You can use it for simple websites or complete apps.

Some questions regarding Heroku

What can you host with Heroku and what not?

Heroku allows you to host both dynamic and static sites. In addition, they also have buildpacks for basically a lot of different frameworks and languages.

How is the URL of your final site structured?

The URL structure is: http://projectname.herokuapp.com.

Can you use a custom domain?

Yes, for in-depth instructions, check here.

What state does the repository have to be in (Github method)?

The repository can be either private or public.

Which requirements apply to using Heroku for free?

The project has to be non-commercial to be used for free.

How to create a free application with Heroku?

We will have a look at two different methods offered by Heroku. First is the Heroku CLI, which allows you to host every repository, and then Heroku with GitHub, which allows you to host every GitHub repository easily.

General steps

Before we can host our project, you have to create a new app and pipeline in the Heroku Dashboard. Therefore follow the following steps:

  1. Create a new app
host application with heroku: create new app
  1. Enter needed information
  2. Click the button “Add to pipeline…”
  3. Select create a new pipeline
  4. Fill in information about the pipeline
  5. In the end, it should look like this:
host application with heroku: information for new app
  1. Click “Create app”

Host Heroku through the Heroku CLI

Before publishing to the web, we need a project and an existing repository. For this example, I will use the simple portfolio website we created in this post here.

To get started, you first need to install the Heroku CLI that you can download here.

Then to host your project, first, enter the root directory of the project, then follow these steps:

  1. heroku login
  2. heroku git:remote -a <app-name>
  3. heroku buildpacks:add heroku/nodejs
  4. heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static.git
  5. git push heroku main

Now you can visit the hosted application under https://<app-name>.herokuapp.com.

Host Heroku with GitHub

To host your application from an existing GitHub Repository, you need to complete the following steps in the Heroku Dashboard.

  1. Add heroku/nodejs and https://github.com/heroku/heroku-buildpack-static.git buildpacks to the pipeline
add buildpacks
  1. Connect Heroku to GitHub
host application with heroku: connect github
  1. Select the repository
connect repository
  1. Add static.json to the repository (for vite and similar apps):
{
  "root": "./dist"
}
  1. Deploy the app
host application with heroku: deploy app

Now you can visit the hosted application under https://<app-name>.herokuapp.com.

Conclusion

In this post, we learned how to use Heroku to host applications for free. You can use it to host your next personal (not commercial) project for free!

Did you use Heroku already? Share your experience in the comments below!

In case you got some questions regarding this post or anything else regarding your projects, feel free to ask! I would love to help you 🙂

And lastly, if you liked this blog post, consider subscribing to my newsletter. In it, I send a monthly update on all the posts I created!

Discussion (0)

Add Comment

Your email address will not be published.