How do I execute typescript watch and running server at the same time?

Question

I was developing my project in nodejs. I found if I need to code and test api, I will run two console, one is to execute typescript watch, another is to execute server.

I think it's so troublesome. I find other developers on github have written scripts in package.json. It's easy to call any commands. It attracts how to write the scripts and simply my development workflow.

In short, the comand of typescript watch is tsc -w and the comand of running server is node app.js. My idea is merge the commands as tsc -w & node app.js but I can't work the two commands at the same time. How do I do? Thanks.

Honeybunch

Answer 1

My idea is merge the commands as tsc -w & node app.js but I can't work the two commands at the same time. How do I do

You have a few options. Simplest is to use ts-node-dev : https://github.com/whitecolor/ts-node-dev

Gonroff

Per the readme in the repo you linked (github.com/TypeStrong/ts-node#watching-and-restarting): ...watching files and code reloads are out of scope for the project. If you want to restart the ts-node process on file change, existing node.js tools such as nodemon, onchange and node-dev work. – Adriel

The readme used to mention how to setup nodemon explicitly. Now its just a link. Anyways I've moved to ts-node-dev anyways : youtube.com/watch?v=Hi-ShZ5ShkE – Gonroff

Answer 2

Option 1

Step 1

install concurrently, use npm, pnpm or yarn

pnpm i concurrently -D   

Step 2

create a script with this command

"scripts": {
    "run": "tsc && concurrently \"tsc -w\" \"nodemon dist/app.js\"",
}

Option 2

without install anything (mac or Linux)

"scripts": {
    "run": "tsc -w & nodemon dist/app.js",
}

Note: Run tsc first so that your directory dist has something at the time of running nodemon.

And with that you will have running your Typescript application

Webb

In case of problems involving interactive cli applications (prompts with inquirer), include the -r/--raw flag in order to output in the raw mode (disables prettifying and concurrently coloring) – Demetra

Answer 3

TLDR, If you like nodemon this is a straight forward way to get file watch, compilation and execution:

nodemon --ext ts --exec 'tsc && node dist/index.js'

Optionally replace tsc with babel for faster compilation.

Here is a more complete example, in package.json (with source maps):

"scripts": {
  "develop": "nodemon --ext ts --exec 'yarn build --incremental && yarn serve'",
  "build": "tsc",
  "serve": "node --require source-map-support/register dist/index.js",
  ...
},

Install source-map-support as a dependency if you want, ahem... source map support! Otherwise, remove --require source-map-support/register from the serve script above.

tsconfig.json

{
  "compilerOptions": {
    ...
    "sourceMap": true,
    "outDir": "dist",
  }
}

Newson

Nice find. Doesn't auto-reload the browsers though. Looks like it's the only working solution atm. – Duggins

It's definitely better to use incremental compilation or watch flags of the technologies in the project. It's super painful to recompile the entire project on each and every change. – Getaway

Answer 4

Another option can be to use nodemon:

tsc -w & nodemon app.js

Since Typescript 3.4 the compilation is faster because you can use the incremental compiler option and they keep improving (including interesting changes for large projects in 3.8).

Update:

I also moved to use concurrently as HerberthObregon says in his answer

Butterfingers

How come it got that many upvotes and doesn't work? Later command never run. – Phaih

what issue are you facing @SujeetAgrahari? this works fine for me – Rainproof

@AviMehenwal tsc -w compiles and stays in watch mode, the other part nodemon app.js doesn't run – Phaih

sorry this doesn't work, the second command never runs – Ephebe

It works on windows but not on linux, a couple days ago I move from windows to linux and suddenly the nodemon command ran but quickly being clean out its output by typescript command,.I don't know why, I choose to bear with it, run typescript watch on terminal and use nodemon for another one. – Omnipresent

Answer 5

As of 2023 tsx seems to be the best options.

If you're using it in an npm project, install it as a development dependency:

npm install --save-dev tsx

And add script to package.json like below

"scripts": {
    "compile": "tsx watch --clear-screen=false ./src/index.ts",
    "start": "npm run compile && node ./dist/index.js"
 },

Haematin

Answer 6

Simplest modern method

tsc --watch & node --watch dist/index.js

There is a --watch flag starting from Node.js v18. See documentation.

As of May 2023 it's marked as experimental, however I haven't faced any issues.

Please, note, that it doesn't support tsconfig 'paths' resolution, prefer tsx or ts-node-dev (looks unmaintained, unfortunately) if you need it.

Taunyataupe

Answer 7

Building on herberthObregon's answer

Step 1: Install packages

npm install concurrently typescript nodemon --save-dev

Step 2: Create these scripts in package.json

"scripts": {
   "build": "tsc",
   "build:watch": "tsc -w",
   "dev": "npm run build && concurrently \"npm run build:watch\" \"npm run serve:watch\"",
   "serve": "node dist/index.js",
   "serve:watch": "nodemon dist/index.js"
},

• build runs a standard typescript build
• build:watch runs typescript build in watch mode
• serve serves up your node project (assuming your tsconfig outputs to dest/index/js)
• serve:watch uses nodemon to restart the node server whenever the js output changes
• dev puts them all together

Multifaceted

Just note that depending on the tools used, restarting node on each change may be suboptimal. React and Next, for example, have dev modes where they take care of the node server for you. While dev builds don't always duplicate everything of a full optimized server build, they can save a lot of time if you're making a lot of changes. Then you can run the full production-optimized build once at the end to validate nothing has broken. – Getaway

Answer 8

Just going to throw my hat in here, here's a solution using ts-node-dev and concurrently, similar to the one provided by @HerberthObregon but using ts-node-dev instead of nodemon:

"scripts": {
    "start": "npm run build && concurrently \"npm run build:watch\" \"npm run dev\"",
    "dev": "tsnd --respawn src/main.ts",
    "build": "tsc -p tsconfig.release.json",
    "build:watch": "tsc -w -p tsconfig.release.json"
}

Bonus: If you need help with your figuring out tscand your tsconfig.json, I use the sensible defaults from this node typescript starter.

Deflocculate

Answer 9

Here's a solution that works for me

1. Install ts-node and nodemon as dev dependencies

2. Create a script : "dev" : "nodemon app.ts"

Kiddy