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

image

Setting up Package.json

image

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.

image

Setting up your Linting using tslint

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

image

Setting up Gulp file

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

image

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?

image

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

image

image

image

image

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

image

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

image

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.

image

Users.ts

image

Now final compilation and Build

> npm run gulp  or gulp build

> npm run start

image

That’s all..!!!

Full source code available for download @ github

Hope this will help someone. Happy Coding Smile

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s