DEV Community

Aditya Chukka
Aditya Chukka

Posted on

Create Server using Express and TypeScript

Express_TS

In this post, we will learn how to create a server using Express and TypeScript

If you are feeling lucky, refer to this commit for full code

Step 1: Setting up the project

  • Download and install the latest stable version of Node
  • At the time of writing this post, the recommended version is 14.17.0
$ node --version
v14.17.0
Enter fullscreen mode Exit fullscreen mode
  • Create a new directory for the service
mkdir tdsvc
Enter fullscreen mode Exit fullscreen mode
  • Initialize a node application
cd tdsvc
npm init
Enter fullscreen mode Exit fullscreen mode
  • Fill out the necessary project details to generate a package.json
  • Set main to dist/index.js
  • Add start script in the scripts section
"start": "tsc && node dist/index.js"
Enter fullscreen mode Exit fullscreen mode
  • Add "type": "module" to enable ES5 modules

See this post for more information

Stitching all the above your package.json should look something similar to this

{
  "name": "tdsvc",
  "version": "0.1.0",
  "description": "A Node Server to maitain todolist",
  "main": "dist/index.js",
  "type": "module",
  "scripts": {
    "start": "tsc && node dist/index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/achukka/tdsvc.git"
  },
  "keywords": [
    "node"
  ],
  "author": "Aditya Chukka",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/achukka/tdsvc/issues"
  },
  "homepage": "https://github.com/achukka/tdsvc#readme",
  "devDependencies": {
    "@types/express": "^4.17.12",
    "typescript": "^4.3.2"
  },
  "dependencies": {
    "express": "^4.17.1"
  }
}
Enter fullscreen mode Exit fullscreen mode

Step 2: Installing dependencies

  • Install typescript locally
npm install --save-dev typescript
Enter fullscreen mode Exit fullscreen mode
  • Install Express framework
npm install --save express
Enter fullscreen mode Exit fullscreen mode
  • Install types for Express locally
npm install --save-dev @types/express
Enter fullscreen mode Exit fullscreen mode
  • Set TypeScript compiler options through tsconfig.json
{
  "compilerOptions": {
    "module": "ESNext",
    "esModuleInterop": true,
    "target": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist"
  },
  "lib": ["esnext"]
}
Enter fullscreen mode Exit fullscreen mode
  • Let's go over some of the options above

    • With esModuleInterop we can import CommonJS modules in compliance with es6 modules.
    • As the name suggest, we use outDir to specify all the output directory for all transpiled (.js) files. In this post we are settings it to dist
    • sourceMap allows debuggers to display the actual TypeScript file
    • target specifies the output language level

    You can read more about tsconfig in tyescript docs

Step 3: Create a basic server

  • Create an empty index.ts in src directory
mkdir src
touch src/index.ts
Enter fullscreen mode Exit fullscreen mode
  • Create an Express application in src/index.ts
import express from "express";

const app = express();
Enter fullscreen mode Exit fullscreen mode
  • Add a sample port to listen on (Example: 3000)
const port = 3000;
Enter fullscreen mode Exit fullscreen mode
  • Add a HTTP GET method
app.get("/", (req, res) => {
  res.send("You are listening from express server");
});
Enter fullscreen mode Exit fullscreen mode
  • Listen for requests on port
app.listen(port, (err?) => {
  if (err) {
    return console.error(err);
  }
  return console.log(`server is listening on ${port}`);
});
Enter fullscreen mode Exit fullscreen mode

Stitching all sections together we get

import express from "express";

const app = express();
const port = 3000;
app.get("/", (req, res) => {
  res.send("You are listening from express server");
});

app.listen(port, (err?) => {
  if (err) {
    return console.error(err);
  }
  return console.log(`server is listening on ${port}`);
});
Enter fullscreen mode Exit fullscreen mode

Step 4: Running the server

  • You can run your server by npm start
  • If the above command runs successfully, you should a message in your terminal
> tsc && node dist/index.js

server is listening on 3000
Enter fullscreen mode Exit fullscreen mode

Server

Please find the entire code in this commit

❤️ Congratulations 👏, you have successfully created a server using Express and TypeScript

Thanks for reading through the entire article. Please reach out with questions, comments and/or feedback.

Top comments (0)