Application Deployment on Heroku

Create a Heroku Account

If you don't have an existing account, create a Heroku account by signup here (opens in a new tab).

Create New Projects

We will use the generated application in this GitHub repository (opens in a new tab) as an example. To host our generated application on Heroku, you can create a new project in two ways:

Heroku Dashboard

Using Heroku Dashboard (opens in a new tab) is the easiest way to start a new project. It uses web user interfaces.

Heroku CLI

The Heroku CLI (opens in a new tab) or heroku command-line interface (CLI) is a tool that makes any Heroku-related task right from the terminal. To install heroku, please go to their documentation (opens in a new tab).

Before using this CLI tool, you need to be authenticated first. You can run heroku with the login option:

$ heroku login
 
heroku: Press any key to open up the browser to login or q to exit:
Opening browser to https://cli-auth.heroku.com/auth/cli/browser/e4f42c4d?requestor=SFMyNTY
Logging in... done
Logged in as han+solo@gmail.com

And then to create a new project from Heroku CLI:

$ heroku create anime-figure-store
 
Creating ⬢ anime-figure-store... done
https://anime-figure-store-d294970a1217.herokuapp.com/ | https://git.heroku.com/anime-figure-store.git

This process is the same as creating a project with Heroku Dashboard, and from now on, we will use Heroku CLI as our main deployment tool.

Deploying Generated Application

Currently, there are three different deployment methods for Heroku.

For simplicity, we will use the Git repository method for the deployment of the generated application to Heroku

Git Repository

If you already have an application, you can clone it from the GitHub repository. For our example, we will clone it to the local machine.

$ git clone git@github.com:roq-ai/anime-scaled-fig-2d3f.git

In order to deploy existing repositories, we need to add Heroku as the target remote repository.

Suppose we are already in the generated application root directory source code. To add Heroku as the remote repository, run this command:

$ heroku git:remote -a anime-figure-store

If everything is set right, you will see that our local git repository will have heroku as the remote target:

set git remote heroku to https://git.heroku.com/anime-figure-store.git

Before we push our application code into Heroku, we need to set the environment configuration on the ROQ Console.

ROQ Console Environments

For better management, we need to create a new environment in the ROQ Console for the Heroku deployment.

Select the desired application from the ROQ Console and add a new environment, or navigate to the ROQ Console Environment (opens in a new tab) for the active application.

Next, we need to set the base URL for the Heroku application in the ROQ Console. We can find this URL in the Heroku Dashboard domains setting page or using Heroku CLI:

$ heroku domains

The command will output all domains attached to the app. For the first-time application setup, this command will return the default URL created by Heroku. For example:

=== anime-figure-store Heroku Domain
 
anime-figure-store-3e469cbd65b3.herokuapp.com

We need to set this base URL in the ROQ Console application settings. Go to the ROQ Console and find Application Details ➔ Settings menu.

You need to configure these two main settings:

• Base URL: https://anime-figure-store-3e469cbd65b3.herokuapp.com

• Authentication URLs: https://[base_url_heroku]/api/auth/[action]

Click Copy Env File button (choose the on with the ROQ's authentication feature) to copy new environment variables for Heroku deployment. Paste them into the .env file in the app's root directory.

Heroku PostgreSQL

ROQ's generated application needs PostgreSQL by default, and Heroku already provides an add-on. Go to the Resources tab in the Heroku Dashboard and find "PostgreSQL" add-on from Heroku.

Click the Submit Order Form button, and Heroku will automatically setup the DATABASE_URL environment variable in the dashboard Config Vars settings.

Heroku Environments

Heroku's Config Vars are equivalent to environment variables. However, setting environment variables on Heroku can be tedious since it must be done one at a time.

We can set the environment variables manually or create automated scripts for that. For example, to automate it using Node.js:

// set-heroku-env.js
const { exec } = require('child_process');
const fs = require('fs');
const path = require('path');
 
// Read the .env file
const envFile = path.join(__dirname, '.env');
const envVariables = fs.readFileSync(envFile, 'utf8').split('\n');
 
let command = 'heroku config:set';
 
envVariables.forEach((line) => {
  // Filter out comments and empty lines
  if (line && !line.startsWith('#')) {
    command += ` ${line}`;
  }
});
 
// Set the Heroku config variables in one command
exec(command, (error, stdout, stderr) => {
  if (error) {
    console.error(`Error setting variables: ${error}`);
    return;
  }
  console.log('Set variables:');
  console.log(`STDOUT: ${stdout}`);
  console.log(`STDERR: ${stderr}`);
});  

Then, we can run it in the root project folder (where the .env resides). The script will set config var in Heroku one by one:

$ node set-heroku-env.js

Push the code

The last step is to push the generated application code into the Heroku repository. This command will automatically build the generated application on Heroku:

$ git push heroku main

ROQ on Heroku

If everything is set up correctly, we can run the installation test for our application on Heroku. We can use heroku to directly open the deployed application.

$ heroku open