LoopBack 4 Todo Application Tutorial - Create app scaffolding

Create your app scaffolding

The LoopBack 4 CLI toolkit comes with templates that generate wholeapplications, as well as artifacts (for example, controllers, models, andrepositories) for existing applications.

To generate your application using the toolkit, run the lb4 app command andfill out the on-screen prompts:

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

For this tutorial, when prompted with the options for enabling certain projectfeatures (LoopBack’s build, eslint, mocha, etc.), leave them all enabled exceptfor docker.

Structure

After your application is generated, you will have a folder structure similar tothe following:

  1. public/
  2.   index.html
  3. src/
  4.   __tests__/
  5.     README.md
  6.     acceptance/
  7.       home-page.acceptance.ts
  8.       ping.controller.acceptance.ts
  9.       test-helper.ts
  10.   controllers/
  11.     index.ts
  12.     README.md
  13.     ping.controller.ts
  14.   datasources/
  15.     README.md
  16.   models/
  17.     README.md
  18.   repositories/
  19.     README.md
  20.   application.ts
  21.   index.ts
  22.   migrate.ts
  23.   sequence.ts
  24. node_modules/
  25.   ***
  26. LICENSE
  27. README.md
  28. index.js
  29. index.ts
  30. package.json
  31. tsconfig.json
  32. eslint.build.json
  33. eslint.json
  34. .mocharc.json
FilePurpose
index.tsAllows importing contents of the src folder (for use elsewhere)
index.jsTop-level file connecting components of the application.
package.jsonYour application’s package manifest. See package.json for details.
tsconfig.jsonThe TypeScript project configuration. See tsconfig.json for details.
eslint.jsonESLint configuration
eslint.build.jsonESLint configuration (build only)
README.mdThe Markdown-based README generated for your application.
LICENSEA copy of the MIT license. If you do not wish to use this license, please delete this file.
src/application.tsThe application class, which extends RestApplication by default. This is the root of your application, and is where your application will be configured. It also extends RepositoryMixin which defines the datasource.
src/index.tsThe starting point of your microservice. This file creates an instance of your application, runs the booter, then attempts to start the RestServer instance bound to the application.
src/sequence.tsAn extension of the Sequence class used to define the set of actions to take during a REST request/response.
src/controllers/README.mdProvides information about the controller directory, how to generate new controllers, and where to find more information.
src/controllers/ping.controller.tsA basic controller that responds to GET requests at /ping.
src/datasources/README.mdProvides information about the datasources directory, how to generate new datasources, and where to find more information.
src/models/README.mdProvides information about the models directory, how to generate new models, and where to find more information.
src/repositories/README.mdProvides information about the repositories directory, how to generate new repositories, and where to find more information.
src/tests/Please place your tests in this folder.
src/tests/acceptance/ping.controller.acceptance.tsAn example test to go with the ping controller in src/controllers.
.mocharc.jsonMocha configuration for running your application’s tests.

Navigation

Next step: Add the Todo Model