Express Basics

JS HTTP server

A simple HTTP server in Node

A simple server in three steps:

• include "http" library
• create server responses
• define the port that you want to listen to.

Note: The _ before a variable name is used to indicate that the variable isn't used. This is to avoid the VSCode warning about unused variable.

import http from 'http'

const server = http.createServer((\_req, res) => {
  res.write('Some cool response!')
  res.end()
})

const port = 3000
server.listen(port)

console.log('HTTP Server listening port', port)

For this code to work, remember "type": "module" in your package.json. Also, you may need to change your port number to something other than 3000.

PORT numbers

The port number (16 bit unsigned integer) defines a port through which the communication to your application happens. Ports allow multiple applications to be located on the same host (IP).

The client connects to this port in some server (defined by an IP address), so the client and the server are able to communicate.

Computers have several different ports at their disposal but some of them are being used and your application might not be able to assign those ports to itself.

Request and response

The request object is an object that is sent from the client to the server.

The response object is an object that is sent from the server to the client. When you modify the response object, you're essentially modifying how the server responds to the client.

const server = http.createServer((req, res) => {
  res.write("Some cool response!");
  res.end();
});

Express Server

Express

Express is the most popular server-library for Node

Setting up a server with node-http is already fairly simple, but Express tries to make this even simpler

In some cases you can manage without Express, but for larger applications it's recommended

Install Express by using

npm install express

A side note about dependencies

• By using npm install <package>, the package will become dependency for the application.
• By using npm install --save-dev <package>, the package will become a development dependency for the application.
  • This means the package won't be included in the built application.
• A shortcut for ---save-dev is -D
• Dependencies are needed to run the application, development dependencies are needed for development.
• Additional info: https://www.geeksforgeeks.org/difference-between-dependencies-devdependencies-and-peerdependencies/

Getting started with Express

Initialize a new TypeScript project with appropriate tsconfig.json file and scripts for building and/or running the project in development mode using ts-node.

Create a very simple express project in index.ts

import express from 'express'

const server = express()

server.listen(3000, () => {
  console.log('Listening to port 3000')
})

Then start the server as you would any other TS project and connect to http://localhost:3000 with your browser or using an API tool such as Insomnia or Postman.

Express - Requests

The server does not yet do anything except listens. That is because we have not defined how it should deal with incoming requests.

With Express you can easily process different kind of requests, e.g. GET, POST, DELETE etc.

An example of how to handle a GET request to the root of the project (/):

import { Request, Response } from "express";

server.get("/", (req: Request, res: Response) => {
  res.send("Just saying hello!")
})

TypeScript Request and Response

Notice how we import Request and Response from express. These types are defined in express, but identically named types are also available from JavaScript basic library.

If you use the Request and Response types without importing them, JS mistakenly thinks they are different objects, and complains about incompatibility.

Express - Endpoints

To create a new endpoint we define what kind of request we're handling, then what the route to the endpoint is and finally what the endpoint does.

In the below example we are creating an endpoint that handles a GET request to route /foobar, that sends a response containing the string 'OK'.

server.get('/foobar', (req, res) => {
  res.send('OK')
})

Nodemon

Reminder : If you are not using Nodemon in development, you are making your life unnecessarily difficult. Use Nodemon.

Instructions are below as a refresher.

Nodemon with JavaScript

One of the handiest packages out there is nodemon, which monitors your node program. Whenever you save your files, it reloads the program, showing you immediately the results of your changes.

Nodemon is installed as a dev dependency npm install --save-dev nodemon

To use nodemon, you should have a development script "dev": "nodemon ./index.js"

Nodemon with TypeScript

To get Nodemon working with TypeScript we need additional package to run our TS code without waiting for it to compile. npm install --save-dev nodemon ts-node

After installing, nodemon works directly with .ts files. "dev": "nodemon ./index.ts"

Request params & query

If request params are defined, they're something user must send to the server. You can think parameters as the "path" of the endpoint.

https://localhost:5000/ThisIsParam

Request query is optional information that the user can send to the server. A question mark (?) is used to separate the request query.

https://localhost:5000?ThisIsQuery=123

Chaining query parameters is done with et symbol (&)

https://localhost:5000?first=123&second=456

Request params & request query

app.get("/:name/:surname", (req: Request, res: Response) => {
  console.log("Params:");
  console.log(request.params);
  console.log("Query:");
  console.log(request.query);
  response.send("Hello " + request.params.name);
});

app.listen(5000);

Try connecting via browser!

http://localhost:5000/John/Doe
http://localhost:5000/John/Doe?query1=123

Request query & param types

Request parameters and query parameters are always of type string. If a number is passed, it will be a string that contains a number.

The example below will always return 404, since the strict equality item.id === id will never be true. This is because the item.id is of type number and id being of type string.

import express, { Request, Response } from 'express'

const server = express()

const data = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' }
]

server.get('/:id', (req: Request, res: Response) => {
  const id = req.params.id
  const info = data.find(item => item.id === id)
  if (info === undefined) {
    return res.status(404).send()
  }

  res.send(info)
})

server.listen(3000)

Exercise 4: Advanced Counter Server

Expand the API from the previous assignment by accepting a name through the counter endpoint: /counter/:name

When entering this endpoint, the server should return the count of how many times this named endpoint has been visited.

For example

• Aaron enters /counter/Aaron 🠖 "Aaron was here 1 times"
• Aaron enters /counter/Aaron 🠖 "Aaron was here 2 times"
• Beatrice enters /counter/Beatrice 🠖 "Beatrice was here 1 times"
• Aaron enters /counter/Aaron 🠖 "Aaron was here 3 times"

Extra: "url" library

With the "url" library, you can parse url fields (i.e., requests) the client sends to your server.

import  url from "url";
// URL module usage example

const addressString = 'http://localhost:5000/default.html?year=2017&month=february'; // Define the address
const address = url.parse(addressString, true); // Parse through the address with url.parse() function.
console.log(address.host); // returns 'localhost:5000'
console.log(address.pathname); // returns '/default.html'
console.log(address.search); // returns '?year=2017&month=february'
const query = address.query; // returns an object: { year: 2017, month: 'february' }
console_ .log(query.month); // returns 'february

Express Middleware

Middlewares

Generally speaking, middleware is an application that does something in between some other applications.

There are tons of middleware libraries available for Express.

What this means in Express: with a middleware, you can manipulate the client request and server response in the client-server communication.

Middleware functions are functions that have access to the request object (req), the response object (res), and the next function in the application's request-response cycle. When the next function is invoked, the next middleware function is executed.

Middleware can be defined as such

const authCheck = (req: Request, res: Response, next: NextFunction) => {
  if (req.headers.Authentication === undefined) {    // Read the request object
    res.status(401).send('Missing Authentication Header')    // Modify the response object
    return
  }

  next()    // Execute the next middleware
}

In Express, .use() method initializes a middleware (argument 2) in a given path (argument 1).

In the middleware, the next() function will jump to the next middleware or endpoint.

server.use('/customers', authCheck)
server.get('/customers', (req, res) => {
// we know that Authentication header is present
...

Middleware - Unknown endpoint (AKA 404)

As you might have noticed, all websites have some kind of a default functionality for unknown endpoints.

This can be handled with a middleware.

Unknown endpoint has to be taken into use after the actual endpoints!

const unknownEndpoint = (_req: Request, res: Response) => {
  res.status(404).send({error: 'Page not found'})
}

app.use(unknownEndpoint)

Middleware - Error handler

An error handler is often needed to handle different kind of user or application errors.

We can use middleware to enable error handling for our application.

Has to be the last middleware to be taken into use!

const errorHandler = (error: Error, req: Request, res: Response, next: NextFunction) => {
  console.error(error.message)
  if (error.name === 'MyCustomError') {
    res.status(400).send({error: 'My Custom Error Message'})
  }

  next(error)
}

Middleware - Req & Res

A need to manually alter req & res is quite common. To avoid bloated code, the handling can be easily done with proper middlewares.

Setting a header in middleware:

app.use((req: Request, res: Response, next: Next) => {
  res.setHeader('Content-Type', 'image/png');
  next();
});

Getting a header and storing its value. If the header is not present, return 403 with an 'Unauthorized' message:

app.use((req: Request, res: Response, next: NextFunction) => {
  const someIdNeededInApplication = req.header('Some-Custom-Header');
  if (!someIdNeededInApplication) {
    res.status(403).send('Unauthorized');
  }

  someIdFunctionality(someIdNeededInApplication);
  next();
});

Express.js: Creating a REST API

REST HTTP requests

We have gone through what a GET request is. Let's briefly go through what other types of requests are necessary for you.

• GET /products/:id → Returns a single product identified by its id
• GET /products →Returns all the products
• POST /products → Creates a new product
• DELETE /products/:id → Removes a single product identified by its id
• PUT /products/:id → Updates an existing product

Basic RESTFUL functionality is often referenced as a CRUD (Create, Read, Update, Delete).

Handling request content

To properly handle some requests, e.g., POST requests, in Express, a body-parser middleware must be taken into use. It's as simple as:

const server = express();
server.use(express.json());

You might encounter a separate body-parser being used. This is no longer necessary, as Express 4.16+ includes a body parser middleware built-in.

express.urlencoded() allows us to parse url-encoded forms by attaching the data to the request body.

const app = express();
app.use(express.json());
app.use(express.urlencoded({extended: false}));

The "extended" parameter's false value only says that we are not dealing with any complicated objects (objects with sub objects, etc).

Basic POST request

const app = express();
app.use(express.json());

app.get("/", (req: Request, res: Response) => {
  console.log("GET request init!");
  res.sendFile(__dirname + "/index.html");
});

app.post("/", (rreq: Request, res: Response) => {
  console.log("POST request init!");
  console.log(req.body);
  res.redirect("/");
});

Request Body

GET methods should not in general have body parameters. The GET method should only be used to get data, the request should not convey data.

Despite this, most modern implementations can send and receive request bodies in all request types.

The requests that should not include body are CONNECT, GET, HEAD, OPTIONS and TRACE.

Request Body Types

Request body is parsed by the express body parser, and therefore it can contain any basic JavaScript data types. Notice that this differs from the request parameters and queries.

This also means that you do not know what the data type of any given body parameter will be. It might be necessary to check this in some cases.

TypeScript Body Casting

If you want to enforce type safety, the solution is to validate the user input before using it.

This is usually a good idea even if not using TypeScript, since it is important to know what type all the variables are in your code.

interface Body {
  name: string;
  age: number;
}

const validate = (req: Request, res: Response, next: NextFunction ) => {
  const { age, name } = req.body;
  if (typeof(age) !== 'number' || typeof(name) !== 'string') {
    return res.status(400).send('Missing or invalid parameters');
  }
  next();
}

server.post('/', validate, (req: Request, res: Response) => {
  const body: Body = req.body; // this has been validated
  console.log(body);
  res.send(body.name.toUpperCase());
});