What is Heroku and how to deploy your App in five minutes (Rails+JS) (2024)

Heroku is a cloud platform as a service (PaaS) supporting several programming languages. One of the first cloud platforms, Heroku has been in development since June 2007, when it supported only the Ruby programming language, but now supports Java, Node.js, Scala, Clojure, Python, PHP, and Go. For this reason, Heroku is said to be a polyglot platform as it has features for a developer to build, run and scale applications in a similar manner across most languages. Heroku was acquired by Salesforce.com in 2010 for $212 million.

Heroku is known for running apps in dynos — which are really just virtual computers that can be powered up or down based on how big your application is. If you want to process more data or run more complex tasks, you are going to need to add more blocks(what is called scaling horizontally) or increase the size of the blocks (what is called scaling vertically). Heroku then charges you a monthly fee based on the number of dynos that you have and the size of each dyno.

Although Heroku charges you by the dyno, they aren’t actually hosting your app. In fact, the entire Heroku platform, as well as every app built on Heroku is deployed to Amazon Web Services(AWS).

So, why use Heroku when AWS is present?

AWS is an Infrastructure as a Service(IaaS) provider, meaning they are responsible for managing large, shared data centers. These data centers are what we call “the cloud”. Companies like AWS, Azure, and Google have all created IaaS so that developers can pay to host their applications in these data centers instead of building servers themselves.

This is a great trade-off but due to the nature of their business, IaaS providers are more concerned with running the data centers than the developer’s experience working with them. This means there is a high level of knowledge of AWS is required to keep your apps running, especially at scale. If it’s any measure of how much there is to know, AWS offers 8 different certifications for people to validate their knowledge.

Heroku, on the other hand, is a Platform as a Service that sits on top of AWS to provide an experience that is specifically designed to make developers lives easier. For example, in order to keep an application running at scale on Heroku, it only takes knowledge of a few commands on the Heroku CLI and Dashboard.

• Create Heroku account.
• Install Heroku (for MacOS):

$ brew tap heroku/brew && brew install heroku

• After you install the CLI, run the heroku login command. You’ll be prompted to enter any key to go to your web browser to complete login. The CLI will then log you in automatically.

$ heroku login
// => heroku: Press any key to open up the browser to login or q to exit
 › Warning: If browser does not open, visit
 › https://cli-auth.heroku.com/auth/browser/***
heroku: Waiting for login...
Logging in... done
Logged in as me@example.com

Rails backend

• Add the pg gem

If you’re using an existing app that was created without specifying --database=postgresql, you need to add the pg gem to your Rails project. Edit your Gemfile and change this line:

gem 'sqlite3'

To this:

gem 'pg'

Now re-install your dependencies (to generate a new Gemfile.lock):

$ bundle install

• Create a Procfile

Change the command used to launch your web process by creating a file called Procfile in your App root directory

In file Procfile write:

web: bundle exec puma -t 5:5 -p ${PORT:-3000} -e ${RACK_ENV:-development}

• Store your app in Git

Heroku relies on Git for deploying your project. If your project is not already in Git, run these commands in your Rails app directory to initialize and commit your code to Git:

$ git init
$ git add .
$ git commit -m "init"

• Deploy your application to Heroku

Make sure you are in the directory that contains your Rails app, then create an app on Heroku:

$ heroku create my-app-backend
// =>Creating app... done, my-app-backend
https://my-app-backend.herokuapp.com/ | https://git.heroku.com/my-app-backend.git

Deploy your code:

$ git push heroku master
// =>remote: Compressing source files... done.
remote: Building source:
......
remote: Verifying deploy... done.
To https://git.heroku.com/my-app-backend.git
 * [new branch] master -> master

It is always a good idea to check to see if there are any warnings or errors in the output. If everything went well you can migrate your database.

• Migrate your database

If you are using the database in your application, you need to manually migrate the database by running:

$ heroku run rake db:migrate

If needed:

$ heroku run rake db:seed

And this is it. Let’s deploy our frontend.

JavaScript frontend

Heroku allows web-hosting, but they do not host static websites with HTML, CSS, and JS.

Initial attempt of trying to do so, I was hit with the following Build Log error:

! No default language could be detected for this app.HINT: This occurs when Heroku cannot detect the buildpack to use for this application automatically.See https://devcenter.heroku.com/articles/buildpacks! Push failed

What is a buildpack?

Buildpacks are composed of a set of scripts depending on the programming language used. These scripts are responsible for transforming the deployed code before being executed on the dyno manager. (The scripts gather the dependencies, which then outputs generated code. When pushing to Heroku, the code is received by the slug compiler which transforms the repo into a slug and off to a dyno for execution).

Listed on the Heroku reference page, the supported buildpacks offered are: Ruby, Node.js, Clojure, Python, Java, Gradle, Grails, Scala, Play, PHP, Go. These buildpacks are searched within the deployed repo based on the specified language used. However, the buildpacks are not offered for the typical HTML, CSS, Javascript languages. This explains the error you received: “no default language could be detected for this app”.

Don’t worry, it’s an easy fix for your portfolio or personal blog. A small little trick to get Heroku to recognize the files of your static website is to trick it into being a Node.js app.

• First of all don’t forget to change url in your Fetch

If you were developing on your local environment, you probably were fetching your API data from your localhost. Change all your fetch urls from your localhost (http://localhost:3000/songs) to new Heroku address (https://my-app-backend.herokuapp.com/songs)

• Add package.json file in the root directory.

Add this code in your package.json file:

{
 "name": "project_name",
 "version": "1.0.0",
 "description": "Project Description",
 "scripts": {
 "start": "serve"
 },
 "dependencies": {
 "serve": "^10.0.1"
 },
 "author": "Your Name"
}

• !!! If you already tried to deploy your project before adding package.json file, you need to create new folder and copy-paste the project there.
• Commit your code to Git:

$ git init
$ git add .
$ git commit -m "heroku workaround"

• Deploy your frontend to Heroku

$ heroku create my-app
// =>Creating app... done, my-app
https://my-app.herokuapp.com/ | https://git.heroku.com/my-app.git

Deploy your code:

$ git push heroku master
// =>remote: Compressing source files... done.
remote: Building source:
......
remote: Verifying deploy... done.
To https://git.heroku.com/my-app.git
 * [new branch] master -> master

Boom! Done! Congratulations, you deployed your app!