Creating an Express TypeScript Server
Tags: webdev, typescript, tutorial, node
Published: 2023-02-11 01:54:57

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
```

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
```

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

![Git commands](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6tzd3lz6xsozdbv60zj4.png)

Make sure you have installed node on your system by running

```
node -v
```

If you don't have Node installed make sure you install it from the [Node download](https://nodejs.org/en/download/) page.

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

![Node version](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3fkkew91o90urjeop5ju.png)

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
```
This will generate the package.json file with some default values.

![npm init](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5f2ks90j0igx7xm931yq.png)

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
```

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
```

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

![Git ignore](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0co3s32kuzc5h52cy1eu.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ynut8hhgzoia33out7hn.png)

## Making the server work

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

![index.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/peir6j6errxatnldm6lq.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y32pn78gq5va1g1uwx0j.png)

Once we've save it, we run 

```
npm start
```

![express running](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7dy6e5dp2rphm4no31y0.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1zu0i5kewqgtufa11x1y.png)

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

```
git add .
git commit -m "Express server configured"
```

## 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
```
Now we need to generate the tsconfig.json, for that we need to run 

```
tsc --init
```

![tsc init](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7l99dnnbq30r51q8n7u5.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nzdqfuw2usajvrcfgmlp.png)

and your package.json

![package](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4cxaikzerim8atbzicm4.png)

## Adding types to your project

To add the types to the project you need to run

```
npm install --save-dev @types/node @types/express
```

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/448dvquigx07zyjf663w.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/upjdws753xkxmzngztdl.png)

## Running your server

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

```
npm run build
```

After the code is build we run:

```
npm start
```

![TypeScript Start](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9cue4w86thl0dy4xr3p6.png)

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

![Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fw4bwvyauql4xy0tn2vk.png)

## 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