Making a Todo API with Node.js and MongoDB using Loopback4

Hello Peppos!!

LoopBack is a Node.js and TypeScript framework based on Express, open-source and Highly customizable. It allows you to quickly create APIs in a really easy way.

In this tutorial we are going to create a Todo App API using this framework, make sure that Node.js and MongoDB are installed before doing this project.

This tutorial is based on the Todo Tutorial made by LoopBack4.

Installing and running LoopBack4 for the first time

npm install -g @loopback/cli

Then to create a new project:

lb4 app

Answer the following questions this way for the Todo App(or conforming to your project needs):

? Project name: todo-list
? Project description: A todo list API made with LoopBack 4.
? Project root directory: (todo-list)
? Application class name: (TodoListApplication)
? Select features to enable in the project:
◉ Enable eslint: add a linter with pre-configured lint rules
◉ Enable prettier: install prettier to format code conforming to rules
◉ Enable mocha: install mocha to run tests
◉ Enable loopbackBuild: use @loopback/build helpers (e.g. lb-eslint)
◉ Enable vscode: add VSCode config files
◉ Enable docker: include Dockerfile and .dockerignore
◉ Enable repositories: include repository imports and RepositoryMixin
◉ Enable services: include service-proxy imports and ServiceMixin
# npm will install dependencies now
Application todo-list was created in todo-list.

Start the project by entering the project folder with cd getting-started and run with:

npm start

In your browser you can search for http://127.0.0.1:3000/ping to make sure that the project is running.

You can also make an ‘Hello World’ by starting on the STEP 5 in https://loopback.io/getting-started.html, just keep in mind that you will need to create another project for the next steps.

Model

Enter the following command to start creating the model:

lb4 model

And respond the following questions this way:

This will create a model with the Todo App properties.

Datasources

To build one to connect to mongoDB just create the Datasource with:

lb4 datasource

And respond in the following way:

? Datasource name: db
? Select the connector for db: MongoDB (supported by StrongLoop)
? Connection String url to override other settings (eg: mongodb://username:password@hostname:port/database): mongodb://localhost/loop
? host: localhost
? port: 3000
? user:
? password: [hidden]
? database: loopApp
? Feature supported by MongoDB v3.1.0 and above: Yes
create src/datasources/db.datasource.ts
update src/datasources/index.ts
Datasource Db was/were created in src/datasources

Repository

To create one enter the following command:

lb4 repository

And select this way:

? Please select the datasource DbDatasource
? Select the model(s) you want to generate a repository Todo
? Please select the repository base class DefaultCrudRepository (Juggler bridge)

create src/repositories/todo.repository.ts
update src/repositories/index.ts

Repository TodoRepository was created in src/repositories/

Controller

To create one enter the following command:

lb4 controller

And select/write this way:

? Controller class name: todo
Controller Todo will be created in src/controllers/todo.controller.ts

? What kind of controller would you like to generate? REST Controller with CRUD functions
? What is the name of the model to use with this CRUD repository? Todo
? What is the name of your CRUD repository? TodoRepository
? What is the name of ID property? id
? What is the type of your ID? string
? Is the id omitted when creating a new instance? Yes
? What is the base HTTP path name of the CRUD operations? /todos
create src/controllers/todo.controller.ts
update src/controllers/index.ts

Controller Todo was created in src/controllers/

Testing the program

home

Select /explorer to test out the API

API explorer

Here you can test out the Loopback4 API by using the methods displayed on this page.

Here are some requests you can try:

  • POST /todos with a body of
{
"title": "string",
"desc": "string",
"isComplete": true
}
output

You can also see the new Database/Collection that entering thiis new value has created, i used mongoDB Compass for a GUI experience.

DataBase and Collection on MongoDB Compass
Data on compass
  • GET /todos/{id} using the ID you received from your POST, and see if you get your Todo object back.
input
output
  • PATCH /todos/{id}, using the same ID, with a body of { "desc": "need milk for cereal" }
Result on MongoDB Compass

And that’s it, you have a Todo App API!

A Computer Science Student

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store