Fast Iteration with tsx, Hot Reload, and Source Maps
Set up a frictionless dev loop with on-the-fly transpilation, watch mode, and accurate stack traces.
The Slow Dev Loop Problem
When you write a Node.js backend in TypeScript, the naive workflow is painful: edit a file, run tsc to compile to JavaScript, then run node dist/index.js, then repeat on every change.
This adds friction in three places:
- Transpile step — you wait for the whole project to build before anything runs.
- Restart step — you manually kill and relaunch the process.
- Debugging — errors point to compiled
dist/*.jsline numbers, not your real source.
In this lesson we wire up a frictionless loop: on-the-fly transpilation with tsx, automatic restarts with watch mode, and accurate stack traces with source maps.
What tsx Actually Does
tsx ("TypeScript Execute") is a CLI that runs TypeScript and ESM files directly, with no separate build step. Under the hood it uses esbuild to transpile each module in memory as Node loads it.
Key facts to remember:
- It does not type-check — esbuild only strips types and emits JS. You keep
tsc --noEmitfor type safety in CI. - It handles both
.tsand modern ESMimportsyntax transparently. - It is meant for development and scripts, not as your production runtime.
Install it as a dev dependency:
// package.json (dev dependency install)
// npm install --save-dev tsx
// Then run any TypeScript file directly:
// npx tsx src/index.ts
// No tsconfig 'outDir', no dist/ folder needed during dev.All lessons in this course
- Migrating from CommonJS to Native ES Modules
- Configuring tsconfig for Node Backend Projects
- Type-Safe Environment Config and Runtime Validation
- Fast Iteration with tsx, Hot Reload, and Source Maps