Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
July 30, 2021 07:48 am GMT

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

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

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

Launch our service

sudo docker-compose up -d

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

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"  }}

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 dependenciesimport { getConnectionOptions } from 'typeorm';@Module({  imports: [    TypeOrmModule.forRootAsync({      useFactory: async () =>        Object.assign(await getConnectionOptions(), {          autoLoadEntities: true,        }),    }),  ],  controllers: [AppController],  providers: [AppService],})export class AppModule {}

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"  },  }}

We these scripts we can create a new migration

npm run migration:create -- -n CreateUserTable

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> {    }}

Then we can run the migration

npm run migration:run

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 nginxsudo -u postgres psqlpostgres=# CREATE USER _prod_username_ WITH PASSWORD '_prod_password_';CREATE ROLEpostgres=# CREATE DATABASE kiwi;CREATE DATABASEpostgres=# GRANT ALL PRIVILEGES ON DATABASE kiwi to _prod_username_;GRANT

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_htmlmkdir -p workspace/apiecho "Hello world" >> workspace/public_html/index.html

Create a new Nginx config file

cd /etc/nginxsudo touch sites-available/kiwi.example.com

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}

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.comsudo systemctl reload nginx.service

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

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

PATH="$PATH:/home/john/.nvm/versions/node/v16.5.0/bin"

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

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"            ]          },        }      }    }  }}

Create deploy.sh file in tools/

touch tools/deploy.shchmod +x tools/deploy.sh

The content of deploy.sh

#!/bin/bashSSH_HOST=[email protected]SSH_WORKDIR=workspaceSSH_BASEURL="${SSH_HOST}:${SSH_WORKDIR}"SCRIPT_DIR=`dirname $(readlink -f $0)`DIST_DIR="${SCRIPT_DIR}/../dist/apps"project=$1function buildApi {  nx build api --generatePackageJson}function deployApi {  sshUrl="${SSH_BASEURL}/api"  scp -r ${DIST_DIR}/api/* ${SCRIPT_DIR}/../ormconfig.json $sshUrl  ssh [email protected] "    . ~/.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

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:immo": "./tools/deploy.sh immo",    "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"  },  }}

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"  }}

We are now ready to deploy our apps !

npm run deploy:all

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.


Original Link: https://dev.to/clement/nestjs-postgresql-angular-within-nx-workspace-from-scratch-to-production-2im8

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To