Page Contents


This example demonstrates how to mount your existing LoopBack 3 application in a new LoopBack 4 project.


  1. Create a new LoopBack 4 project using lb4 app.

    $ lb4 app

    Fill out the prompts as they fit your project and leave all features enabled.

  2. Create a new directory lb3app from the root of your LoopBack 4 application and copy your existing LoopBack 3 application there. You should end up with the following directory layout:

      # LoopBack 3 application in JavaScript
          # LB3 model files
          # LB3 boot scripts
      # front-end assets (LB4 way)
      # LoopBack 4 application in TypeScript
  3. Move LB3 dependencies to the main package.json file and remove lb3app/package.json, lb3app/node_modules/, andlb3app/package-lock.json, if it exists. Typically you will need to add the following entries, plus any connectors or components you are using in your LB3 application.

      "compression": "^1.7.4",
      "cors": "^2.8.5",
      "helmet": "^3.16.0",
      "loopback": "^3.25.1",
      "loopback-boot": "^3.3.0"

    Note: make sure to use loopback-boot@3.2.1 or higher.

    Run npm install from the root of your LB4 project to install the LB3 dependencies.

  4. Disable error handling in your LB3 app, leave it for the new LB4 app.

    • Remove lb3app/server/middleware.development.json
    • Edit lb3app/server/middleware.json and remove the following two entries:
      • final » loopback#urlNotFound
      • final:after » strong-error-handler
    • Remove strong-error-handler from package.json dependencies.
    • In lb3app/server/config.json, if "handleErrors": false is in remoting, move it to rest.
  5. Move your front-end files from lb3app/client to public/ directory and disable static assets in your LB3 app by removing the following entry in lb3app/server/middleware.json:

    • files » loopback#static

    Also remove lb3app/server/boot/root.js, since the main page will be served by the LoopBack 4 project.

  6. Remove lb3app/server/component-config.json to disable LoopBack 3’s explorer. The LoopBack 4 explorer will be used instead.

  7. Install and configure @loopback/booter-lb3app to boot and mount the LB3 application:

    1. npm install --save @loopback/booter-lb3app

    2. Import the component at the top of your src/application.ts file.

      import {Lb3AppBooterComponent} from '@loopback/booter-lb3app';
    3. Register the component in Application’s constructor:


Try it out

Start the new LB4 application

$ npm start
Server is running at

Open the URL printed to console to view your front-end served from public directory or go to to explore the REST API.

Need help?

Check out our Gitter channel and ask for help with this tutorial.


Open an issue in loopback-next and we’ll take a look.



Run npm test from the root folder.


See all contributors.