express-typescript-starter-kit

Express Typescript Starter Kit

  • Bhuvanesh C

Learn how to create an express typescript starter. This guide demonstrates how to set up an express typescript project

Learn the Basics of TypeScript with Node.js

Anywhere on your system, create a project directory and set it as your current directory to get started.

mkdir express-api

cd express-api

Create a package.json file with default settings in the project directory to start a Node.js project.

npm init -y

Install Project Dependencies

A few dependencies are needed for your Node.js project in order to build a TypeScript-based secure Express server. Install them as follows

npm i express dotenv cors helmet

What each of the above packages accomplishes for your project is listed below:

Express - Fast, unopinionated, minimalist web framework for Node.js.

dotenv - Zero-dependency module that loads process.env with environment variables from a.env file.

cors - Express middleware provides multiple options to enable CORS.

helmet - By using different HTTP headers, Express middleware can secure your apps by reducing typical attack vectors.

You must install a stable version of TypeScript as a developer dependency in order to use TypeScript

npm i -D typescript

Install type definitions for the earlier installed packages in order to use TypeScript effectively.

npm i -D @types/node @types/express @types/dotenv @types/cors @types/helmet

Initialize TypeScript in Node.js

You must make a tsconfig.json file in the directory you want to use as the TypeScript project’s root directory in order to help the TypeScript compiler understand the structure of your project. In this case, the TypeScript project directory and your project directory are similar.

Ensure that you are in the project directory and perform the following command to quickly generate the tsconfig.json file

npx tsc --init

Use Environmental Variables

You can declare all the variables in one place and load them into the file modules that require them rather than hard-coding configuration variables throughout your project’s files. This central location is typically defined by Node.js developers as a hidden file with the name.env, which you may create by doing the following

touch .env

The following variable, which specifies the port and URL your server can use to listen for requests, should be added to the.env secret file

APP_URL=http://localhost
PORT=3000

The variables created in.env can be loaded by any module of your project using the dotenv package, as can be shown in the following section.

Create an Express App with TypeScript

Create a src directory to hold your Node.js application files in order to keep your application well-organized

mkdir src

Make a file called index.ts under the src directory to act as the application’s entry point

touch src/index.ts

The following template, which represents an Express server, should be included to index.ts

import * as dotenv from "dotenv";
import express from "express";
import cors from "cors";
import helmet from "helmet";

dotenv.config();

if (!process.env.PORT) process.exit(1);
const PORT: number = parseInt(process.env.PORT as string, 10);
const APP_URL: string = process.env.APP_URL as string;

const app = express();

app.use(helmet());
app.use(cors());
app.use(express.json());

app.listen(PORT, () => {
  console.log(`Express is listening on  ${APP_URL}:${PORT}`);
});

app.get("/", (_req, res) => {
  res.send("Express Rest API is running");
});

Improve TypeScript Development Workflow

The time it takes for an application to start up can be extended by the TypeScript compilation process. However, you don’t have to recompile the entire project each time the source code is modified. When you configure ts-node-dev, the time it takes to restart your application when a change is made can be greatly reduced.

Install this package first to energize your development workflow.

npm i -D ts-node-dev

To run your server, you can write a dev npm script in package.json.

{
  "name": "express-api",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "ts-node-dev --respawn --pretty --transpile-only src/index.ts"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": { ... },
  "devDependencies": { ... }
}

Now, simply run the dev script to launch your project:

npm run dev


Categories