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.

Forgetful

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

Yuma

Also install npm install -i tsc-watch – Daman

Much love brother to you, this is the best, easier and efficient way I have found on the Internet about this – Wilderness

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"
  }

Fretwork

Nodemon is not good, sometimes it throws this github.com/remy/nodemon/issues/1247 – Lymphatic

Answer 3

Install : npm install -D tsc-watch In package.json into "scripts" tag

"start:watch": "tsc-watch --target es2017 --outDir ./dist --onSuccess "node ."", And use npm run start: watch instead of npm run start.

Automatically compile source code and changes are shown into the browser.

Drill