feat: add lb3 application

This an example showing how to add an existing LoopBack 3 application to a LoopBack 4 project. Co-authored-by: Miroslav Bajtoš <[email protected]>
loopbackio · May 13, 2019 · 2836207 · 2836207
1 parent db1c004
commit 2836207
Show file tree

Hide file tree

Showing 46 changed files with 3,462 additions and 0 deletions.
diff --git a/CODEOWNERS b/CODEOWNERS
@@ -28,6 +28,7 @@ examples/todo/* @bajtos @hacksparrow
 examples/express-composition/* @nabdelgadir
 examples/greeter-extension/* @raymondfeng
 examples/hello-world/* @b-admike
+examples/lb3-application/* @bajtos @nabdelgadir
 examples/log-extension/* @hacksparrow
 examples/rpc-server/* @hacksparrow
 examples/soap-calculator/* @marioestradarosa

diff --git a/docs/site/Examples.md b/docs/site/Examples.md
@@ -33,6 +33,7 @@ $ lb4 example
   soap-calculator: An example on how to integrate SOAP web services.
   express-composition: A simple Express application that uses LoopBack 4 REST API.
   greeter-extension: An example showing how to implement the extension point/extension pattern.
+  lb3-application: An example LoopBack 3 application mounted in a LoopBack 4 project.
 ```
 
 Please follow the instructions in

diff --git a/docs/site/MONOREPO.md b/docs/site/MONOREPO.md
@@ -18,6 +18,7 @@ The [loopback-next](https://github.com/strongloop/loopback-next) repository uses
 | [example-express-composition](https://github.com/strongloop/loopback-next/tree/master/examples/express-composition) | @loopback/example-express-composition | A simple Express application that uses LoopBack 4 REST API                                                                                                                                                                                                                                       |
 | [example-greeter-extension](https://github.com/strongloop/loopback-next/tree/master/examples/greeter-extension)     | @loopback/example-greeter-extension   | An example showing how to implement the extension point/extension pattern using LoopBack 4                                                                                                                                                                                                       |
 | [example-hello-world](https://github.com/strongloop/loopback-next/tree/master/examples/hello-world)                 | @loopback/example-hello-world         | A simple hello-world application using LoopBack 4                                                                                                                                                                                                                                                |
+| [example-lb3-application](https://github.com/strongloop/loopback-next/tree/master/examples/lb3-application)         | @loopback/example-lb3-application     | An example LoopBack 3 application mounted in a LoopBack 4 project.                                                                                                                                                                                                                               |
 | [example-log-extension](https://github.com/strongloop/loopback-next/tree/master/examples/log-extension)             | @loopback/example-log-extension       | An example showing how to write a complex log extension for LoopBack 4                                                                                                                                                                                                                           |
 | [example-rpc-server](https://github.com/strongloop/loopback-next/tree/master/examples/rpc-server)                   | @loopback/example-rpc-server          | An example RPC server and application to demonstrate the creation of your own custom server                                                                                                                                                                                                      |
 | [example-soap-calculator](https://github.com/strongloop/loopback-next/tree/master/examples/soap-calculator)         | @loopback/example-soap-calculator     | A tutorial demonstrating integration with a SOAP webservice                                                                                                                                                                                                                                      |

diff --git a/docs/site/Tutorials.md b/docs/site/Tutorials.md
@@ -23,6 +23,10 @@ LoopBack 4 comes with the following tutorials:
 - **[express-composition](express-with-lb4-rest-tutorial.md)**: Tutorial on
   mounting LoopBack 4 REST API on an Express application.
 
+- **[lb3-application](https://github.com/strongloop/loopback-next/tree/master/examples/lb3-application)**:
+  Tutorial on mounting an existing LoopBack 3 application in a new LoopBack 4
+  project.
+
 You can download any of the tutorial projects using our CLI tool `lb4`:
 
 ```sh
@@ -36,6 +40,7 @@ $ lb4 example
   soap-calculator: An example on how to integrate SOAP web services.
   express-composition: A simple Express application that uses LoopBack 4 REST API.
   greeter-extension: An example showing how to implement the extension point/extension pattern.
+  lb3-application: An example LoopBack 3 application mounted in a LoopBack 4 project.
 ```
 
 Please follow the instructions in

diff --git a/docs/site/express-with-lb4-rest-tutorial.md b/docs/site/express-with-lb4-rest-tutorial.md
@@ -44,6 +44,7 @@ application, follow these steps:
     rpc-server: A basic RPC server using a made-up protocol.
     > express-composition: A simple Express application that uses LoopBack 4 REST API.
     greeter-extension: An example showing how to implement the extension point/extension pattern.
+    lb3-application: An example LoopBack 3 application mounted in a LoopBack 4 project.
     ```
 
 2.  Switch to the directory.

diff --git a/examples/express-composition/README.md b/examples/express-composition/README.md
@@ -48,6 +48,7 @@ application, follow these steps:
     soap-calculator: An example on how to integrate SOAP web services.
    > express-composition: A simple Express application that uses LoopBack 4 REST API.
     greeter-extension: An example showing how to implement the extension point/extension pattern.
+    lb3-application: An example LoopBack 3 application mounted in a LoopBack 4 project.
    ```
 
 2. Jump into the directory and then install the required dependencies:

diff --git a/examples/lb3-application/.npmrc b/examples/lb3-application/.npmrc
@@ -0,0 +1 @@
+package-lock=true
diff --git a/examples/lb3-application/.prettierignore b/examples/lb3-application/.prettierignore
@@ -0,0 +1,2 @@
+dist
+*.json
diff --git a/examples/lb3-application/.prettierrc b/examples/lb3-application/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "bracketSpacing": false,
+  "singleQuote": true,
+  "printWidth": 80,
+  "trailingComma": "all"
+}
diff --git a/examples/lb3-application/.vscode/settings.json b/examples/lb3-application/.vscode/settings.json
@@ -0,0 +1,21 @@
+{
+  "editor.rulers": [80],
+  "editor.tabCompletion": "on",
+  "editor.tabSize": 2,
+  "editor.trimAutoWhitespace": true,
+  "editor.formatOnSave": true,
+
+  "files.exclude": {
+    "**/.DS_Store": true,
+    "**/.git": true,
+    "**/.hg": true,
+    "**/.svn": true,
+    "**/CVS": true,
+    "dist": true,
+  },
+  "files.insertFinalNewline": true,
+  "files.trimTrailingWhitespace": true,
+
+  "tslint.ignoreDefinitionFiles": true,
+  "typescript.tsdk": "./node_modules/typescript/lib"
+}
diff --git a/examples/lb3-application/.vscode/tasks.json b/examples/lb3-application/.vscode/tasks.json
@@ -0,0 +1,29 @@
+{
+  // See https://go.microsoft.com/fwlink/?LinkId=733558
+  // for the documentation about the tasks.json format
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "Watch and Compile Project",
+      "type": "shell",
+      "command": "npm",
+      "args": ["--silent", "run", "build:watch"],
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      },
+      "problemMatcher": "$tsc-watch"
+    },
+    {
+      "label": "Build, Test and Lint",
+      "type": "shell",
+      "command": "npm",
+      "args": ["--silent", "run", "test:dev"],
+      "group": {
+        "kind": "test",
+        "isDefault": true
+      },
+      "problemMatcher": ["$tsc", "$tslint5"]
+    }
+  ]
+}
diff --git a/examples/lb3-application/CHANGELOG.md b/examples/lb3-application/CHANGELOG.md
@@ -0,0 +1,4 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
diff --git a/examples/lb3-application/LICENSE b/examples/lb3-application/LICENSE
@@ -0,0 +1,25 @@
+Copyright (c) IBM Corp. 2019. All Rights Reserved.
+Node module: @loopback/example-lb3-application
+This project is licensed under the MIT License, full text below.
+
+--------
+
+MIT license
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/examples/lb3-application/README.md b/examples/lb3-application/README.md
@@ -0,0 +1,128 @@
+# @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.
+
+   ```json
+   {
+     "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.
+
+      ```ts
+      import {Lb3AppBooterComponent} from '@loopback/booter-lb3app';
+      ```
+
+   3. Register the component in Application's constructor:
+
+      ```ts
+      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](https://gitter.im/strongloop/loopback) and ask
+for help with this tutorial.
+
+### Bugs/Feedback
+
+Open an issue in [loopback-next](https://github.com/strongloop/loopback-next)
+and we'll take a look.
+
+## Contributions
+
+- [Guidelines](https://github.com/strongloop/loopback-next/blob/master/docs/CONTRIBUTING.md)
+- [Join the team](https://github.com/strongloop/loopback-next/issues/110)
+
+## Tests
+
+Run `npm test` from the root folder.
+
+## Contributors
+
+See
+[all contributors](https://github.com/strongloop/loopback-next/graphs/contributors).
+
+## License
+
+MIT
diff --git a/examples/lb3-application/index.d.ts b/examples/lb3-application/index.d.ts
@@ -0,0 +1,6 @@
+// Copyright IBM Corp. 2019. All Rights Reserved.
+// Node module: @loopback/example-lb3-application
+// This file is licensed under the MIT License.
+// License text available at https://opensource.org/licenses/MIT
+
+export * from './dist';
diff --git a/examples/lb3-application/index.js b/examples/lb3-application/index.js
@@ -0,0 +1,26 @@
+// Copyright IBM Corp. 2019. All Rights Reserved.
+// Node module: @loopback/example-lb3-application
+// This file is licensed under the MIT License.
+// License text available at https://opensource.org/licenses/MIT
+
+const application = require('./dist');
+
+module.exports = application;
+
+if (require.main === module) {
+  // Run the application
+  const config = {
+    rest: {
+      port: +process.env.PORT || 3000,
+      host: process.env.HOST || 'localhost',
+      openApiSpec: {
+        // useful when used with OASGraph to locate your application
+        setServersFromRequest: true,
+      },
+    },
+  };
+  application.main(config).catch(err => {
+    console.error('Cannot start the application.', err);
+    process.exit(1);
+  });
+}
diff --git a/examples/lb3-application/index.ts b/examples/lb3-application/index.ts
@@ -0,0 +1,8 @@
+// Copyright IBM Corp. 2019. All Rights Reserved.
+// Node module: @loopback/example-lb3-application
+// This file is licensed under the MIT License.
+// License text available at https://opensource.org/licenses/MIT
+
+// DO NOT EDIT THIS FILE
+// Add any additional (re)exports to src/index.ts instead.
+export * from './src';
diff --git a/examples/lb3-application/lb3app/common/models/coffee-shop.js b/examples/lb3-application/lb3app/common/models/coffee-shop.js
@@ -0,0 +1,38 @@
+'use strict';
+
+const debug = require('debug')('loopback:example:lb3application');
+
+module.exports = function(CoffeeShop) {
+  CoffeeShop.status = async function() {
+    const currentDate = new Date();
+    const currentHour = currentDate.getHours();
+    const OPEN_HOUR = 6;
+    const CLOSE_HOUR = 20;
+    debug('Current hour is %d', currentHour);
+    let response;
+    if (currentHour > OPEN_HOUR && currentHour < CLOSE_HOUR) {
+      response = 'We are open for business.';
+    } else {
+      response = 'Sorry, we are closed. Open daily from 6am to 8pm.';
+    }
+    return response;
+  };
+  CoffeeShop.remoteMethod('status', {
+    http: {
+      path: '/status',
+      verb: 'get',
+    },
+    returns: {
+      arg: 'status',
+      type: 'string',
+    },
+  });
+
+  CoffeeShop.greet = async function() {
+    return 'Hello from this Coffee Shop';
+  };
+  CoffeeShop.remoteMethod('greet', {
+    http: {path: '/greet', verb: 'get'},
+    returns: {type: 'string'},
+  });
+};
diff --git a/examples/lb3-application/lb3app/common/models/coffee-shop.json b/examples/lb3-application/lb3app/common/models/coffee-shop.json
@@ -0,0 +1,30 @@
+{
+  "name": "CoffeeShop",
+  "base": "PersistedModel",
+  "idInjection": true,
+  "forceId": false,
+  "options": {
+    "validateUpsert": true
+  },
+  "properties": {
+    "name": {
+      "type": "string",
+      "required": true
+    },
+    "city": {
+      "type": "string"
+    }
+  },
+  "validations": [],
+  "relations": {},
+  "acls": [
+    {
+      "accessType":"EXECUTE",
+      "principalType":"ROLE",
+      "principalId":"$unauthenticated",
+      "permission":"DENY",
+      "property":"greet"
+    }
+  ],
+  "methods": {}
+}