Full-Stack with TS / Nest / Postgres

Implement a simple web app with TS, Nest, and PostgreSQL

Kenneth Reilly
ITNEXT

--

TypeScript, NestJS, and PostgreSQL logos

Introduction

In this article, we will examine the process for building a very simple web application using TypeScript, NestJS, and PostgreSQL. This clean and effective stack is both lightweight and powerful, and allows for rapid prototyping of fast and durable web applications.

For a copy of the source code for this project, see this repo.

Overview

This example consists of a Nest app that serves a simple front-end built with HTML and TypeScript along with an API backed by a PostgreSQL DB. Any front-end framework could be used, however for example purposes vanilla TS was chosen for simplicity.

NestJS provides an extensive set of features that are very useful for building powerful web applications, microservices, and more. This app uses the serve-static, pg, and config libraries for serving static assets, connecting to the database, and configuring environment variables.

To build and run an app such as this one, be sure to install NestJS and PostgreSQL for your operating system and environment.

DB Schema

The database schema is defined in db/schema.sql:

A simple items table is defined with id, name, description, and create_timestamp fields.

App Entry Point

The main application file is src/main.ts:

NestFactory creates an instance of AppModule and the global prefix of service is set, which will be serve as the base URL for the API. The app then listens on port 3000 (in production this should use an environment variable).

App Module

The application module is contained in src/app.module.ts:

Modules define imports, controllers, and providers which import other modules, controllers, and services respectively. ServeStaticModule is used to serve static assets for any path other than /services. ConfigModule loads environment variables to be used in the rest of the application.

App Controller

The app controller file is src/app.controller.ts:

The controller exposes functionality to the rest of the app, and defines endpoints for the API. The two endpoints defined for this simple app are add-item and get-items.

The add-item route uses NewItemDto as a Data Transfer Object definition which will enforce validation of parameters to be expected on an incoming request’s object. This class is defined in src/dto/new-item.dto.ts:

App Service

The application backing service is defined in src/app.service.ts:

This class handles under-the-hood operations for the application, specifically the two methods exposed to the API by the controller. Database queries to the underlying DB service (which we will examine shortly) are wrapped in Promise objects to allow for handling async query operations.

Database

The database module and service are defined in src/db/db.module.ts and src/db/db.service.ts:

The database service creates a client connection to the PostgreSQL DB using a database connection string. The query method takes a SQL string and an array of values, and returns a Promise object that wraps the database response.

Application Front-End

The UI is built with HTML, CSS, and plain TypeScript. The HTML and CSS are omitted for clarity (they are available at the project repo). The core of the app front-end is web/ts/app.ts:

When the UI is loaded, inputs are initialized and and load_items is called to retrieve the current list of items from the database and render them on screen.

When a new item is created, data is retrieved from the input fields and submitted to the API for insertion into the DB.

Summary

This simple app shows how easy it is to set up a basic full-stack web application complete with static UI, REST API, and backing DB. The technologies used are all high-quality and combine simplicity with performance and durability to allow for development of very robust applications with relative ease.

剣一

--

--