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: #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 #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.

[aegyed91]

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