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.
- 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.
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
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:
# Dependency directories
# Typescript v1 declaration files
# Optional npm cache directory
# Optional eslint cache
# Optional REPL history
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
Click Deploy branch to deploy the changes in main branch, as shown below:
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:
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.