Web Application Development using Loopback Ionic Angular

  • CrowdforApps
  • Dec 08, 2019

Web Application Development using Loopback Ionic Angular
CrowdforApps Web Development Dec 08, 2019 711

Ever thought of having a solid initial code set up for your personal projects, if yes, using loopback for your projects will be a very good starting point making your development timelines reduce drastically.

Ionic Angular as the FrontEnd and Loopback as your Backend/Middleware

Loopback is built upon ExpressJS which helps the developers to build REST APIs in a declarative matter. Most of the configurations in loopback are done in JSON files in a predefined way making it error prone but also it also comes with the burden of learning the quirks of the framework. Loopback docs itself says it as an opinionated framework to build APIs. Be sure to check the Loopback docs if you have any more doubts or leave a comment, I will try my best to answer your question.

Note: Loopback4 is been released for production which is a major shift from loopback2/3, it will be using Typescript and core modules are rewritten. Haven’t tried it till now, If you have post your experiencies.
We will be using Ionic4 with Angular6 as the front end framework, but we can use any framework or no framework at all as our client app as long as we have a directory for the final client build.

The next part will be a guided tour of the installations required and setting up the project.

Setting up
If already installed, skip this section

I presume you have Node and NPM already installed in your system. If not, please install them. NPM comes within Node installation. If you have any difficulty installing these, let me know.

The first thing is to install loopback and angular packages using NPM. we can use install them globally(preferable) or in a particular directory. Here I will be installing them globally.

Open up your terminal and use the below commands to install the packages. you may also need to add sudo prefix if you don’t have write access. For windows users, the commands will be almost the same.

npm install -g loopback-cli

check whether the installation is successful by typing

lb -v
we will install Angular and Ionic in the similar fashion.

npm install -g ionic cordova
cordova is optional but recommended if you using ionic since we can develop hybrid applications using Cordova. check the installation.

ionic -v
Install Angular cli

npm install -g @angular/cli
ng -v
After all the installations are completed, it’s now time to create the project.

Creating the project
we will run the loopback command which will create us a scaffolding app. Before running the command, change your directory.

What is AngularJS?
lb app
If all is done correctly you will end up this screen.

Loopback creates the basic server files and empty client folder.

Change your directory to your project and without doing anything just type

node .
It serves on port 3000 and a route explorer which is a swagger dashboard for our APIs. If you have selected any thing other than empty server in the above step you will have predefined APIs exposed to you. But since I selected empty server you will see the below screen when we browse http://localhost:3000/explorer/

And the server setup is done.

Now we will create our client app. Enter the below command

ionic start
Go ahead and type enter. you will get the npm installing our packages and using Ionic Pro is optional in the next command.

let’s rename the medium-loopback folder created by Ionic to client. Delete the old empty client folder. From now we will be going the new client folder as our main client.

cd client
ng serve
After compilation, if you browse to http://localhost:4200. You will get the below screen which confirms our client app is working fine.

Now comes the fun part of linking our Ionic app to the loopback server.

We will be configuring this in the middleware.json file in the server folder

This is the file where we will configure our middlewares. we specify the middlewares location and it’s options. Check the loopback docs for more information there is a lot of things we can configure like the authentication, logging, caching and many more. I will try to do more demos if possible trying using all those features. Let me know in the comment section if you want those demos.

For now we will just concentrate on the setting the basic configuration and explore the rest in the future.

Change the files properties as below

"files": {
  "loopback#static": {
    "params": "$!../client/www/"

By the above change we are telling loopback to serve static files from client/www folder and the $! tells it is relative to the middleware.json file.

Top Reasons to choose Angular Today
Go to client and run ng build it will create a www folder with all the build files

Now, go to the project root directory and run using node . and browse through http://localhost:3000/. you still get the below screen.

Because there is one more thing to tell loopback that is in the root.js file.

what actually this file doing is it captures the / route and is sending the status as the response which we saw in the last image. So one way is to comment all the code inside it or rename it. For now, I will rename it from root.js to root.

When we save this and run node. again and browse through localhost:3000 we will get the below screen.

Perfect, we are able to host our client bundles from the server. that implies
localhost:3000/api?—?will expose the REST API .
localhost:3000/explorer?—?will expose the REST API swagger
localhost:3000/* other than /api & /explorer?—?will be redirected to the static folder.
But there is a catch here, try reloading your app. you will see the below screen

What just happened!!!. Don’t worry we can fix it. But there is something we need to know why this happened. If we check the route we wanted to navigate /tabs/(home:home) which is an Angular route. It’s not a static file. What we configured earlier in the middleware.json file to only handle the static files not the routes like above one which can only be handled once Angular bootstraps. So the solution is to provide index.html to the unmatched routes which can initialize Angular bundle and in turn, can take care of the dynamic route. So let’s jump in and handle this case.

Create a new folder called middleware and a new file routing.js and copy paste the below code

// server/middleware/routing.js
var path = require("path");
var index = path.resolve('client/www/index.html')
module.exports = function() {
    return function(req, res, next) {
       res.sendFile(index, function(err) {
           if(err) {
And add the following code to the middleware.json file to tell the above routing.js middleware to loopback.

"final": {
  "./middleware/routing": {
    "params": {}
  "loopback#urlNotFound": {}
Change this part to below

Now save it and try to run the server again. This time it work fine because now loopback responds the unmatched dynamic route with index.html where Angular kicks in resolve the route.

This is the conclusion of this demo. We used Loopback and Ionic/Angular to create a base app. We then connected our Angular app to the loopback server. we got our app running and the REST API server running. But there are many things we haven’t explored yet. Loopback Models, APIs Endpoints, custom middlewares, DB connectors, Authentication and all of these are possible with loopback. If you want more information on these parts, let me know. And also if you find this useful, please let me know


  • CrowdforApps


    Dec 08, 2019

    CrowdforApps is an undeniable research and survey stage that helps programming purchasers and administration searchers to choose the best programming or firm. In the meantime, it encourages IT organizations and programming sellers to support client procurement details, piece of the pie and brand mindfulness. CrowdforApps, similarly as the name recommends, is a committed network of "performing" IT organizations just as programming arrangements.

Leave A Comment :