Set up a scalable Node.js project with TypeScript and Express using best practices. This guide walks you through initialization, configuration, and two development approaches—compiling to JavaScript or running directly with ts-node and nodemon for a smoother workflow.
Setting up a Node.js project with TypeScript can significantly enhance your development experience by providing static typing, better tooling, and robust error-checking. This guide will walk you through the best practices for initializing and configuring a Node.js project with TypeScript and Express, ensuring a scalable and maintainable setup.
To get started, initialize a Node.js project using Yarn. This process is similar for npm or other package managers.
Open your terminal and run:
yarn init --yesThis command creates a package.json file with default settings.
Next, install TypeScript and Nodemon as development dependencies:
yarn add -D typescript nodemonInstall Express for handling routing and middleware:
yarn add expressCreate the following directory structure for your project:
node-ts-project/
├── src/
│ ├── index.ts
│ ├── server.ts
├── package.json
├── tsconfig.json
└── nodemon.jsonIn src/server.ts, set up a basic Express server:
const app = express();
app.get("/", (req, res) => {
res.send("The Server is Running Fine 🚀");
});In src/index.ts, create the server entry point:
const PORT = 3000;
app.listen(PORT, () => {
console.info(`Server is running at http://localhost:${PORT} 🚀`);
});Create a tsconfig.json file in the root of your project with the following configuration:
{
"compilerOptions": {
"target": "ES2020",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"outDir": "./dist",
"rootDir": "./src"
},
"include": ["src/**/*.ts"],
"exclude": ["node_modules"]
}Node.js can only execute JavaScript files. We have two approaches to run our TypeScript server:
Use this method to compile TypeScript into JavaScript and then run the compiled code. nodemon will watch for changes in TypeScript files, compile them, and restart the server.
Add the following scripts to package.json:
"scripts": {
"build": "tsc",
"start": "node dist/index.js",
"dev": "nodemon --watch 'src/**/*.ts' --exec 'yarn build && yarn start'"
}Run the server in development mode:
yarn devThis setup compiles TypeScript files to JavaScript and uses nodemon to restart the server whenever changes are detected. However, this approach involves an extra compilation step.
This approach is more streamlined as ts-node runs TypeScript code directly, and nodemon restarts the server without manual compilation.
Create a nodemon.json file with the following configuration:
{
"watch": ["src"],
"ext": "ts,json",
"ignore": ["src/**/*.spec.ts"],
"exec": "ts-node ./src/index.ts"
}Update package.json scripts:
"scripts": {
"dev": "nodemon",
"build": "tsc",
"start": "node dist/index.js"
}Run the server in development mode:
yarn devThis setup is more efficient for development as it eliminates the need for a separate compilation step and allows nodemon to handle restarts directly.
By following these steps, you’ll have a robust Node.js project set up with TypeScript and Express. Both approaches for running the server are effective, but using ts-node with nodemon provides a more streamlined and developer-friendly workflow. Choose the approach that best fits your development style and project needs.
New tutorials, book updates, and behind-the-scenes notes from the studio. No schedule, no spam.
