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.

[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

[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

[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

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 ?

[rodmcnew]

I think it would be best for adoption if loopback came with something that handled this out of the box. Installing the framework thinking you can start coding right away, then having to deal with this problem isn't a great experience.

• A new loopback app comes with 23 package.json scripts and none of them do this.
• Meanwhile create-react-app comes with 4 scripts and one does do this.