Installing TypeScript and Setting Up Your Development Environment on Node
Tags: javascript, typescript, node, webpack
Published: 2020-06-24 11:38:03

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](https://www.youtube.com/watch?v=N3zf9q8mbWs)!

###**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:

```json
{
  "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:

```json
{
  "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**:

```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:

```javascript
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](https://twitter.com/oznbll)