DEV Community

Cover image for NodeJS Express Setup with Typescript, ESLint, Prettier
Vishal Jagamani
Vishal Jagamani

Posted on • Edited on

NodeJS Express Setup with Typescript, ESLint, Prettier

After extensive research and hands-on work, I've refined the best approach to set up a new Node.js project with Express, TypeScript, ESLint, and Prettier. Follow these steps to quickly get started and have your project ready for development.

Updated setup for eslint, using typescript-eslint

- Project Initialization: create a new Node.js project:

npm init -y
Enter fullscreen mode Exit fullscreen mode

- Install Dependencies: Install required packages:

npm install express cors dotenv
Enter fullscreen mode Exit fullscreen mode
npm install --save-dev @types/node @types/express @types/cors eslint @eslint/js typescript typescript-eslint prettier
Enter fullscreen mode Exit fullscreen mode

- Configure TypeScript: create a tsconfig.json file:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "node",
    "outDir": "./dist",
    "rootDir": "./src",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "sourceMap": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}
Enter fullscreen mode Exit fullscreen mode

- Update package.json scripts: Modify package.json to include:

{
  "type": "module",
  "scripts": {
    "start": "node dist/app.js",
    "build": "tsc",
    "dev": "node dist/app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}
Enter fullscreen mode Exit fullscreen mode

- Create eslint.config.mjs (updated ESLint configuration):

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';

export default tseslint.config(eslint.configs.recommended, tseslint.configs.recommended, {
    rules: {
        semi: 'off',
        quotes: ['error', 'single', { allowTemplateLiterals: true }],
        // '@typescript-eslint/no-explicit-any': 'off',
    },
});
Enter fullscreen mode Exit fullscreen mode

- Configure Prettier:

  • Create .prettierrc file:
{
  "tabWidth": 4,
  "singleQuote": true,
  "trailingComma": "all",
  "semi": true,
  "printWidth": 150,
  "pluginSearchDirs": false
}
Enter fullscreen mode Exit fullscreen mode
  • Create .pretterignore file:
**/.git
**/.svn
**/.hg
**/node_modules
Enter fullscreen mode Exit fullscreen mode

- Recommended folder structure:

/project
│── /src
│   ├── app.ts                # Main Express app file
│   ├── /routes               # All micro routes
│   │   ├── user.routes.ts    # Routes for users
│   │   ├── auth.routes.ts    # Routes for authentication
│   │   ├── index.ts          # Centralized router export
│   │
│   ├── /controllers          # Controllers handling HTTP requests
│   │   ├── user.controller.ts
│   │   ├── auth.controller.ts
│   │
│   ├── /services             # Business logic and data handling
│   │   ├── user.service.ts
│   │   ├── auth.service.ts
│   │
│   ├── /middlewares          # Middleware functions
│   │   ├── auth.middleware.ts
│   │   ├── error.middleware.ts
│   │   ├── validate.middleware.ts
│   │
│   ├── /utils                # Utility functions
│   │   ├── logger.ts         # Logging utility (e.g., Winston)
│   │   ├── response.ts       # Standardized API responses
│   │   ├── hash.ts           # Password hashing utilities
│   │
│   ├── /config               # Configuration files
│   │   ├── db.ts             # MongoDB connection setup
│   │   ├── env.ts            # Environment variable handler
│   │   ├── config.ts         # General app config
│   │
│   ├── /types                # TypeScript type definitions
│   │   ├── post.types.ts
│   │   ├── user.types.ts
│   │   ├── index.d.ts
│
│── .env                      # Environment variables
│── eslint.config.mjs         # ESLint configuration
│── .prettierrc               # Prettier configuration
│── .pretterignore            # Prettier ignore configuration
│── tsconfig.json             # TypeScript configuration
│── package.json              # Dependencies and scripts
│── README.md                 # Documentation 
Enter fullscreen mode Exit fullscreen mode

- Additional useful packages

  • Helmet - Security middleware
npm install helmet
Enter fullscreen mode Exit fullscreen mode
  • Passport - Authentication middleware
npm install passport
Enter fullscreen mode Exit fullscreen mode
  • Winston - Logging
npm install winston
Enter fullscreen mode Exit fullscreen mode

This structured guide ensures an efficient setup for a clean, maintainable Node.js project. 🚀

Top comments (1)

Collapse
 
eshimischi profile image
eshimischi

Use Biome github.com/biomejs/biome instead of Eslint/Prettier

Some comments may only be visible to logged-in visitors. Sign in to view all comments.