admin

I'm a Full-stack developer

Tag

Create Project with Express + TypeScript + ESLint + Auto Reload
Published date: 12/06/2023

While building a server project written in JavaScript and using Node.js + Express is simple. But when your project is developed every day and need to increase the number of developers from other countries, Instead of using JavaScript we will use TypeScript to code and handle errors more efficiently and quickly.


In this article, I introduce to you how to initialize an Express + TypeScript project.


Create package.json
mkdir node-express-typescript
cd node-express-typescript
yarn init --yes


The default config will be created
{
    "name": "node-express-typescript",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "type": "module",
    "keywords": [],
    "author": "",
    "license": "ISC"
}


Create a server with Express
yarn add express dotenv


Create file ./node-express-typescript/src/index.js
const express = require('express');
const dotenv = require('dotenv');

const app = express();
const port = process.env.PORT;

app.use(express.json());
app.use(express.static('public'));
app.set('view engine', 'ejs');

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

app.listen(port, () => {
  return console.log(`http://localhost:${port}`);
});


Set port in .env file
PORT=3000


To start the server, we run the command below
node src/index.js


Express server is already running, you can try using postman to check.


Setup TypeScript, Install dev dependencies
yarn add typescript @types/express @types/node --dev


In package.json will be like below
{
    "devDependencies": {
        "@types/express": "^4.17.14",
        "@types/node": "^18.11.11",
        "typescript": "^4.9.3"
    }
}


Create tsconfig.json
npx tsc --init


{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "baseUrl": "./",
    "rootDir": "./",
    "outDir": "./dist",
    "paths": {}
  },
  "include": ["./src"],
  "exclude": ["node_modules"]
}


Change the file ./node-express-typescript/src/index.js to ./node-express-typescript/src/index.ts
import express from 'express';

const app = express();
const port = 3000;
app.use(express.json());
app.use(express.static('public'));
app.set('view engine', 'ejs');

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

app.listen(port, () => {
  return console.log(`http://localhost:${port}`);
});


Setup auto reload
yarn add nodemon ts-node --dev


Create nodemon.json
{
  "watch": ["src"],
  "ext": "ts",
  "exec": "ts-node ./src/index.ts"
}


Update script in package.json
{
    scripts": {
        "build": "npx tsc",
        "start": "node dist/index.js",
        "dev": "nodemon"
    }
}


Start server
yarn dev


Now that the server is working, you can change the content of the file index.ts res.send('Hello World!'); to res.send('Hello World Update!'); and then trigger postman again and see the change as shown below


Setup ESLint, Install dev dependencies
yarn add eslint eslint-config-prettier eslint-config-standard-with-typescript prettier @trivago/prettier-plugin-sort-imports @typescript-eslint/eslint-plugin --dev


npx eslint --init


Change the content of the file .eslintrc.json
{
  "env": {
    "node": true,
    "commonjs": true
  },
  "root": true,
    "extends": ["standard-with-typescript", "eslint:recommended", "plugin:prettier/recommended"],
  "overrides": [],
  "parserOptions": {
    "ecmaVersion": "latest",
    "parser": "@typescript-eslint/parser",
    "project": "./tsconfig.json"
  },
  "plugins": ["react"],
  "rules": {
    "@typescript-eslint/explicit-function-return-type": "off"
  }
}


Create .prettierrc
{
  "semi": true,
  "tabWidth": 2,
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "all",
  "importOrder": [
    "<THIRD_PARTY_MODULES>",
  ],
  "importOrderSeparation": true, 
  "importOrderSortSpecifiers": true,
  "plugins": []
}


Update script in package.json
"scripts": {
    "build": "npx tsc",
    "start": "node dist/index.js",
    "dev": "nodemon",
    "lint": "eslint .",
    "lint:fix": "eslint --fix",
    "format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"
  },


Run format code
yarn format



Good luck with your installation!!!

Recommend

TypeScript Design Pattern - Abstract Factory
admin07/08/2023

TypeScript Design Pattern - Abstract Factory
The abstract factory pattern is one of five design patterns in the Creational Design Pattern group. The abstract factory provides an interface for creating families of related or dependent objects without specifying their concrete classes.
How to secure your API gateway
admin17/04/2024

How to secure your API gateway
In this blog, I will cover the 6 methods that technology leaders need to incorporate to secure and protect APIs.
Difference Between Stack and Queue
admin07/04/2024

Difference Between Stack and Queue
In the fundamental data structure, besides the linked list, the stack and queue are also used widely in computer science and programming.
Newest

TypeScript Design Pattern - Prototype
admin07/08/2023

TypeScript Design Pattern - Prototype
The prototype pattern is one of the Creational pattern groups. The responsibility is to create a new object through clone the existing object instead of using the new key. The new object is the same as the original object, and we can change its property does not impact the original object.
Part 4: Creating Static Home Page on Ghost CMS
admin17/06/2023

Part 4: Creating Static Home Page on Ghost CMS
I believe that many of you are asking the question: How to fix the home page of Ghost CMS as desired? and are struggling to find many different sources of documentation.
Create Cognito User Pool with AWS CDK
admin09/06/2023

Create Cognito User Pool with AWS CDK
In the previous post, I showed you how to create a simple S3 bucket. Next, in this article, I will guide you to create a Cognito User Pool.