Loopback-next: Automatically refresh upon changes (build & watch with nodemon)

[yakirbu]

Hi,

If I would like loopback to automatically refresh after changes, how can I do that?
running 'nodemon start' doesn't seem to work, it runs the server, but doesn't restart upon changes.

(.P.S, is there a substitute to 'lb property', for loopback 4, to add a new property to a model?)

Thanks.

[dougal83]

This experimental setup might do it:
https://github.com/mightytyphoon/lb4-ng-quickstart

[jannyHou]

@dougal83 Thank you for providing the example repository combines LoopBack 4 and Angular.
cc @dhmlau shall we create a page in our document to promote community example repositories like this ^ ?

[gregra81]

@yakirbu Use this https://www.npmjs.com/package/tsc-watch
And add this line to your scripts in package.json:
"start:watch": "tsc-watch -b --onSuccess \"node .\"",

[dhmlau]

Related to: https://github.com/strongloop/loopback-next/issues/2107

[dhmlau]

@gregra81, thanks for your information. I've tried your suggestion above, however, I got an error saying: error TS6369: Option '--build' must be the first command line argument.. I need to remove -b in order to get it run. Did I miss something?

@jannyHou, it's a good idea to get the inventory of the examples. @bschrammIBM suggested in https://github.com/strongloop/loopback-next/issues/2087 that we should make the distinction between examples and tutorials, i.e.

• tutorials: include instructions on how to build such an app
• examples: only shows how certain things can be done, no need for instructions.

To expand that work, I think we can create a section there.
@bschrammIBM, what do you think?

[psaunders]

I have gotten quite a long way down the nodemon + ts-node route.

If you go down this route you will run into a few thing, first you have to create a point of entry file for ts-node because index.ts is some sort of bundling file and not a Typescript version of index.js.

import * as application from './src';

module.exports = application;

const config = {
  rest: {
    port: +process.env.PORT || 3000,
    host: process.env.HOST || 'localhost',
    openApiSpec: {
      setServersFromRequest: true,
    },
  },
};

application.main(config).catch(err => {
  console.error('Cannot start the application.', err);
  process.exit(1);
});

Then your nodemon configuration to package.json

  "nodemonConfig": {
    "watch": [
      "src"
    ],
    "ext": "ts",
    "exec": "ts-node nodemon.ts"
  },

Then you have to add the typescript controller files into your application.ts

    this.bootOptions = {
      controllers: {
        // Customize ControllerBooter Conventions here
        dirs: ['controllers'],
        extensions: ['.controller.js', '.controller.ts'],
        nested: true,
      },
    };

I now am getting a: The key repositories.XYZRepository was not bound to any value and am getting the feeling that this is not worth it and just switched over to this:

  "nodemonConfig": {
    "watch": [
      "src"
    ],
    "ext": "ts",
    "exec": "npm start"
  },

Which is a bit slow but fine for now.

[bschrammIBM]

This experimental setup might do it:
https://github.com/mightytyphoon/lb4-ng-quickstart
@dougal83 Thank you for providing the example repository combines LoopBack 4 and Angular.
We would like to publish this example on our loopback.io doc site, in a new section entitled Community Contributions. Are you ok with having this example published? Please let me know!

[dougal83]

This experimental setup might do it:
https://github.com/mightytyphoon/lb4-ng-quickstart
@dougal83 Thank you for providing the example repository combines LoopBack 4 and Angular.
We would like to publish this example on our loopback.io doc site, in a new section entitled Community Contributions. Are you ok with having this example published? Please let me know!

It's not my code, perhaps you can ask @mightytyphoon who originally posted the example #1818

[bachdinhnhan]

@yakirbu Use this https://www.npmjs.com/package/tsc-watch
And add this line to your scripts in package.json:
"start:watch": "tsc-watch -b --onSuccess \"node .\"",

@gregra81
I started with your idea and the result is unexpected when it compiles entire project into the current directory instead of /dist folder. Eventually, it overrides the index.js file and makes the project unable to start with "npm run start".

So after digging into tsc-watch and tsc itself, it ends up with a better version.
"start:watch": "tsc-watch --target es2017 --outDir ./dist --onSuccess \"node .\"",

[bachdinhnhan]

@dhmlau @yakirbu
Try add this line to your scripts in package.json:
"start:watch": "tsc-watch --target es2017 --outDir ./dist --onSuccess \"node .\"",

It automatically detect any source-code changes and restart the server as well.

[aegyed-91]

for the record: if u want to debug ur app and have proper sourcemap support. Use: "start:watch": "tsc-watch --target es2017 --outDir ./dist --onSuccess \"node --inspect .\"" with chrome canary and NiM

[tonifirnandes]

for the record: if u want to debug ur app and have proper sourcemap support. Use: "start:watch": "tsc-watch --target es2017 --outDir ./dist --onSuccess \"node --inspect .\"" with chrome canary and NiM

Thanks, it works, but hopefully there is still another simple way, so our source code not fully of *.js.map file.

[pavelgronsky]

So, who can explain or who can show example about how I can used nodemon with Loopback 4. How I can changed files and take autorestart my loopback server?

[anjorinjnr]

Add

  "nodemonConfig": {
    "verbose": true,
    "watch": [
      "src/"
    ],
    "ignore": [
      "dist/*"
    ],
    "ext": "ts",
    "exec": "npm start"
  }

to your package.json

Then simply run nodemon (assuming you've already installed it)

[pavelgronsky]

@anjorinjnr What start file I need to run in nodemon command?
nodemon index.ts - this is correct command?

[pavelgronsky]

Ok, work for me this option:
I added script to package.json

"scripts": {
"dev": "nodemon server.js"
}

and added this to package.json:

"nodemonConfig": {
"verbose": true,
"watch": [
"src/"
],
"ignore": [
"dist/*"
],
"ext": "ts",
"exec": "npm start"
}

And run application by this command:
npm run dev

[frbuceta]

Ok, work for me this option:
I added script to package.json

"scripts": { "dev": "nodemon server.js" }

and added this to package.json:

"nodemonConfig": { "verbose": true, "watch": [ "src/" ], "ignore": [ "dist/*" ], "ext": "ts", "exec": "npm start" }

And run application by this command:
npm run dev

It works for me too. Thanks

[aegyed-91]

for the record: if u want to debug ur app and have proper sourcemap support. Use: "start:watch": "tsc-watch --target es2017 --outDir ./dist --onSuccess \"node --inspect .\"" with chrome canary and NiM

Thanks, it works, but hopefully there is still another simple way, so our source code not fully of *.js.map file.

this solution works with nodemon + lb-tsc --watch. also modified tsconfig.json to generate inline sourcemaps which is also supported by normal chrome. no need to install canary chrome

modify package.json:

"scripts": {
  "build:watch": "lb-tsc es2017 --outDir dist --watch",
  "start:dev": "nodemon --watch ./dist --inspect ./index.js"
}

modify tsconfig.json:

{
  "$schema": "http://json.schemastore.org/tsconfig",
  "extends": "@loopback/build/config/tsconfig.common.json",
  "compilerOptions": {
    "rootDir": "src",
    "sourceMap": false,
    "inlineSourceMap": true,
    "inlineSources": true
  },
  "include": ["src"]
}

u will have to run both npm run build:watch and npm run start:dev in 2 separate shell

cc @tonifirnandes

[pavelgronsky]

npm run dev
Ok, friends.
I was able to understand how run nodemon by launch.json in VSCODE and how run nodemon by npm run dev command. Everything works fine, but how I can run nodemon together with debugged by npm command ?