How to watch for file changes in Loopback 4?

Question

I have the following:

nodemon server/server.js --watch common --watch serve

This doesn't work at all. Alright, maybe it's because server/server.js doesn't exist! So I tried the following:

nodemon index.js --watch common --watch serve

Still it didn't work. I also changed common with src. That didn't work either. Please help me with this.

Answer 1

Install package tsc-watch if you don't have it installed yet: npm install -D tsc-watch

You can add this line under your "scripts" tag in package.json:

"start:watch": "tsc-watch --target es2017 --outDir ./dist --onSuccess \"node .\"",

And use npm run start:watch instead of npm run start.

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

Reference: https://github.com/strongloop/loopback-next/issues/2242#issuecomment-476866232

Answer 2

Hello from the LoopBack team :)

LoopBack 4 applications use different project layout. They are written in TypeScript, store TypeScript sources in src and transpiled JavaScript files in dist. There are no common and serve (did you mean server?) directories to watch for changes.

It is not enough to watch for changes in your source code, you also need to recompile from TypeScript to JavaScript before restarting the app.

We are looking into the best way how to support automatic reload of LB4 applications in development, please subscribe to the discussion in issue #2242.

A community user recommended the following nodemon config, it should be added to application's package.json file:

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