Node.js, Express.js with TypeScript & GULP

Why TypeScript?

I believe that TypeScript has been embraced as the choice language for building next generation web application using ECMAScript 6 (ES6) with strong typing. Strong typing doesn’t necessarily improve the JavaScript that your Node.js server will execute, or the JavaScript that your browser might execute. However, it provides the developer more insight into public and 3rd party APIs as well as reducing the bugs (and development cycle to check for bugs) in the software we are developing.

If you’re only looking for Node-Express-ES6 Boilerplate, click HERE

Let’s Get Started

Let’s spin up our first Express + Node.js server using npm + Javascript.

  1. Download and Install Node.js
  2. Create a package.json file
  3. Install Express
  4. Folder Structure


Setting up Package.json


Setting up Typescript

You’ll need some global tools too. You might need to run these as sudo or “Run As Administrator” if you’re using windows.

npm install –global typescript gulp tsd

  • typescript is our global typescript compiler
  • gulp is a build tool that’s crazy popular now and will help us create beautiful expressive build commands
  • tsd is a package manager for downloading TypeScript definition files. We’ll primarily use this for expressjs


Setting up tsconfig.json

Create tsconfig.json file at root level. This tells our typescript compiler some information about how to compile our .ts extension files. You can read more about tsconfig.json files here.


Setting up your Linting using tslint

Create tsling.json file under root directory for defining linting rules.


Setting up Gulp file

Create gulpfile.js at your root level which will handle all gulp compilation and cleaning work.


Server Setup

Now let’s start moving towards actual ./Src folder and actual server setup code.

In our src directory. We’ll need to start a typescript definition file.

cd src

tsd init -y

This will create one file “tsd.json” and one folder “typings” in your src folder. Now we’ll install express’s typescript definition with:

cd src

tsd install express –s

tsd install body-parser –s

How to write code in Server.TS?


Let’s define our first class “HttpServer”

– it will initiate and define express app

– handle bootstrapping express app

– handle defining routes

– and basic express configurations





We will get to the route files later on but first let’s start server and finish our server.ts coding


Helper functions like “onError” and “onListening” are here –


Setting up Express Routes

We have two routes – Index and Users for example.

Create “routes” folder under “src” folder which will have our routes.

Create Index.ts and Users.ts files inside routes folder.




Now final compilation and Build

> npm run gulp  or gulp build

> npm run start


That’s all..!!!

Full source code available for download @ github

Hope this will help someone. Happy Coding Smile


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s