In this tutorial, we’ll be learning how to build a REST API using Expressive Tea as the main library, which is using Typescript and ExpressJS under the hood. We’ll be building a simple todo app API. This tutorial assumes an intermediate knowledge of Typescript and Decorators and a basic knowledge of express js.

Getting Started

Project Setup

Let started creating a new folder named todo.

$ mkdir todo

$ cd todo

In your todo folder, we need to initialize a new node project.

$ npm init

If you still does not have installed NodeJS you can get the installation files here.

After you follow the instruction of NodeJS init if you don’t have the typescript compiler tsc is time to installed globally with the next command:

$ npm install --global typescript

And now is time to initialize typescript compiler configuration for our project, let's do it using the next command:

$ tsc --init

by default, the typescript initialization will create a file named tsconfig.json with all the default configuration, you can open it and replace the content with the next lines.

{

"compilerOptions": {

"baseUrl": ".",

"sourceMap": true,

"noEmit": false,

"noImplicitAny": false,

"target": "es6",

"lib": [

"es6",

"dom"

],

"module": "commonjs",

"moduleResolution": "node",

"experimentalDecorators": true,

"emitDecoratorMetadata": true,

"declaration": true

},

"include": ["node_modules/@zerooneit/expressive-tea"],

"exclude": ["node_modules/@zerooneit/expressive-tea/__test__"]

}

As you see on the above line I highlighted in bold the include configuration, you must not forget or delete this line, because, that line allows to include expressive tea to be used by typescript compiler.

And for the last step, we need to create the main file as the main entry for our rest API server.

$ touch main.ts

For now, we’ll leave the file empty.

Dependencies Installation

We will need to install the development dependencies which ones will be used to run the server and help us with code IntelliSense if you are using visual code studio or Webstorm by example.

First, let's install the types that we need in this project: express will need it to use some part of the express framework like middlewares and endpoint arguments. Node to get all the nodejs environment types and Reflect Metadata that is a requirement to user decorators on typescript.

$ npm i --save-dev @types/express @types/node @types/reflect-metadata

Then we need a tool to run our application automatically and watch all code changes, for now, we will use the ts-node-dev package.

$ npm i --save-dev ts-node-dev

Finally is time to install the main dependencies for our application, for now, we can start with the Expressive Tea package.

$ npm i --save @zerooneit/expressive-tea

Optionally you can install a typescript compiler locally on your project to allow another user (in the case that you will share the project with others).

$ npm i --save typescript

Setting up the main server.

Webserver Setup

On your preferred IDE or text editor open the file main.ts and copy the next lines, don’t worry, for now, I will explain each line bellow.

import Boot from '@zerooneit/expressive-tea/classes/Boot';

import {ServerSettings} from '@zerooneit/expressive-tea/decorators/server';

@ServerSettings({

port: 8080

})

class Bootstrap extends Boot {

} const bootstrap = new Bootstrap(); bootstrap.start();

with this one now you have configurated a webserver which will be run on the port 8080 but it won’t contain any endpoint to response, let me first explain what is each line doing there.

import Boot from '@zerooneit/expressive-tea/classes/Boot';

Expressive Tea contains the main class named Boot, this class is containing the main code to configure modules and plugins, that class is abstract and it can not be able to create new instances, however, you can extend it with a new class example.

class Bootstrap extends Boot{}

By default server is configurated to run over port 3000, we can change that adding the Server Settings Decorator to passing the port configuration, first of all, we need to import the decorator.

import { ServerSettings } from "@zerooneit/expressive-tea/decorators/server"

Once you get imported the decorators now are time to used to decorate our bootstrap class.

@ServerSettings({

port: 8080

})

class Bootstrap extends Boot{}

It’s time to test if our server runs, but before that, we need to specify to node how we can start the server using ts-node-dev. Open the package.json file and include the next line under script.

"scripts": {

"start": "tsc -p tsconfig.json && ts-node-dev --respawn --project tsconfig.json main.ts"

},

then run in the terminal the next command

$ npm start

If you can see something similar to the next image that is means your server is working fine.

then time to test the server in our browser, go to the address bar and type http://localhost:8080/

you will get a 404 error and that is because we have only the webserver running without an endpoint.

Creating a Todo Module.

Our server is already created but does not know how to respond to the user’s requests, on Expressive Tea the way to do it is creating a module. We will start to create the proper folder structure.

$ mkdir src

$ cd src

$ mkdir modules

Under the folder modules on the IDE or text editor, we will create a new folder named todo and then we will create a file named TodoModule.ts under the new todo folder. The file should contain the next code.

import { Module} from "@zerooneit/expressive-tea/decorators/module"; @Module({

controllers: [],

providers: [],

mountpoint: '/todo'

}) export default class ToDoModule{}

In the beginning, we need to import the module decorator as you can see in the first import line. In the module decorator, we need to declare 3 properties that allow creating a bucket to contains all the endpoints that we will create. First, we have controllers properties that will contain all the controllers with the endpoints that we need, the providers properties will contain all the services that will be injected on the controllers as dependency injection (what will be covered in another part of this tutorial) and we have the mountpoint that is mounting the module over that route, in an example, in this case, it will be over http://localhost:8080/todo and will mount all the controller endpoints over it.

Creating the Controller

One of the important parts of the module is a controller, which will allow you to create the endpoints and respond to the user’s requests. A Controller will contain the Http verb and the method to make a response. Let start creating a new controller for our todo module.

import { Route } from "@zerooneit/expressive-tea/decorators/router"; @Route('/')

export default class TodoController {}

First thing is import the decorator to create the routing where the controller will be mounting, in this case, will be on the root of the todo module and will be accessible on http://localhost:8080/todo/ if you change it for example to todo_controller you the controller endpoints will be mounting over http://localhost:8080/todo/todo_controller.

But even at this point is not able to respond to any request because we don’t have declared an endpoint, so, to do that we need to import the GET method decorator in order to specify which kind of request you need to respond and create the method as you doing on express routing.

import { Route, Get } from "@zerooneit/expressive-tea/decorators/router"; @Route('/')

export default class TodoController {

@Get('/')

async index(req, res) {

res.send('Todo Controller Index');

}

}