Installing TypeScript and Setting Up Your Development Environment on Node

In this post we'll make developing with TypeScript easy, mainly for server development with Node.js. First we'll install TypeScript and we'll watch for file changes. Then we'll be compiling our project into a single JavaScript file with webpack. Let's dive into the setup!

1. Install TypeScript

First run this on command line in your project's root folder:

npm i --save-dev typescript

Now we'll create our TypeScript config file. Create a file in your root folder and name it tsconfig.json. Here is mine, so you can copypasta:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "dist",
    "removeComments": true,
    "strict": true,
    "strictPropertyInitialization": false,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true
  },
  "include": ["**/*.ts"],
  "exclude": ["node_modules"]
}

If you aren't comfortable with TypeScript yet, you can set strict to false.

2. Watch For File Changes

We need two modules for that. Again, run those on command line in your project's root folder:

npm i --save-dev nodemon
npm i --save-dev ts-node

Nodemon watches for changes in your files, and ts-node executes your TypeScript code. We will connect them in nodemon's config file to ease our development. Create nodemon.json in your root folder:

{
  "watch": "**/*",
  "ext": "ts, json",
  "exec": "ts-node src/app.ts"
}

Be aware that the entry point of my project is src/app.ts. You might want to change that exec field if your entry point is different. To watch your changes, add this line to your scripts field in package.json:

"start": "nodemon"

When you run npm run start or nodemon on command line, your server will start and whenever you made a change in one of your files the server will restart.

3. Install Webpack

You know what to do:

npm i --save-dev webpack
npm i --save-dev webpack-cli
npm i --save-dev webpack-node-externals
npm i --save-dev ts-loader

Now we have to configure webpack. Create a webpack.config.js file in your root folder. Again, you can copypasta mine:

const nodeExternals = require("webpack-node-externals");
const path = require("path");

module.exports = {
  entry: "./src/app.ts",
  target: "node",
  externals: [nodeExternals()],
  mode: "production",
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    modules: ["src"],
    extensions: [".ts", ".js"]
  },
  output: {
    filename: "app.js",
    path: path.resolve(__dirname, "dist")
  }
};

There are some important fields here. entry is of course the starting point of your app. In output, filename is the file name of the output file webpack builds for us. And the path is the location where you want webpack to put it. In my case, it's the dist folder.

4. Compile Your Project

Since we have everything ready, you can add this to the scripts field in your package.json:

"build": "npx webpack"

When you run npm run build or npx webpack, webpack will compile your project and put the output file to dist folder. If you want the deploy your project on some service, /dist/app.js is the file what you should be deploying.

I hope this was useful, you can also follow me on Twitter for future content:

twitter.com/oznbll