How to deploy LoopBack 4 application in Heroku

In this tutorial, I will show you steps of how to deploy a simple LoopBack 4 application in Heroku.

Pre-requisites

• Nodejs + NPM installed on your machine.
• Understanding of Git commands.

Step 1: Install LoopBack 4 CLI

Install LB4 cli by running the following command:

$ npm i -g @loopback/cli

The above command will install command-line tools to help us quickly create artifacts like models and services.

Step 2: Setup example project

We will need a working LoopBack 4 application to deploy to Heroku. Fortunately, LB4 cli comes bundled with lots of example projects to help us get started. Let’s use these to speed things up. On your terminal, navigate to the location you would like to store the project in e.g. Projects on your computer and run:

$ lb4 example todo-jwt

The above command will generate a LB4 application with JWT authentication enabled in the folder you have chosen, e.g.

$ Projects/loopback4-example-todo-jwt

Step 3: Test local machine setup

Let’s test our setup in step 2 by:

$ cd loopback4-example-todo-jwt 
$ npm start

If all went well you will see the message below on your terminal:

Server is running at http://[::1]:3000

Open http://localhost:3000/explorer/ on your Browser and you will see the running application.

Step 4: Update project configurations

Setup Git in the local repository by

git init

Update package.json to include “postinstall”: “npm run build”. The previous command will instruct Heroku to build the project immediately after installing dependencies. Next, add another script, “start:prod”: “node dist/index.js”. This command lets Heroku know where to locate the file needed to bootstrap the LoopBack 4 application.

Lastly, create a Procfile and add the below content to it. The line informs Heroku not to use the start script to bootstrap the application but rather use start:prod script:

web: npm run start:prod

Add .gitignore file with the below content, as we do not need to commit all files:

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Dependency directories
node_modules/
jspm_packages/

# Typescript v1 declaration files
typings/

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional REPL history
.node_repl_history

# Transpiled JavaScript files from Typescript
dist*/
*.tsbuildinfo

.DS_Store
.eslintcache

Commit and push all the code changes by

git add . && git commit -am “ci: add heroku deployment configs” && git push

Let’s head over to Heroku dashboard to create a new project.

Step 5: Heroku dashboard configs

Create a new project in Heroku dashboard by clicking the new button as illustrated below:

Lets give our app a name, and click Create app as illustrated below:

Let’s link our Heroku app to our GitHub repo:

Search for your repo and click connect

Note: If you named your branch anything else searching with deploy will not list your branch. Please search with the name you used to create your branch

Click Deploy branch to deploy the changes in main branch, as shown below:

Note: to enable automatic deployments each time you push to main branch click the Enable Automatic Deploys button

Notice the build log will start to show the sequence of steps as defined in your package.json above starting with npm install. If all went well, you should see the deployment link at the end of the build log, as per below illustration:

Visit https://test-loopback-4-deployment.herokuapp.com/explorer/ on your Browser to see the deployed application:

Note: this application may not be available the next time you visit this page. However, if you following the steps above you will have your own application available in the URL of your choosing.

Summary

In this tutorial, we looked at how to deploy a LoopBack 4 application in Heroku in simple steps. This is a simple application that has a JSON file database. However, in most cases you might have a use case that requires the use of a real database.

In future tutorial we will look at how to connect this application to a real database. Stay stunned to the updates in this regard.

https://github.com/mrmodise/deploy-loopback-4-app-in-heroku