[Express.js] Express Setup

Introduction

In this article, I will show you how to setup a new Express.js project with ESM、typescript、Jest、Prettier、ESLint and Path Alias.

You can do it manually or use the gen-express-cli to generate a new project with the following command:

npx gen-express-cli@latest <project-name>

Step 1 - Create a new project

First, create a new project with the following command:

mkdir express-project
cd express-project

npm init -y

Step 2 - Install dependencies

Paste the following code into your package.json file:

package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "cross-env NODE_ENV=development nodemon -r tsconfig-paths/register --exec ts-node ./src/index.ts --files",
    "start": "cross-env NODE_ENV=production node ./build/src/index.js",
    "build": "tsc && tsc-alias",
    "lint": "eslint ./src/**/*.ts --fix",
    "format": "prettier --write ./**/*.{ts,json}",
    "test": "jest --coverage=true -w=1 --forceExit --detectOpenHandles --watchAll=false --testPathPattern=src/__tests__ --testPathIgnorePatterns=build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cors": "^2",
    "dotenv": "^16",
    "express": "^4"
  },
  "devDependencies": {
    "cross-env": "^7",
    "nodemon": "^3",
    "typescript": "~5.3",
    "ts-node": "^10",
    "@types/cors": "^2",
    "@types/express": "^4",
    "@types/node": "^20",
    "eslint": "^8",
    "eslint-config-prettier": "^9",
    "eslint-config-standard-with-typescript": "^43",
    "eslint-plugin-import": "^2",
    "eslint-plugin-n": "^16",
    "eslint-plugin-prettier": "^5",
    "eslint-plugin-promise": "^6",
    "@typescript-eslint/eslint-plugin": "^6",
    "eslint-plugin-jest": "^27",
    "prettier": "^3",
    "jest": "^29",
    "ts-jest": "^29",
    "@types/jest": "^29",
    "tsc-alias": "^1",
    "tsconfig-paths": "^4",
    "typescript-transform-paths": "^3"
  }
}

Then, install the dependencies:

npm install

Step 3 - Create a index.ts file

Create a new file named src/index.ts with the following code:

src/index.ts

import express from 'express';
import dotenv from 'dotenv';
import cors from 'cors';

dotenv.config();

const app = express();
const PORT = process.env.PORT ?? 8000;

app.use(cors());
app.use(express.urlencoded({ extended: true }));
app.use(express.json());

app.get('/', (req, res) => {
  res.send('Hello World');
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

export default app;

Step 4 - Setup TypeScript

Create a new file named tsconfig.json with the following code:

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "resolveJsonModule": true,
    "baseUrl": ".",
    "outDir": "build",
    "sourceMap": true,
    "strict": true,
    "esModuleInterop": true,
    "types": ["node", "jest"],
    "plugins": [
      {
        "transform": "typescript-transform-paths"
      },
      {
        "transform": "typescript-transform-paths",
        "afterDeclarations": true
      }
    ],
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["process.env.d.ts", "./**/*.ts"],
  "exclude": ["node_modules"]
}

Step 5 - Setup ESLint and Prettier

Create a new file named .eslintrc.json with the following code:

.eslintrc.json

{
  "env": {
    "es2021": true,
    "node": true,
    "jest/globals": true
  },
  "extends": ["standard-with-typescript", "prettier"],
  "plugins": ["jest", "prettier"],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "semi": true,
        "tabWidth": 2,
        "printWidth": 140,
        "singleQuote": true,
        "bracketSameLine": false,
        "trailingComma": "all",
        "arrowParens": "always"
      }
    ]
  }
}

Create a new file named .prettierrc with the following code:

.prettierrc

{
  "semi": true,
  "printWidth": 140,
  "tabWidth": 2,
  "singleQuote": true,
  "bracketSpacing": true,
  "trailingComma": "all",
  "arrowParens": "always"
}

Step 6 - Setup Jest

Create a new file named jest.config.ts with the following code:

jest.config.ts

import type { JestConfigWithTsJest } from 'ts-jest';

const config: JestConfigWithTsJest = {
  verbose: true,
  transform: {
    '^.+\\.ts?$': [
      'ts-jest',
      {
        useESM: true
      }
    ]
  },
  extensionsToTreatAsEsm: ['.ts'],
  moduleNameMapper: {
    '^(\\.{1,2}/.*)\\.js$': '$1',
    '@/(.*)': ['<rootDir>/src/$1']
  }
};

export default config;

Step 7 - Test your project

Run the following command to test your project:

npm run dev

Open your browser and visit http://localhost:8000, you will see Hello World.

To compile your typescript code, run the following command:

npm run build
npm start

To lint your code, run the following command:

npm run lint

To format your code, run the following command:

npm run format

To test your code, run the following command:

npm test

To import modules with path alias, you can use the following code:

import <module_name> from '@/module_name'; // recommended
import <module_name> from '../../../module_name'; // not recommended

Conclusion

If you like this article, please give me a star on GitHub