4

I'm working on an app with NodeJs, express, typescript and nodemon.

But the page is not refreshed when I changed some code in the ts files.

How can I do to compile the ts file in js and refresh the browser with nodemon (or other tool)?

package.json

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.17.2",
    "debug": "^2.6.8",
    "dotenv": "^2.0.0",
    "express": "^4.15.3",
    "iconv-lite": "^0.4.17",
    "inversify": "^4.11.1",
    "jsonwebtoken": "^7.4.1",
    "mongoose": "^5.0.10",
    "morgan": "^1.8.2",
    "passport": "^0.3.2",
    "passport-jwt": "^2.2.1",
    "rxjs": "^5.4.2",
    "typescript": "^2.7.2",
    "winston": "^2.3.1"
  },
  "devDependencies": {
    "@types/chai": "^4.0.0",
    "@types/debug": "0.0.29",
    "@types/dotenv": "^2.0.20",
    "@types/express": "^4.0.35",
    "@types/mocha": "^2.2.41",
    "@types/mongoose": "^4.7.15",
    "@types/morgan": "^1.7.32",
    "@types/node": "^6.0.77",
    "@types/passport": "^0.3.3",
    "@types/passport-jwt": "^2.0.20",
    "chai": "^4.0.2",
    "chai-http": "^3.0.0",
    "gulp": "^3.9.1",
    "gulp-clean": "^0.3.2",
    "gulp-typescript": "^3.1.7",
    "gulp-yaml": "^1.0.1",
    "mocha": "^3.4.2",
    "mocha-typescript": "^1.1.4"
  },
  "scripts": {
    "start": "gulp build && nodemon dist/index.js",
    "build": "gulp build",
    "test": "gulp build && mocha -t 30000 dist/**/*.test.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/devslaw/TypeScript-Node.js-REST-example.git"
  },
  "keywords": [],
  "author": "Arthur Arakelyan <arthur@devslaw.com>",
  "license": "ISC",
  "homepage": "https://github.com/devslaw/TypeScript-Node.js-REST-example#readme"
}

So know, anytime i make a change, I need to stop the server and run npm start again

Faabass
  • 1,394
  • 8
  • 29
  • 58
  • The alternative is to use ts-node – Estus Flask Mar 17 '18 at 14:38
  • Possible duplicate of [How to watch and reload ts-node when typescript file changes](https://stackoverflow.com/questions/37979489/how-to-watch-and-reload-ts-node-when-typescript-file-changes) – k0hamed Mar 17 '18 at 22:37

1 Answers1

13

The problem lies in the fact that your start script is watching dist/index.js. This folder only changes when the code gets recompiled into plain JavaScript. So you will need to watch the TypeScript files instead. The great thing is that you can change nodemon's default behavior. You will need to add ts-node to your package.json as well.

Try setting the script to something like the following:

nodemon --watch 'src/**/*.ts' --exec 'ts-node' src/index.ts

You will then want to set up a nodemon.json file with the following also:

{
  "watch": ["src"],
  "ext": "ts",
  "exec": "ts-node ./src/index.ts"
}
Kate Orlova
  • 3,225
  • 5
  • 11
  • 35
brandon-thimmesch
  • 131
  • 1
  • 6
  • 1
    You can use `"ext": "[j|t]s",` if you are in a hybrid environment and have both `js` and `ts` files. – a2f0 Jun 30 '22 at 15:41