DEV Community

Andres Court
Andres Court

Posted on • Updated on

Creating an Express TypeScript Server

This time we are creating a new Express server using TypeScript.

So lets start with an empty project with no files, as a rule, I always initialize my GIT repository when starting a new project, so lets do that by running the following command on your terminal

git init
Enter fullscreen mode Exit fullscreen mode

Once it is done, my next step is starting a development branch that is where I will work and leave the main branch for deployment purposes only. So lets run:

git checkout -b development
Enter fullscreen mode Exit fullscreen mode

This will create a new branch called development and make it your active branch.

Git commands

Make sure you have installed node on your system by running

node -v
Enter fullscreen mode Exit fullscreen mode

If you don't have Node installed make sure you install it from the Node download page.

Once you've installed Node the output of the last command should look something like this

Node version

Now we have Node in our system, we can initialize the node application, for that we need to have a package.json file. You can use YARN or NPM to do it, feel free to use any, I will be using NPM.

To initialize the node project we just need to type

npm init -y
Enter fullscreen mode Exit fullscreen mode

This will generate the package.json file with some default values.

npm init

With the package.json file we can start installing all of the dependencies we will be using.

Adding the Express server

To install Express into our project we need to run

npm install express
Enter fullscreen mode Exit fullscreen mode

This will download and install all the files required for an Express server to work. After it finished installing you will notice that it generated a package-lock.json file and the node_modules directory. Neither the package-lock.json or the node_modules directory need to be tracked by our GIT repository because both are generated whenever we run

npm install
Enter fullscreen mode Exit fullscreen mode

To do this we need to create the .gitignore file and add both to the file

Git ignore

Now we need to add our app entry point, for organizational purposes, I always create all the files for my project inside a /src directory.

Your file structure so far should look something like this

directory

Making the server work

In the index.js file we need to write the following

index.js

What are we doing here:

  • First we require the express module so we can use its methods
  • We initialize the express server and save it on the variable app
  • We create a GET method on the server's root that will just return a Hello World
  • We listen on port 3000 for new requests, and on success we log to the console that we are listening on port 3000

Finally we need to add to our package.json the script to start the server, so in the scripts section we add the following:

scripts

Once we've save it, we run

npm start
Enter fullscreen mode Exit fullscreen mode

express running

So lets test it is really working, on your browser navigate to http://localhost:3000 and you should see a "Hello World" text in your browser

Hello world

Congratulations!!!! you've just created your first express server. So lets commit our work by running

git add .
git commit -m "Express server configured"
Enter fullscreen mode Exit fullscreen mode

Adding TypeScript

To add TypeScript we need to add it as a dev dependency to our project, to do so we need to run

npm install -D typescript
Enter fullscreen mode Exit fullscreen mode

Now we need to generate the tsconfig.json, for that we need to run

tsc --init
Enter fullscreen mode Exit fullscreen mode

tsc init

In the tsconfig.json file we need to define where will the compiled files will go, for this we change the outDir property inside the compilerOptions. Usually it is defined as "./build" or "./dist". Whatever option we add here it should be included in the .gitignore file.

In the package.json file we need to add the build script and modify the start script to run the file in the outDir folder.

Finally you need to add your include files, for that we need to add the include property which is an array of all the directories that are going to be monitored by the TypeScript compiler. Add also the exclude property to specify which files are needed to be excluded, it generally has to be your outdir folder.

After you are done, your tsconfig.json should look like this:

tsconfig

and your package.json

package

Adding types to your project

To add the types to the project you need to run

npm install --save-dev @types/node @types/express
Enter fullscreen mode Exit fullscreen mode

This will add the types for node and express modules, we install them as a dev dependency because it is only needed in development, your dev dependencies should look like this

devDependency

Finally before we continue we need to commit the changes to our git repository

Modify the server to be TypeScript

First we need to change the extension of the index.js file in the src directory to be index.ts

In TypeScript we use import statements rather than the require, so we need to change it. Once that is done we can add the types to the variables. Your index.ts file should look something like this

index

Running your server

To run the server we first need to compile the TypeScript code, for that we need to run

npm run build
Enter fullscreen mode Exit fullscreen mode

After the code is build we run:

npm start
Enter fullscreen mode Exit fullscreen mode

TypeScript Start

Finally when we go to our http://localhost:3000 we should see

Page

What is next

Congratulations!! You have just created your TypeScript Express server.

After this we will need to:

  • Add eslint and prettier
  • Add testing, a great library for it is JEST
  • Add the routes to work the logic of your application

All of these topics I will cover them in future posts

Top comments (0)