Setting up the Clean Architecture Project with Typescript

Continuing with the Clean Architecture Series, in this article we will create a specific structure to organize the CA layers and also packages to setup typescript.

So, let me walk through the process to setting up the project.

Project Folders

Create a folder project call "clean-architecture". Go inside the folder and run the following command to create a new project:

npm init --yes # this will trigger automatically populated initialization with default values

After that, we are going to create folders which represent the clean architecture layers:

• src:

  • adapters: Interface adapters (controllers, gateways and presenters)

  • use-cases: Application business rules (use cases of the system)

  • domain: Enterprise business rules (Entities & Repositories)

  • frameworks: Frameworks, drivers and tools (Web framework, database, logger)

├── src
│   ├── adapters
│   ├── use-cases
│   ├── domain
│   └── frameworks
└── package.json

Typescript Setup

For setup typescript properly, we need to create the "tsconfig.json" file in the same level as "src" folder. We need to set a config similar to:

{
    "compilerOptions": {
      "module": "CommonJS",
      "resolveJsonModule": true,
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "target": "ES6",
      "lib": [
        "ES2019"
      ],
      "moduleResolution": "node",
      "sourceMap": true,
      "outDir": "./dist",
      "baseUrl": ".",
      "paths": {
        "@/adapters/*":[
            "src/adapters/*"
        ],
        "@/use-cases/*":[
            "src/use-cases/*"
        ],
        "@/domain/*":[
            "src/domain/*"
        ],
        "@/frameworks/*":[
            "src/frameworks/*"
        ],
      },
      "types": ["node"],
      "typeRoots": [
        "node_modules/@types"
      ]
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

Special mention for the path alias configuration property which allows us to have an one alias for each clean architecture layer: adapters, use-cases, domain and frameworks.

\If you are new to "TSConfig Path Aliases" itself, refer first to my previous article "[How to configure TSConfig Path Aliases](https://maxmartinez.dev/how-to-configure-tsconfig-path-aliases)" to setup properly the path aliases.*

And also express web server and the database package:

npm install express sqlite3
npm install -D @types/express @types/sqlite3

Finally, we will update the package.json file. Replace the scripts config with this:

...
"scripts": {
    "build": "tsc --build && tsc-alias",
    "start": "ts-node-dev --respawn -r tsconfig-paths/register ./src/frameworks/webserver/app.ts"
  },
...

\With ts-node-dev we get the same experience as nodemon*.

\*Don't worry about the app.ts file, we will create it later.*

We are ready to coding our clean architecture project. See you in the next article.