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.