Create Server using Express and TypeScript
Create Server using Express and TypeScript
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 filetarget
specifies the output language level
You can read more about tsconfig in tyescript docs
- With
Step 3: Create a basic server
- Create an empty
index.ts
in src directory
mkdir
srctouch
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.jsserver is listening on 3000
Enter fullscreen mode
Exit fullscreen mode
- Visit http://localhost:3000 in your browser and you should see something similar
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.