Article orginally published here :https://alsohelp.com/blog/how-to-deploy-a-rails-7-app-to-heroku

What is Heroku?

Heroku is the most well-known deployment platform, i.e. a place where to make your web application available to the public, on the wild Internet - so not just on your local machine.

Despite the raise of multiple competitors, for many years now, it is still unbeaten in terms of simplicity and ubiquity.

Heroku is so good, that they are able to increase prices despite the lack of roadmap - a miracle in the IT field.

I wrote aboutHatchboxIO recently, which was a decent alternative for Rails users.

The bare minimal Rails 7 application

We are going to ensure that the deployed app is able to handle JS, CSS, and relational database. I see too many tutorials where a "Hello world" page is considered good enough. I personaly advise to try a little more than that, in order to compare deployment platforms from a broader perspective : assets compilation, database, seeding, and so on.

Prerequisites for this tutorial

ruby-v# 3.3.0rails-v# 7.1.3bundle-v# 2.4.10node-v# 20.11.0yarn--version# 1.22.21git--version# 2.34.1psql--version# 14.11

Build a simple Rails app

Ok we take the most simple use case, so let's useBoring Rails™ here

mkdirmyapp&&cdmyappecho"source 'https://rubygems.org'"> Gemfileecho"gem 'rails', '7.1.3.2'">> Gemfilebundleinstallbundleexecrails new.--force--database=postgresql-j=esbuild-c=tailwind

So now we have a production-ready database (postgre), a JS builder (esbuild), a real-world framework (tailwind)

Add an authentication workflow

In order to have some logic, as well as a populated database, let's add an authentication gem.

bundle add authentication-zerobin/rails generate authenticationbin/rails db:create db:migrate

The bare minimal CSS and JS

Just add a little bit of Tailwind classes on one element to see if CSS will work properly

Insideapp/views/sessions/new.html.erb, change the form submit as follow :

<divdata-controller="hello"><%=form.submit"Sign in",class:"text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium rounded-full text-sm px-5 py-2.5 text-center me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"%></div>

And changeapp/javascript/controllers/hello_controller.js as follow :

import{Controller}from"@hotwired/stimulus"exportdefaultclassextendsController{connect(){console.log("Stimulus is working!")}}

The Procfile

The Procfile is an easy-to-understand text file, where you describe what will be run on each release

Good news : you already have a Procfile.dev file for local developments.

web:envRUBY_DEBUG_OPEN=truebin/rails serverjs: yarn build--watchcss: yarn build:css--watch

This is the local Procfile.dev - even if you don't know about it, you can guess it launches a server, and watch changes about js and css.

Now addProcfile file like this, at the root of your project :

web: bundleexecpuma-C config/puma.rbrelease: bin/rails db:migrate

Before Heroku - check that everything is working locally

Launch your app locally with

bin/dev

And open your browser at localhost:3000

You should see the blue button for "sign in", meaning that Tailwind is working locally.

You should see "Stimulus is working!" in the web dev console of the browser.

Try to login with credentials - it should show an error.

Good! So now we have something that is closer of an actual production webapp.

Deploy to Heroku

First, install theHeroku CLI on your local machine.

Then, stay at the root of "myapp" in your terminal, and type :

heroku--version# Should print current Heroku CLI versionheroku login

Now credit card is required (alas) atHeroku billing page

Then

heroku create heroku addons# Should print : No add-ons for app MyAppheroku addons:create heroku-postgresql:miniheroku buildpacks:add--index 1 heroku/rubyheroku buildpacks:add--index 2 heroku/nodejs

And finally

git add.&& git commit-m'initial commit'git push heroku main

Wait for one minute or two, you should see the build logs in your terminal...

and...

Done!

Now you should see your app under the heroku dashboard, which is pretty intuitive.

Open the app, check again that the CSS and JS are working properly.

Summary

Setting up a real-world application was actually longer than deploying an app to Heroku, which is still nowadays the best cross-deployment app for junior developer. I wouldn't advise to stick to Heroku for a long time. Once you get your first users, it may be time to consider another platform, since it's really not cheap once you meet success.

Good luck to all, health first!

David.