DEV Community

Cover image for NestJS/PostgreSQL & Angular within NX Workspace - From scratch to production
Clément
Clément

Posted on • Edited on

NestJS/PostgreSQL & Angular within NX Workspace - From scratch to production

#angular #typescript #javascript #postgres

This is a post to share my experience on building a client/server solution in NX Workspace with NestJS/Angular. Most tutorials don't explains how to deal with development & production environments and using TypeORM brings some complexity.

What I want to build ?
An Angular web application
A NestJS API, using TypeORM to link a PostgreSQL database
I develop on my local environment, then deploy on production environment via SSH

Setup local environment

What are the steps ?
First we will bring up our local (development) environment by creating an NX Workspace.



npx create-nx-workspace@latest
  ? Workspace name(e.g., orgname): banana
  ? What to create in the new workspace: angular-nest [a workspace with a full stack application (Angular + Nest)]
  ? Application name: kiwi
  ? Default stylesheet format: SASS(.scss) [http://sass-lang.com]
  ? Use Nx Cloud?: No
Enter fullscreen mode Exit fullscreen mode

Now prepare our local database, I will use PostgreSQL through Docker.
You can install Docker for your OS by reading docker documentation https://docs.docker.com/engine/install/

Create a docker-compose.yml file at root of workspace (near package.json)



version: "3"

services:
  db:
    image: postgres
    restart: always
    ports:
      - "5432:5432"
    environment:
      POSTGRES_DB: kiwi
      POSTGRES_USER: _username_
      POSTGRES_PASSWORD: _password_

  adminer:
    image: adminer
    restart: always
    ports:
      - 8080:8080
Enter fullscreen mode Exit fullscreen mode

Launch our service



sudo docker-compose up -d
Enter fullscreen mode Exit fullscreen mode

You can visit http://localhost:8080 and login to view your empty database, empty but up and running !

image

We can setup NestJS to connect our database, we need to install required package



npm install --save @nestjs/typeorm typeorm pg
Enter fullscreen mode Exit fullscreen mode

Create a ormconfig.local.json at root of workspace (near package.json)
This file is read by TypeORM to connect to the database



{
  "type": "postgres",
  "host": "localhost",
  "port": 5432,
  "username": "_username_",
  "password": "_password_",
  "database": "kiwi",
  "entities": ["apps/api/**/*.entity.js"],
  "migrations": ["apps/api/src/migrations/*"],
  "cli": {
    "migrationsDir": "apps/api/src/migrations"
  }
}
Enter fullscreen mode Exit fullscreen mode

Update the apps/api/src/app/app.module.ts file



import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';

import { AppController } from './app.controller';
import { AppService } from './app.service';
import { pg } from 'pg'; // keep this, it force generatePackageJson to add `pg` in dependencies
import { getConnectionOptions } from 'typeorm';

@Module({
  imports: [
    TypeOrmModule.forRootAsync({
      useFactory: async () =>
        Object.assign(await getConnectionOptions(), {
          autoLoadEntities: true,
        }),
    }),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}
Enter fullscreen mode Exit fullscreen mode

You may be asking what is this import { pg } from 'pg'; for ? The answer will come as soon as we will start to build our project for production environment.

In order to create TypeORM migrations we will add some script helpers in the root package.json



{
  ...,
  scripts: {
    ...,
    "migration:create": "npx typeorm migration:create -f ormconfig.local",
    "migration:run": "ts-node --transpile-only ./node_modules/typeorm/cli.js migration:run -f ormconfig.local"
  },
  }
}
Enter fullscreen mode Exit fullscreen mode

We these scripts we can create a new migration



npm run migration:create -- -n CreateUserTable
Enter fullscreen mode Exit fullscreen mode

This will create a new file in apps/api/src/migrations



import {MigrationInterface, QueryRunner} from "typeorm";

export class CreateUserTable1626968757496 implements MigrationInterface {

    public async up(queryRunner: QueryRunner): Promise<void> {
        await queryRunner.query(`CREATE TABLE users(firstname varchar(128))`)
    }

    public async down(queryRunner: QueryRunner): Promise<void> {
    }

}
Enter fullscreen mode Exit fullscreen mode

Then we can run the migration



npm run migration:run
Enter fullscreen mode Exit fullscreen mode

The result is to get a database with 2 tables, the well-known migrations table used TypeORM and our users table.
image

Setup production environment

The production environment will run a Ubuntu-like distro and connect the server via SSH, let's start to install required packages on the remote server



sudo apt install pg nginx
sudo -u postgres psql

postgres=# CREATE USER _prod_username_ WITH PASSWORD '_prod_password_';
CREATE ROLE

postgres=# CREATE DATABASE kiwi;
CREATE DATABASE

postgres=# GRANT ALL PRIVILEGES ON DATABASE kiwi to _prod_username_;
GRANT
Enter fullscreen mode Exit fullscreen mode

Our database is up and running on the production environment. Now we will configure Nginx, start to create a folder architecture to host our build code



mkdir -p workspace/public_html
mkdir -p workspace/api
echo "Hello world" >> workspace/public_html/index.html
Enter fullscreen mode Exit fullscreen mode

Create a new Nginx config file



cd /etc/nginx
sudo touch sites-available/kiwi.example.com
Enter fullscreen mode Exit fullscreen mode

Put this content in kiwi.example.com



server {
    listen 443 ssl;
    listen [::]:443 ssl;
    root /home/john/workspace/public_html;
    index index.html index.htm index.php;
    server_name kiwi.example.com;
    gzip on;

    if ($scheme = http) {
        return 301 https://$host$request_uri;
    }

    location /api {
        proxy_pass http://localhost:3333;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        # try_files $uri $uri/ =404;
    }

    location / {
        try_files $uri $uri/ /index.html;
    }
    ssl_certificate /etc/letsencrypt/live/kiwi.example.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/kiwi.example.com/privkey.pem; # managed by Certbot

}

server {
    if ($host = kiwi.example.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

    listen 80;
    listen [::]:80;
    server_name kiwi.example.com;
    return 404; # managed by Certbot
}
Enter fullscreen mode Exit fullscreen mode

LetsEncrypt configuration is out-of-scope of this article, just be aware that all # managed by Certbot blocks have been wrote by installing and execute certbot tool which generate self-signed certificate

Then enable this new Nginx configuration



sudo ln -s sites-available/kiwi.example.com sites-enabled/kiwi.example.com
sudo systemctl reload nginx.service
Enter fullscreen mode Exit fullscreen mode

Now you can check your public website is up and running by visition https://kiwi.example.com and read the greating Hello world

Because our API is a NestJS app, we will need NodeJS to run our server. Install it with NVM (https://github.com/nvm-sh/nvm#install--update-script)



nvm install node
Enter fullscreen mode Exit fullscreen mode

Add a line at the end of you $HOME/.profile



PATH="$PATH:/home/john/.nvm/versions/node/v16.5.0/bin"
Enter fullscreen mode Exit fullscreen mode

Now we have NodeJS we can continue install and setup our API dependencies. Install the tool to run and monitor our API service



npm install -g pm2
Enter fullscreen mode Exit fullscreen mode

That's all, our production environment is ready to receive our build

Build & Deploy applications

Leave the production environment and go back to the local environment.

Starting with our API application, we need to build the NestJS code, add migration scripts the build, upload and run the build on the production environnment

Edit angular.json to add migration scripts to the build



{
  ...
  "projects": {
    "api": {
      ...
      "architect": {
        "build": {
          ...
          "options": {
            ...
            "assets": [
              "apps/api/src/assets",
              "apps/api/src/migrations"
            ]
          },
        }
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Create deploy.sh file in tools/



touch tools/deploy.sh
chmod +x tools/deploy.sh
Enter fullscreen mode Exit fullscreen mode

The content of deploy.sh



#!/bin/bash

SSH_HOST=john@kiwi.example.com
SSH_WORKDIR=workspace
SSH_BASEURL="${SSH_HOST}:${SSH_WORKDIR}"
SCRIPT_DIR=`dirname $(readlink -f $0)`
DIST_DIR="${SCRIPT_DIR}/../dist/apps"

project=$1

function buildApi {
  nx build api --generatePackageJson
}

function deployApi {
  sshUrl="${SSH_BASEURL}/api"
  scp -r ${DIST_DIR}/api/* ${SCRIPT_DIR}/../ormconfig.json $sshUrl
  ssh john@kiwi.example.com "
    . ~/.profile && \
    cd ${SSH_WORKDIR}/api && \
    npm install && \
    ts-node --transpile-only ./node_modules/typeorm/cli.js migration:run && \
    pm2 reload kiwi-api"
}

function buildKiwi {
  nx build kiwi
}

function deployKiwi {
  scp -r ${DIST_DIR}/kiwi/* "${SSH_BASEURL}/public_html"
}

case $project in
  api)
    buildApi
    deployApi
  ;;

  kiwi)
    buildKiwi
    deployKiwi
  ;;

  all)
    buildApi
    deployApi
    buildKiwi
    deployKiwi
  ;;
esac
Enter fullscreen mode Exit fullscreen mode

You can see the --generatePackageJson argument on the API build process. This argument asks NX to generate a package.json file in the dist directory. This package.json will contains all project dependencies that will be required on the production environment. Do you remember the import { pg } from 'pg'; we added in app.module.ts, this line is here to force NX to add PostgreSQL has a dependency in this generated package.json because TypeORM does not expose this dependency.

Add some script helpers to package.json



{
  ...,
  scripts: {
    ...,
    "deploy:api": "./tools/deploy.sh api",
    "deploy:kiwi": "./tools/deploy.sh kiwi",
    "deploy:all": "./tools/deploy.sh all",
    "migration:create": "npx typeorm migration:create -f ormconfig.local",
    "migration:run": "ts-node --project tsconfig.base.json -O '{\"module\": \"commonjs\", \"experimentalDecorators\": true}' -r tsconfig-paths/register ./node_modules/typeorm/cli.js migration:run -f ormconfig.local"
  },
  }
}
Enter fullscreen mode Exit fullscreen mode

Copy/paste ormconfig.local.json to ormconfig.json edit ormconfig.json to this content



{
  "type": "postgres",
  "host": "localhost",
  "port": 5432,
  "username": "_prod_username_",
  "password": "_prod_password_",
  "database": "kiwi",
  "entities": ["./**/*.entity.js"],
  "migrations": ["./migrations/*"],
  "cli": {
    "migrationsDir": "apps/api/src/migrations"
  }
}
Enter fullscreen mode Exit fullscreen mode

We are now ready to deploy our apps !



npm run deploy:all
Enter fullscreen mode Exit fullscreen mode

This command will build the NestJS app, add migrations files to the build, upload the build on the production environment, run the migration on the production environment, reload the API application. Then it will build the Angular app, upload the build on the production environment.

Top comments (4)

Collapse
 
aliweb profile image
AliWeb • • Edited

When I click site.example.com to see the 'hello world' text, all I see is:

This site can’t be reached
Check if there is a typo in site.example.com.

and status of failed and sometimes canceled.

Any help from you and/or the community would be highly appreciated.

Collapse
 
cdnfs profile image
CodingSpiderFox •

Thanks for the article :) Could you please upload the full code to Github?

Collapse
 
aliweb profile image
AliWeb • • Edited

I am trying to deploy it to an unmanaged VPS with ubuntu 18.04 operating system and Webuzo cpanel preinstalled.

Collapse
 
aliweb profile image
AliWeb •

I exactly followed as you have done but I am stuck at the middle.

Read next

brandontroberts profile image

Announcing NgRx 19: NgRx Signals Features, Action Signals, and more!

Brandon Roberts -

ninjasoards profile image

Setup PostgreSQL w/ pgvector in a docker container

David Y Soards -

jeremycmorgan profile image

How to Make a Retro 2D JavaScript Game Part 1

Jeremy Morgan -

itsizakb profile image

Adding new columns - lowCalAlt_update5

Kazi Priom -