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.
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 page.
Once you've installed Node the output of the last command should look something like this
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.
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
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
Making the server work
In the index.js file we need to write the following
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:
Once we've save it, we run
npm start
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
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
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:
and your package.json
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
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
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
Finally when we go to our http://localhost:3000 we should see
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)