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

v
14.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

Visit http://localhost:3000 in your browser and you should see something similar

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.