Angular 2 + Loopback
Project Setup

In this exercise, I will be showing you how to set up an Angular 2 + Loopback project. Growing upon this structure can lead us to solutions we can use in the real world. In an upcoming blog post I will expand on our development by allowing a user to input content, and save it to a MySQL database using a loopback sdk. If you have not already, please check out my post on Setting up MySQL on Your Local Environment in preparation for the next blog.


Skip the Explanation | Clone the Github project

ng-loopback-starter


Steps to Build ng + lb web-app

Pre-conditions:

  1. Install Angular CLI

    npm install -g @angular/cli
    
  2. Install Loopback CLI

    npm install -g loopback-cli
    

Steps

  1. Create a project directory and navigate to the newly created directory

    mkdir your-project-name
    
    cd your-project-name/
    
  2. Create new Loopback project via Loopback CLI in your project directory via

    lb

    a. You should be be presented with a terminal prompt.
       Press enter to make the Loopback project have the
       same name as the directory you created
    
    b. Press enter again to select the default option to
       use the 3.x (current) version of Loopback
    
    c. Lastly, you will be asked "What kind of application
       do you have in mind?" Select the last option:
    
       "notes (A project containing a basic working example, including a memory database)"
    

    A new Loopback project will be created along with all of its dependencies.

  3. By default, Loopback has route authorization enabled, which we don't want to deal with when we are developing. However, this should be re-enabled if your web application is going to be used in production.

    a. Within `server/boot/authentication.js` comment out `server.enableAuth();`
    
  4. We need to tell loopback to point to the client directory so our client app will be displayed. Within server/middleware.json replace the file property with the following

    "files": {
      "loopback#static": {
        "params": "$!../client"
      }
    },
    
  5. We need to delete the default client directory so we can call our angular app 'client'

  6. Create our angular client using the angular-cli

    ng new client
    
  7. Install our Loopback SDK Builder, which ultimately makes the connection between our client and server

    npm install --save @mean-expert/loopback-sdk-builder
    
  8. Add a sdk build script to our package.json file located in the root of our project. We simply add the following line to the default scripts object

    "build:sdk": "./node_modules/.bin/lb-sdk server/server.js ./client/src/app/shared/sdk"
    

    Now you can run the following to command to create the sdk which will allow us to access methods that we have in our loopback app

    npm run build:sdk
    
  9. Change directories into your new client angluar app and install the following dependencies:

    npm install --save @types/socket.io-client
    
  10. To make it even easier on ourselves, we can utilize some HTML and CSS from Bootstrap. I would recommended exploring what Bootstrap has to offer, which I am sure you will be amazed. We can update our index.html file so we are importing Bootstrap 4, and its dependencies. Update src/index.html (within the client directory) so that it includes the link tag for the bootstrap css and the three script tags to handle jQuery, Tether, and Bootstrap JS dependencies. If we navigate to the browser, you should notice that the text looks a little different. Essentially we now can use all the amazing things bootstrap gives us. If this is confusing at all, please view the github repo for this lesson. Keep in mind that this will only work if you have a data connection. Applications that plan to be used in production will need to add bootstrap within your source code.

  11. The very first thing you will need to do within your client app is to import and configure the components you will be using. Update your client/src/app/app.module.ts so it looks like the following

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { FormsModule } from '@angular/forms';
    import { HttpModule } from '@angular/http';
    import { SDKBrowserModule } from '../shared/index';
    
    import { AppComponent } from './app.component';
    
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        SDKBrowserModule.forRoot()
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
    
  12. Since we only have the component that was generated for us, we will just do it here. Just note that this will need to be done to new components that you create if you want to give it access to our loopback app. Update your client/src/app/app.component.ts so it looks like the following

      import { Component } from '@angular/core';
      import { LoopBackConfig } from '../shared/index';
    
      @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
      })
      export class AppComponent {
        title = 'app works!';
    constructor() {
      LoopBackConfig.setBaseURL('http://127.0.0.1:3000');
      LoopBackConfig.setApiVersion('api');
    }
    
    }
  13. Now run your app! You will need to open two terminals

    a. Within the root of your project directory run the following to start the server

    node .
    

    b. In the second terminal, change directories to client, and run the following to start your client

    npm start
    
  14. Finally within a browser we can navigate to

    (client) http://localhost:4200
    (server) http://localhost:3000/explorer
    

Final Thoughts:

We now have both a client and server applications run, and they are connected to each other. I have hidden many details, so I would really encourage you to check out ng-loopback-starter on Github. I hope this makes you start thinking about where to go next, and how the different pieces work together to form web applications.


Up Next:

Next, we will use our local MySQL database, which we will connect to our Notes model in loopback to, enabling us to save notes! We also will need to create a form component to capture our Note data, which we will send to our server using loopback methods that our sdk gives us access to.