Putting it all together

LoopBack 4 Todo Application Tutorial - Putting it all together

Page Contents

We’ve got all of our artifacts now, and all that’s left is to bind them to our Application so that LoopBack’s Dependency injection system can tie it all together for us!

LoopBack’s boot module will automatically discover our controllers, repositories, datasources and other artifacts and inject them into our application for use.

NOTE: The boot module will discover and inject artifacts that follow our established conventions for artifact directories. Here are some examples:

Controllers: ./src/controllers

Datasources: ./src/datasources

Models: ./src/models

Repositories: ./src/repositories

To find out how to customize this behavior, see the Booters section of Booting an Application.

src/application.ts

import {BootMixin} from '@loopback/boot';
import {ApplicationConfig} from '@loopback/core';
import {RepositoryMixin} from '@loopback/repository';
import {RestApplication, RestServer} from '@loopback/rest';
import {MySequence} from './sequence';

export class TodoListApplication extends BootMixin(
  RepositoryMixin(RestApplication),
) {
  constructor(options?: ApplicationConfig) {
    super(options);

    // Set up the custom sequence
    this.sequence(MySequence);

    this.projectRoot = __dirname;
    // Customize @loopback/boot Booter Conventions here
    this.bootOptions = {
      controllers: {
        // Customize ControllerBooter Conventions here
        dirs: ['controllers'],
        extensions: ['.controller.js'],
        nested: true,
      },
    };
  }

  async start() {
    await super.start();

    const server = await this.getServer(RestServer);
    const port = await server.get<number>('rest.port');
    console.log(`Server is running at http://127.0.0.1:${port}`);
    console.log(`Try http://127.0.0.1:${port}/ping`);
  }
}

Try it out

Let’s try out our application! First, you’ll want to start the app.

$ npm start
Server is running on port 3000

Next, you can use the API Explorer to browse your API and make requests!

Here are some requests you can try:

POST /todos with a body of { "title": "get the milk" }
GET /todos/{id} using the ID you received from your POST, and see if you get your Todo object back.
PATCH /todos/{id} with a body of { "desc": "need milk for cereal" }

That’s it! You’ve just created your first LoopBack 4 application!

Where to go from here

There are still a ton of features you can use to build on top of the TodoListApplication. Here are some tutorials that continues off from where we left off here to guide you through adding in an additional feature:

Integrate with a REST based geo-coding service: A typical REST API server needs to access data from a variety of sources, including SOAP or REST services. Continue to the bonus section to learn how LoopBack connectors make it super easy to fetch data from other services and enhance your Todo application with location-based reminders.
Add related Model with TodoListApplication: If you would like to try out using some of the more advanced features of LoopBack 4 such as relations, try out the TodoList tutorial which continues off from where we leave here.

Putting it all together