# Change Log v1.0.2

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

## 1.0.2 (2019-05-30)

Note: Version bump only for package @loopback/example-lb3-application

## 1.0.1 (2019-05-23)

### Bug Fixes

- example-lb3-application: remove deprecation warning (a24e7c0)

# 1.0.0 (2019-05-14)

### Features

- add lb3 application (bf60011)

# @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

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/`, and`lb3app/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"
       }

   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

- Guidelines
- Join the team

## Tests

Run `npm test` from the root folder.

## Contributors

See all contributors.

## License

MIT