JSPM

  • Created
  • Published
  • Downloads 216
  • Score
    100M100P100Q88174F
  • License MIT

Tutorial example on how to add existing an LB3 application to a LB4 project

Package Exports

  • @loopback/example-lb3-application

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@loopback/example-lb3-application) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@loopback/example-lb3-application

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

Tutorial

  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:

    lb3app/
      # LoopBack 3 application in JavaScript
      common/
        models/
          # LB3 model files
      server/
        boot/
          # LB3 boot scripts
    public/
      # front-end assets (LB4 way)
    src/
      # 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:

      this.component(Lb3AppBooterComponent);

Try it out

Start the new LB4 application

```sh
$ npm start
Server is running at http://127.0.0.1:3000
```

Open the URL printed to console to view your front-end served from public directory or go to http://127.0.0.1:3000/explorer to explore the REST API.

Need help?

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

Bugs/Feedback

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

Contributions

Tests

Run npm test from the root folder.

Contributors

See all contributors.

License

MIT