---
title: 'Simplify your Node.js project with module aliases'
date: '2020-08-27'
tags: ['nodejs', 'typescript', 'javascript', 'alias', 'path-aliases', 'tsconfig']
summary: 'Tired of dealing with complex file paths in your Node.js project? Learn how to set up module aliases using TypeScript and module-alias package to simplify your imports and improve your development experience.'
images:
  [
    '/static/images/banners/white-and-black-one-way-printed-road-signages__bdchu614__pKeF6Tt3c08.jpeg',
  ]
authors: ['default']
---

Recently, I have been working on a pet project using **Node.js** on the backend to further my knowledge and prevent skill degradation during my free time. However, I encountered a frustrating issue with **paths** that many developers have likely experienced.

```ts showLineNumbers
import { saveUser } from '../../../../../models/User'
import homeController from '../../../../../controllers/home'
```

This code can be a headache for developers who need to determine how many folders to traverse to find the desired file. If you need to move a file to a different folder, you must update the path in all files that import the module <Twemoji emoji="face-with-steam-from-nose"/>.

But what if we could define **aliases** (i.e., **shortcuts**) for frequently imported modules throughout the entire project?

For example:

```ts showLineNumbers
import { saveUser } from '@models/User'
import homeController from '@controllers/home'
```

In which:

- `@models` is equivalent to `./src/models/*`

- `@controllers` is equivalent to `./src/controllers/*`.

The solution is quite simple with [module-alias](https://www.npmjs.com/package/module-alias) and a `tsconfig.json` configuration. Follow these instructions to set it up:

## Update `tsconfig.json`

Open the `tsconfig.json` file and add the following configuration to the `compilerOptions` object:

```json:tsconfig.json showLineNumbers
"compilerOptions": {
  // other configs...
  "baseUrl": "./src",
  "paths": {
      "*": [
          "node_modules/*",
          "src/types/*"
      ],
      "@controllers/*": [
          "controllers/*"
      ],
      "@models/*": [
          "models/*"
      ]
  }
}
```

Here, `@controllers` and `@models` are aliases for your modules (you can use any **naming convention** you like, and it does not have to start with `@` — that's just the **prefix** I use to differentiate).

Now you can use the configured **alias** in your project, but you will encounter a module import error:

```bash
[Node] Error: Cannot find module '@models/User'
```

## Install the `module-alias` package

This package **resolves** path aliases in JS files after they are compiled.

- Install it with:

  ```bash
  npm i --save module-alias # or yarn add module-alias
  ```

- Configure it in `package.json`:

  ```json:package.json showLineNumbers
  "_moduleAliases": {
    "@models": "dist/models",
    "@controllers": "dist/controllers"
  }
  ```

Note that `dist/` is the **folder** that contains your code after it has been built (depending on your configuration, it could be `dist/`, `build/`, etc.).

- Finally, register the module in your app:

  ```ts
  import 'module-alias/register'
  ```

Import it only once in your project's start file (such as `index.ts`, `app.ts`, or `server.ts`...).

## Done <Twemoji emoji="party popper" />

Now you can reload your IDE, start the project, and use aliases across your project.

![VS Code Recommendation](/static/images/vscode.png)

**VS Code** supports this feature by reading the `tsconfig.json` file. Simply reload it to use the feature.

Good luck!

## Refs

- [https://medium.com/zero-equals-false/how-to-use-module-path-aliases-in-visual-studio-typescript-and-javascript-e7851df8eeaa](https://medium.com/zero-equals-false/how-to-use-module-path-aliases-in-visual-studio-typescript-and-javascript-e7851df8eeaa)
- [https://dev.to/larswaechter/path-aliases-with-typescript-in-nodejs-4353](https://dev.to/larswaechter/path-aliases-with-typescript-in-nodejs-4353)
