run tsc with nodemon not working when file changes

Question

I installed nodemon and typescript

this is my start script "start": "nodemon --watch '*/**.ts' --exec tsc && node dist/app.js", what can be wrong above? it can be started but not re-executing when the file changed.

I also tried "start": "nodemon --watch '*/**.ts' --exec tsc && node dist/app.js",

Answer 1

As far as I know you need to specify the extension nodemon should watch, the correct call would be nodemon --watch '*/**.ts' -e ts --exec tsc && node dist/app.js .

Although you are not going to have the app executed as the first command does not finish, so the node dist/app.js part won't be executed.

I would recommend npm-run-all for this setup:

{
  "scripts": {
    "dev": "npm-run-all dev:*",
    "dev:watch": "nodemon --watch '*/**.ts' -e ts --exec tsc",
    "dev:run": "nodemon --watch dist/app.js --exec 'node dist/app.js'"
  }
}

Answer 2

I appreciate your effort and want to provide you a simple alternative that works.

Steps you need to follow:

• Initialize a Nodejs project using npm or yarn
• Install typescript and nodemon as devDependency in your project.
• Configure your package.json file to do the stuff for you.
• Create a tsconfig.json file (optional but believe me it helps in your project)

Step 1 (Project Setup)

Execute the commands in your terminal.

# Create project directory
mkdir sample 

# Change in your project directory
cd sample

# Intitialize nodejs project
npm init -y

Step 2 (Dependency Setup)

Execute the below commands to install nodemon and typescript

# Install nodemon and typescript
npm install --save-dev nodemon typescript

# Optional (If you like to use intellisense for nodejs modules)
npm install --save-dev @types/node

Step 3: (Configure package.json file)

Before configuring our package.json file, here is my idea:

.
├── dist # Compiled Typescript files to Javascript Files (output directory) 
├── src # We will write typescript here.
├── node_modules
├── package.json 

We will write all our typescript in src/ folder and index.ts will be entrypo

Here is our package.json file

{
  "name": "sample",
  "version": "1.0.0",
  "description": "A simple typescript setup",
+ "main": "dist/index.js",
  "scripts": {
+   "start": "node dist/index.js",
+   "watch": "tsc --watch",
+   "build": "tsc",
+   "dev": "nodemon"
  },
  "keywords": [],
  "author": "Jayant Malik",
  "license": "MIT",
  "devDependencies": {
    "nodemon": "^2.0.6",
    "typescript": "^4.1.2"
  }
}

Step 4 (tsconfig.json)

# Create tsconfig.json file
touch tsconfig.json

Here is the content of the tsconfig.json file.

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "lib": [
      "dom",
      "es6",
      "es2017",
      :"ESNext",
      "esnext.asynciterable"
    ],
    "sourceMap": true,
    "outDir": "./dist",
    "moduleResolution": "node",
    "strict": true,
    "importNotUsedAsValues": "remove",
    "alwaysStrict": true,
    "allowUnreachableCode": false,
    "charset": "utf-8",
    "skipLibCheck": true,
    "removeComments": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "resolveJsonModule": true,
    "baseUrl": "."
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "./src",
    "./src/**/*.tsx",
    "./src/**/*.ts"
  ]
}

Step 5: (Running Instructions)

You can open multiple terminal tabs for the below actions.

Terminal Tab 1

# Start your development server (nodemon)
npm run dev

Terminal Tab 2

# Start typescript server
npm run watch

So, you will have a clean and simple project that will work.