You might also be interested in this: Create Docker images and upload them to Dockerhub

Set up a VPS with Hetzner

Hetzner often offers referral links with credit benefits for new customers. Of course, you can also use other providers, but Hetzner is attractively priced and offers solid services.

What is a VPS?

A Virtual Private Server (VPS) is a virtual server that is operated on a physical machine and acts as an independent server. It offers more control than classic shared hosting and is a cost-effective alternative to dedicated servers. Access is usually via SSH (Secure Shell), which allows us to control the server via the command line.

SSH access to the VPS

Once a VPS has been created, it is usually managed via a secure shell (SSH). SSH is a protocol that enables encrypted connections to remote servers. The following command is used to connect to the server:

ssh root@<IP-Server>

If an SSH key has been stored, authentication can be carried out using public key authentication, which is more secure than a password.

Create a server at Hetzner

1. After logging into the Hetzner Cloud, we navigate to “Projects” and create a new project.
2. Select “Add server” and can configure an instance.
3. The cheapest model is often sufficient to start with. However, I recommend activating the option for an IPv4 address, as purely IPv6-based setups often cause compatibility problems.

Setting up a domain

To access the application later under your own domain, you must register a domain and link it to the server.

Apply for a domain at Hetzner

1. Register a new domain or add an existing domain in the Hetzner ConsoleH.
2. To manage DNS entries, we need to activate DNS access.

Set name servers

The following name servers should be used:

helium.ns.hetzner.de. 
hydrogen.ns.hetzner.com. 
oxygen.ns.hetzner.com.

These new name servers offer better performance and flexibility compared to the old Hetzner name servers:

ns1.first-ns.de.
robotns2.second-ns.de.
robotns3.second-ns.com.

However, both nameserver variants are possible! The DNS changes take some time. However, we can use tools such as MXToolbox to check whether the changes have already taken place.

Connect the domain to the server

Now the IP address of the server must be linked to the domain:

1. Switch to DNS zones in the Hetzner Cloud.
2. Select the registered domain.
3. Create a new A-Record and enter the IPv4 address of the server.
4. If available, remove the IPv6 record (AAAA) to avoid compatibility problems.

You can also use MXToolbox to check whether the DNS changes have already been applied.

Set up Kubernetes

Kubernetes is a powerful orchestration tool for containers. I use k3s, a lean Kubernetes variant that is particularly suitable for smaller environments.

Install K3s on the server

Connect to the server via SSH and install k3s with the following command:

curl -sfL https://get.k3s.io | sh - 

The script installs k3s and starts the Kubernetes service. After installation, k3s can be checked with the following command:

kubectl get nodes

k3s comes with its own kubectl version, so that no separate installation is necessary.

Create YAML files for FE, BE, MySQL and Redis

To deploy our application, we need YAML files for:

• Frontend (Angular)
• Backend (NestJS)
• Database (MySQL)
• Session-Management (Redis)

A deployment file for the backend could look like this:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: backend
spec:
  replicas: 1
  selector:
    matchLabels:
      app: backend
  template:
    metadata:
      labels:
        app: backend
    spec:
      containers:
        - name: backend
          image: dockerhub-user/backend:latest
          ports:
            - containerPort: 3000
---
apiVersion: v1
kind: Service
metadata:
  name: backend-service
spec:
  selector:
    app: backend
  ports:
    - protocol: TCP
      port: 80
      targetPort: 3000
  type: ClusterIP

What are deployments and services?

• Deployments manage the provision and scaling of containers.
• Services ensure a stable network connection between containers.
• ClusterIP means that the service is only accessible within the Kubernetes cluster.

Set up Caddy as a reverse proxy

A reverse proxy is required to ensure that incoming traffic is distributed correctly. K3s comes with Traefik by default, but I opted for a simpler solution: Caddy. I was really surprised how little guidance or documentation there is on Caddy in combination with Kubernetes.

Why Kubernetes with Caddy?

• Automatic Let’s Encrypt SSL certificates
• Simple configuration via Caddyfile
• Built-in load balancer

Remove Traefik

kubectl delete helmrelease traefik -n kube-system

Create Caddy Deployment

apiVersion: apps/v1
kind: Deployment
metadata:
  name: caddy
spec:
  replicas: 1
  selector:
    matchLabels:
      app: caddy
  template:
    metadata:
      labels:
        app: caddy
    spec:
      containers:
        - name: caddy
          image: caddy
          volumeMounts:
            - name: caddy-config
              mountPath: /etc/caddy/Caddyfile
      volumes:
        - name: caddy-config
          configMap:
            name: caddy-config
---
apiVersion: v1
kind: ConfigMap
metadata:
  name: caddy-config
data:
  Caddyfile: |

    example.com {
        reverse_proxy backend-service:3000
    }

---
apiVersion: v1
kind: Service
metadata:
  name: caddy-service
spec:
  type: LoadBalancer
  selector:
    app: caddy
  ports:
    - port: 80
      targetPort: 80
    - port: 443
      targetPort: 443

Important: Since Let’s Encrypt has a rate limit, tests should first be carried out with staging certificates!

Conclusion

After these steps, the application is now running in a Kubernetes cluster on a Hetzner VPS and can be accessed via its own domain. The next step would be to set up an automatic CI/CD pipeline to deploy new versions without manual effort.

The post Deployment of a WebApp with Kubernetes and Caddy appeared first on Nerd Corner.

You might also be interested in this: Hosting NestJS on Vercel

Creation of the Docker Compose Yml

With Docker Compose, all components of an application can be defined via a single configuration file and built or started together.

version: '3.8'

services:
  frontend:
    build: ./frontend
    ports:
      - "80:80"
    depends_on:
      - backend

  backend:
    build: ./backend
    ports:
      - "3000:3000"
    depends_on:
      - mysql
      - redis
    environment:
      - DATABASE_URL=mysql://user:password@mysql:3306/db
      - SESSION_STORE=redis://redis:6379

  mysql:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: db
    ports:
      - "3306:3306"

  redis:
    image: redis:latest
    ports:
      - "6379:6379"

Creating the env file

To manage environment variables centrally, we create an .env file:

DATABASE_URL=mysql://user:password@mysql:3306/db 
SESSION_STORE=redis://redis:6379

Important: All ENV variables used in the code must also appear in docker-compose.yml!

Docker image for the frontend

The Angular frontend must be built for production. Here is an example Dockerfile:

FROM node:20 AS build
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build --prod

FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf

Since we are dependent on nginx for the build, we also need a corresponding config file:

server {
  listen 80;
  server_name _;

  location / {
    root /usr/share/nginx/html;
    index index.html;
    try_files $uri $uri/ /index.html;
  }
}

Docker image for the backend

The NestJS backend also needs to be built. Here is an optimized Dockerfile.

# Build stage
FROM node:20 AS build
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build

# Production stage
FROM node:20-alpine
WORKDIR /app

COPY --from=build /app/dist ./dist
COPY package.json package-lock.json ./
RUN npm install --only=production
CMD ["node", "dist/main.js"]

Building the app with Docker Compose

Once all the Dockerfiles have been configured, the images can now be built. The whole thing is really easy with Docker compose.

docker compose up -d --build

The images are then ready, the containers are built and the app can be tested locally! The last step is to upload the images to DockerHub so that they can be used more easily later for deployment on a server.

Uploading to Docker Hub

Uploading is explained step by step below:

1. Create an account on Dockerhub
2. Create a repository for the frontend and backend (1 private repo is currently free)
3. Build the images and tag them:

   docker tag <image-id> dockerAccountName/frontend:latest
   docker tag <image-id> dockerAccountName/backend:latest

4. Sign up and push the images:

   docker login
   docker push dockerAccountName/frontend:latest
   docker push dockerAccountName/backend:latest

Outlook: Deployment with Kubernetes

Now that the images are on Docker Hub, nothing stands in the way of deployment. I have opted for a Kubernetes cluster on a Hetzner VPS. More information here.

The post Create Docker images and upload them to Docker Hub appeared first on Nerd Corner.

This might also be interesting for you: Adding Swagger to Node Server

Step 1: Setting Up NestJS Vercel hosting

First things first, getting the basic setup to deploy on Vercel. Vercel is awesome for serverless, but working with NestJS needed a few tweaks. The main thing is to set up a vercel.json configuration file, which tells Vercel exactly how to handle your app.

Here’s the configuration I ended up with:

{
  "version": 2,
  "builds": [
    {
      "src": "src/main.ts",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "src/main.ts",
      "methods": [
        "GET",
        "POST",
        "PUT",
        "PATCH",
        "OPTIONS",
        "DELETE",
        "HEAD",
        "CONNECT",
        "TRACE"
      ]
    }
  ]
}

I deployed it to Vercel and got the following error:

This Serverless Function has crashed. Your connection is working correctly. 
Vercel is working correctly. 500: INTERNAL_SERVER_ERROR 
Code: FUNCTION_INVOCATION_FAILED ID: bom1::sgk4v-1711014022883-1e9ed54f4c37

Looking in the logs, I noticed the database connection was an issue and in addition got the following log message:

No exports found in module "/var/task/app-name/src/main.js".
Did you forget to export a function or a server?

Turned out I could ignore the second part of the error message and just focus on the database connection.

Step 2: Configuring the Database

For my app, I used a mysql database with multiple schemas. I tried several free offers, but they were not compatible with the multiple schemas approach. Therefore I ended up with hosting it on Google Cloud. I scaled it down to a price of 0.01$ per hour and used the 300$ newbie offer.

Allowing Vercel to connect required setting the IP to 0.0.0.0/0 in Google Cloud’s configuration, making the database accessible from any IP address. Important note: make sure you test locally before deploying to Vercel, or you’ll be dealing with errors like these:

Step 3: Dealing with CORS

CORS caused also some headaches. Make sure you allow OPTIONS for CORS preflight requests, as Vercel needed explicit permission for cross-origin requests. I ended up adding a lot of headers to make sure requests were allowed:

app.enableCors({
    origin: 'domain-name',
    credentials: true,
    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS',
    allowedHeaders: [
      'Origin',
      'X-Requested-With',
      'Content-Type',
      'Accept',
      'Authorization',
    ],
  });

Step 4: Switching to express-session and Redis for Session Management

One of the trickiest parts was getting sessions to work. I started with the cookie-session library, but Vercel completely ignore it. After digging into the docs and some trial and error, I switched to express-session, which is more popular and works nicer with Vercel’s serverless environment.

For some reason the import syntax has to be exactly like this:

import session = require('express-session');

I also had to configure the session middleware with trust proxy enabled, since Vercel proxies requests. Here’s what the final setup looked like:

const expressApp = app.getHttpAdapter().getInstance();
expressApp.set('trust proxy', true);

Also setting secure: true and sameSite: 'none' was essential to ensure cookies work across HTTPS and cross-origin requests!

Keep in mind, with Vercel, multiple serverless instances can handle requests simultaneously, which caused session conflicts. To fix this, I connected my session storage to a Redis instance. Luckily this was super easy.

Redis keeps session data consistent, avoiding conflicts across requests, especially under load. The code I ended up with:

const expressApp = app.getHttpAdapter().getInstance();
expressApp.set('trust proxy', true);

const redisClient = createClient({
    password: process.env.REDIS_PASSWORD,
    socket: {
      host: process.env.REDIS_HOST,
      port: parseInt(process.env.REDIS_PORT, 10),
    },
  });

  redisClient
    .connect()
    .catch((err) =>
      console.log('Could not establish a connection with Redis: ' + err),
    );

  redisClient.on('error', (err) => console.log('Redis error: ' + err));
  redisClient.on('connect', () =>
    console.log('Connected to Redis successfully'),
  );

  app.use(
    session({
      store: new RedisStore({ client: redisClient }),
      secret: process.env.COOKIE_SECRET,
      cookie: {
        secure: process.env.NODE_ENV !== 'development',
        sameSite: process.env.NODE_ENV === 'development' ? 'lax' : 'none',
        maxAge: 86400000,
      },
    }),
  );

Step 5: Add withCredentials in the Frontend

This step is just a side note: For session cookies to work between the frontend and backend, withCredentials need to be set to true on my frontend’s HTTP requests. This allows cookies to be included in cross-origin requests, which is important when the frontend and backend are hosted separately. I had to make sure Angular’s HTTP client had this setting enabled.

Step 6: Include font

To include font files in your NestJS project, you can use the compilerOptions in the nest-cli.json file to define assets for build output, like specifying "include": "**/*.ttf" and "outDir": "dist/src".

{
  "$schema": "https://json.schemastore.org/nest-cli",
  "collection": "@nestjs/schematics",
  "sourceRoot": "src",
  "compilerOptions": {
    "assets": [
      {
        "include": "**/*.ttf",
        "outDir": "dist/src"
      }
    ],
    "deleteOutDir": true
  }
}

After the build, ensure the fonts are correctly referenced in your code using path.resolve, e.g., path.resolve(__dirname, '../fonts/Roboto-Regular.ttf'). This approach ensures the font files are bundled with the build and accessible during runtime.

Final Thoughts to NestJS Vercel hosting

Deploying my NestJS app on Vercel was a true roller coaster. Sometimes, I felt like I was on the verge of getting everything working perfectly, only to be hit with new errors that sent me back to troubleshooting mode. There were moments of frustration—especially around the session handling and CORS issues. But each solution brought a new high, and every error fixed felt like a little victory.

Now, with everything finally working smoothly, I can say it feels awesome. Seeing my app live and functioning the way I envisioned is worth all the headaches. It’s a huge relief, but even more, it’s deeply satisfying to know I’ve overcome each hurdle and can look back on what I learned. I hope this guide can save others some of those low points and help them reach that “it just works” moment a little faster!

The post Lessons Learned: Hosting NestJS App on Vercel appeared first on Nerd Corner.

Also, the focus should always be on clean code and it should be properly documented. Especially when a project gets bigger, proper documented work pays off. For example, to document REST endpoints it is recommended to use Swagger. The Swagger API documentation provides an overview of all endpoints and even the possibility to interact with them.

This might also be interesting for you: Angular Form with clickable SVG

List of components

• IDE (for example VS Code)
• Node.js

Documentation with swagger

Although Swagger is quite well known, I could not find a detailed implementation guide. Therefore I would like to explain 2 ways to implement Swagger in an existing node server. The first way is to add Swagger parameters directly to each endpoint. This is probably the faster variant, but can get messy depending on the number of endpoints. The second option is to create a “swagger.json” file that summarizes the parameters of the endpoints.

To use Swagger the following library and its type extension will be needed:

npm install --save  swagger-ui-express
npm install --save-dev @types/swagger-ui-express

Swagger creates documentation of the endpoints:

These can be opened and you can see an example request and an example response:

The “Try it out” button can be used to interact directly with the endpoint.

Swagger API documentation with params

This variant is more recommended for smaller projects. First, these two Swagger libraries must be integrated into the project:

npm install --save-dev @types/swagger-jsdoc 
npm install --save swagger-jsdoc

The libraries are configured in app.ts or for non Typescript users app.js. Due to the configuration set here, the documentation is located in “/api-docs”:

import express from "express";
import bodyParser from "body-parser";
import exampleRoutes from "./routes/example-route";
import swaggerJSDoc from "swagger-jsdoc";
import swaggerUi from "swagger-ui-express";

const app = express();

const options = {
  definition: {
    openapi: "3.0.1",
    info: {
      title: "REST API for Swagger Documentation",
      version: "1.0.0",
    },
    schemes: ["http", "https"],
    servers: [{ url: "http://localhost:3000/" }],
  },
  apis: [
    `${__dirname}/routes/example-route.ts`,
    "./dist/routes/example-route.js",
  ],
};

const swaggerSpec = swaggerJSDoc(options);

app.use("/api-docs", swaggerUi.serve, swaggerUi.setup(swaggerSpec));
app.use(bodyParser.json());
app.use(exampleRoutes);

app.listen(3000);

The endpoint is described with the parameters as follows:

import { Router } from "express";
import { exampleFunction } from "../controller/example";

const router = Router();

/**
 * @swagger
 * /example:
 *      post:
 *          summary: Send the text to the server
 *          tags:
 *              - ExampleEndpoints
 *          description: Send a message to the server and get a response added to the original text.
 *          requestBody:
 *              required: true
 *              content:
 *                  application/json:
 *                      schema:
 *                          type: object
 *                          properties:
 *                              responseText:
 *                                  type: string
 *                                  example: This is some example string! This is an endpoint
 *          responses:
 *              201:
 *                  description: Success
 *                  content:
 *                      application/json:
 *                          schema:
 *                              type: object
 *                              properties:
 *                                  text:
 *                                      type: string
 *                                      example: This is some example string!
 *              404:
 *                  description: Not found
 *              500:
 *                  description: Internal server error
 */
router.post("/example", exampleFunction);

export default router;

Swagger API documentation with swagger.json

To have a better overview and not to mix the documentation with the actual code, it is recommended to use one, or even more json files. When using TypeScript, the Swagger.json file must be placed in the rootDirectory:

Again, the configuration is first defined in app.ts or, for non-Typescript users, in app.js. The domain path “/api-docs” is also selected here for the documentation:

import express from "express";
import bodyParser from "body-parser";
import exampleRoutes from "./routes/example-route";
import swaggerUi from "swagger-ui-express";

import * as swaggerDocument from "./swagger.json";

const app = express();

app.use("/api-docs", swaggerUi.serve, swaggerUi.setup(swaggerDocument));

app.use(bodyParser.json());

app.use(exampleRoutes);

app.listen(3000);

Important note: To import JSON files into a Typescript project this must be allowed in tsconfig.json. Also, the JSON file must be located in the root directory.

{
  "compilerOptions": {
    "target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
    "module": "commonjs" /* Specify what module code is generated. */,
    "rootDir": "./src" /* Specify the root folder within your source files. */,
    "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
    "resolveJsonModule": true /* Enable importing .json files. */,
    "outDir": "./dist" /* Specify an output folder for all emitted files. */,
    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
    "strict": true /* Enable all strict type-checking options. */,
    "skipLibCheck": true /* Skip type checking all .d.ts files. */
  }
}

The previous Swagger documentation with parameters would thus look like this in swagger.json:

{
  "openapi": "3.0.1",
  "info": {
    "title": "REST API for Swagger Documentation",
    "version": "1.0.0"
  },
  "schemes": ["http"],
  "servers": [{ "url": "http://localhost:3000/" }],
  "paths": {
    "/example": {
      "post": {
        "tags": ["ExampleEndpoints"],
        "summary": "Send a text to the server",
        "description": "Send a message to the server and get a response added to the original text.",
        "requestBody": {
          "required": true,
          "content": {
            "application/json": {
              "schema": {
                "$ref": "#/components/schemas/ExampleSchemaHeader"
              }
            }
          }
        },
        "responses": {
          "201": {
            "description": "Success",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/ExampleSchemaBody"
                }
              }
            }
          },
          "404": { "description": "Not found" },
          "500": { "description": "Internal server error" }
        }
      }
    }
  },
  "components": {
    "schemas": {
      "ExampleSchemaBody": {
        "properties": {
          "responseText": {
            "type": "string",
            "example": "This is some example string! This is an endpoint"
          }
        }
      },
      "ExampleSchemaHeader": {
        "required": ["text"],
        "properties": {
          "text": {
            "type": "string",
            "example": "This is some example string!"
          }
        }
      }
    }
  }
}

Download files

• Github example projcet for swagger params
• Github example project for swagger.json

The post Import Swagger in Node TypeScript Project appeared first on Nerd Corner.

This might also be interesting for you: How to build an Angular PUSH architecture.

List of components

• Development environment (e.g. VS Code)
• Angular CLI
• SVG File

Creation of an office plan

I would almost say that creating the office plan was the hardest part of the task. The office plan can be created in different ways. The important thing is it has to be an SVG file. I used Adobe Xd and worked with lines, rectangles and circles. The result could be prettier, but it is enough to demonstrate the functionality. You can use my plan or create your own.

After the SVG image is created, the areas that represent a workspace need to be grouped together. I assigned the class “seat” to the group. It looks like this:

<g class="seat" >
    <g id="table-0" transform="translate(19 59)">
      <rect width="66" height="35" stroke="none" />
      <rect x="2.5" y="2.5" width="61" height="30" fill="none" />
    </g>
    <g id="screen-0" transform="translate(31 84)">
      <rect id="fill" width="42" height="4" stroke="none" />
      <path
        d="M0,1.5h42M39.5,0v4M42,2.5h-42M2.5,4v-4"
        fill="none"
        clip-path="url(#clip)"
      />
    </g>
    <g id="chair-0" transform="translate(40 30)">
      <ellipse cx="12.5" cy="11" rx="12.5" ry="11" stroke="none" />
      <ellipse cx="12.5" cy="11" rx="10" ry="8.5" fill="none" />
    </g>
  </g>

The code snippet shown corresponds to a workstation, such as the one in the red circle here:

Creation of the Angular Reactive Form

To include the office plan in a reactive form, we create a new Angular project. I took inspiration for the project from the German YouTuber Unleashed Design: https://www.youtube.com/watch?v=NOuVxP7FxBc. In general, I can highly recommend his videos! You always learn new tips and tricks, especially when dealing with Angular.

We need the ReactiveFormsModule for the Reactive Angular Form SVG. Then we create a FormGroup and FormControl fields. I have named the FormGroup reservationForm. It contains a field for the name, a field for the weekday and a field for the place you want to book.

public reservationForm: FormGroup = new FormGroup({
    name: new FormControl('', [Validators.required], []),

    weekday: new FormControl('', [Validators.required], []),

    seat: new FormControl('', [Validators.required], []),
  });

To be able to display the form some html code is necessary:

<form [formGroup]="reservationForm">
  <label for="name"> Your name:</label>
  <input id="name" type="text" formControlName="name" placeholder="Name" />

  <label for="weekday"> Enter the reservation day:</label>
  <input
    id="weekday"
    type="text"
    formControlName="weekday"
    placeholder="Monday"
  />
</form>

For a better demonstration, it makes sense to also display the value of the form:

<p>Values: {{ reservationForm.value | json }}</p>
<p>Form valid: {{ reservationForm.valid }}</p>

Making Seats Component for the Custom Angular Reactive SVG Form

To build a custom form field, the first thing we need is a new component. Here we can directly use a tip from Unleashed Design. Angular offers the possibility to include SVG images as templateUrl. We delete the seats.component.html and replace it with our SVG office plan named seats.component.svg. In the seats.component.ts we can replace the templateUrl with the SVG file:

selector: 'app-seats',
templateUrl: './seats.component.svg',
styleUrls: ['./seats.component.sass'],

The custom form field can now be included in the reactive form:

<app-seats id="seat" formControlName="seat"></app-seats>

In the Sass file, the SVG office plan can be customized as desired. Colors, line thicknesses, and much more can be set here. I have customized it so that the office plan turns red when the SVG form field is invalidated:

$successColour: #19e619

:host
    &.ng-touched, &.ng-dirty
            &.ng-invalid
                svg
                    .wall, .seat
                        stroke: red

    svg
        margin: 25px 0 25px 0
        
        .wall
            stroke: black
            fill: #fff 
            stroke-width: 5
        .separators
            stroke: black
            fill: none
            stroke-width: 5
        .separate-room
            stroke: black
            fill: none
            stroke-width: 5

        .seat
            stroke: grey
            cursor: pointer
            fill: #fff 
            transition: all 250ms
            stroke-width: 4
            &.selected
                fill: $successColour
                stroke-width: 1

Adding the ControlValueAccessor

We can already see our office plan in the Reactive Form, but it is still without functionality. To change that a ControlValueAccessor is needed. The ControlValueAccessor serves as an interface for a custom form control that integrates with Angular forms. The ControlValueAccessor asks for these four methods:

interface ControlValueAccessor {
  writeValue(obj: any): void
  registerOnChange(fn: any): void
  registerOnTouched(fn: any): void
  setDisabledState(isDisabled: boolean)?: void
}

More information about the ControlValueAccessor can be found in the doc: https://angular.io/api/forms/ControlValueAccessor

In order for the seats.component.ts component to get access to the VALUE_ACCESSOR we need to configure the following provider:

providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => SeatsComponent),
      multi: true,
    },
  ],

Variables and methods for the Angular Forms ControlValueAccessor

The next step looks more complicated than it actually is. Basically, these are fixed variables and methods that every custom form field needs.

Every custom reactive form needs the following variables. The variable onTouched, in order for the form field to become touched later. Also onChange and the static variable touched as a boolean to know if the form field is already touched. A form field can also be disabled, so the static variable isDisabled is also required as a boolean. Of course every custom form also uses a value.

public onTouched = () => {};
public onChange = (value: string) => {};
public touched: boolean = false;
public isDisabled: boolean = false;
public value: string = '';

Every Custom Reactive Form also needs the possibility to change these variables. This is where the ControlValueAccessor methods discussed in the previous section come into play. One is the writeValue function, which sets the value variable to a new value. The markAsTouched function calls onTouched and sets the variable touched to true if the custom form field has not been clicked before. Finally, the two methods registerOnChange and registerOnTouched are needed. Both actually only update their respective value. The registerOnChange function updates the value onChange and registerOnTouched updates the value onTouched. The reactiveFormModule can also disable entire forms. To ensure that the custom reactive form field also listens to this, the setDisabledState method is used. With this method the variable isDisabled can be changed.

writeValue(value: string): void {
  this.value = value;
}
markAsTouched(): void {
  if (!this.touched) {
    this.onTouched();
    this.touched = true;
  }
}
registerOnChange(onChange: any): void {
  this.onChange = onChange;
}
registerOnTouched(onTouched: any): void {
  this.onTouched = onTouched;
}

setDisabledState(isDisabled: boolean): void {
  this.isDisabled = isDisabled;
}

Bind SVG groups to the form variables

In order for the SVG office plan to be functionally usable, we still need the possibility to select individual workstations. For this we use the Angular binding possibilities. A function isSelected() is required to detect and change the sytling of the workstation.

[class.selected]="isSelected('seat-0')"
(click)="select('seat-0')"

Also a function select(), which recognizes the selected seat of the Custom Angular Reactive SVG Form by the name (“seat-1”, “seat-2″…). Within this select() function it is first checked if the form is disabled in general. If this is not the case, a second query checks if the seat has already been selected. If this is the case the value becomes nothing, otherwise the value becomes the name of the seat, for example “seat-3”.

public select(option: string): void {
  if (!this.isDisabled) {
    if (this.isSelected(option)) {
      this.value = '';
    } else {
      this.value = option;
    }
    this.onChange(this.value);
    this.markAsTouched();
  }
}

public isSelected(option: string): boolean {
  return option === this.value;
}

Download files

• Project on Github

The post How to build a Custom Angular Reactive SVG Form with clickable elements appeared first on Nerd Corner.

Angular itself regularly checks the view model for changes. If the view model changes due to a state change, Angular re-renders the view because Angular automatically adjusts the UI when the model changes. These continuous observations make the whole application slower.

Moreover, with the traditional pull approach, complexity increases. Especially when multiple views need the same data. What happens when the data changes? How are views notified that new data is available? Callback functions could help, but as a result, the application quickly becomes confusing. They also have a negative impact on handling and maintenance, especially for larger applications. After all, the objects have to be initialized individually and the dependencies or the order of the methods have to be considered.

A push-based architecture can be used to avoid this problem. Angular offers a great way to implement this with RxJS and the facades design pattern! The implementation is explained using an Angular example in this blog article and is transferable for all platforms and frameworks (Angular, React, Vue.js, etc.).

List of components

• IDE (Visual Studio Code)
• Angular CLI

What is a facade actually?

The facade design pattern is a central interface that communicates with various interfaces of one or more lower-level subsystems. It can perform additional functions both before and after a client request.

The facade object provides a unified and usually simplified interface to one or more subsystems. As an intermediary, it ensures that communication or access to the individual components of a subsystem is simplified, thereby also minimizing direct dependence on these components. It delegates the client calls in such a way that clients need to know neither the classes nor their relations and dependencies.

This is especially helpful in large systems when a subsystem contains many technically oriented classes that are rarely used externally. Using a facade reduces complexity by combining multiple interfaces into one. In addition, the subsystem can be extended more easily due to the loose coupling.

The PUSH Architecture

For a push based architecture, advanced design patterns like Redux or NgRx can be used. However, a very elegant and performant push based solution can also be achieved using RxJS.

Using the long-living RxJS Observable streams, changes in the data can be pushed to all subscribers. To do so, the views subscribe to the desired data stream. If the data changes, the changes are pushed directly to all subscribers via the stream without blocking the UI thread.

In this way, direct data access is prevented and the data is read-only. The actual data source is accessed similar to an API used by the views. The facade described at the beginning serves as the central interface here. This consists of streams that provide data when the data changes and methods to request changes to the data or request specific user-defined streams.

The actual raw data is only available after it has been pushed through the stream(s). This shielding centralizes all logic and forces views to passively respond to incoming data. With the push based services, Angular View components become highly performant using both ChangeDetectionStrategy.OnPush, and the async pipe for the delivered stream data.

Therefore, the system is lazy loading. The UI framework does not need to check for state changes of the view model and instead lazily waits for a new state to be pushed.

Practical example

As an example for a push based architecture a simple application is used, which receives a random beer type via the HTTP request https://random-data-api.com/api/beer/random_beer?size=1. The type of beer is displayed in a view. An input field can be used to vary the number of beers to be shown. A facade as a central element automatically pushes the new beers to the view as soon as they are available.

As a basis for the design pattern serves the article by Thomas Burleson: https://thomasburlesonia.medium.com/push-based-architectures-with-rxjs-81b327d7c32d

The first step is to set up the state management:

export interface Beer {
  brand: string;
  name: string;
  style: string;
  hop: string;
  alcohol: string;
}

export interface BeerState {
  beerArray: Beer[];
  size: number;
}

Next, we initialize the values of the facade’s state management:

export interface BeerState {
  beerArray: Beer[];
  size: number;
}

let _state: BeerState = {
  beerArray: [],
  size: 4
};

The facade uses RxJS streams to push data directly to the views. These streams can also automatically execute a Rest API call when the states change:

combineLatest(this.size$)
      .pipe(
        //switchMap: Maps values to observable. Cancels the previous inner observable.
        switchMap(([size]) => {
          return this.findBeerArray(size);
        })
      )
      .subscribe((beerArray) => {
        this.updateState({ ..._state, beerArray });
      });

Streams are set up to be persistent and only become active when data changes:

export class BeerFacade {

  beerArray$ = this.state$.pipe(
    map((state) => state.beerArray),
    distinctUntilChanged()
  );

  size$ = this.state$.pipe(
    map((state) => state.size),
    distinctUntilChanged()
  );

  private updateState(state: BeerState) {
    this.store.next((_state = state));
  }
}

For better management, the streams are combined into a single one:

vm$: Observable<BeerState> = combineLatest(this.beerArray$, this.size$).pipe(
    map(([beerArray, size]) => {
      return { beerArray, size };
    })
  );

The HTTP request can be outsourced to a separate data service. However, since this is only a small sample program, the Rest API call is implemented and executed within the Facade:

/** RandomBeer REST call */
  private findBeerArray(size: number): Observable<Beer[]> {
    const url = `https://random-data-api.com/api/beer/random_beer?size=${size}`;
    return this.http.get<Beer[]>(url);
  }

The facade and view model stream can now be easily initialized and used. Incredibly less code is required:

export class AppComponent {
  vm$: Observable<BeerState> = this.facadeService.vm$;

  //facadeService is public for direct usage in html
  constructor(public facadeService: RandomBeerFacadeService) {} 
  title = 'RandomBeerApp';
}

The view model stream data is displayed with the following code snippet:

<div *ngIf="vm$ | async as vm">  
  <ul>
    <li id="random-beer-list" *ngFor="let u of vm.beerArray">
      Brand: {{ u.brand }}, Alcohol: {{ u.alcohol }}, Hop: {{ u.hop }}
    </li>
  </ul>
  <input id="input-rand-beer" type="number" (change)="facadeService.updateSize($event)" />
</div>

Angular’s Async Pipe ensures that the most current data is always displayed. Here is a detailed explanation of the async pipe.

Since the facade service is declared as public, the inputs are passed directly to the updateSize function of the facade:

updateSize(selectedSize: any) {
    const size = selectedSize.target.value;
    this.updateState({ ..._state, size });
  }

As a result, the application initially displays 4 random beers. Afterwards the number can be increased to 7 by the input field. This calls the updateSize() function, which updates the state of the size$ stream using updateState(). As a result, a new REST call is automatically executed and the result is pushed to the view model. With the help of the async pipe the latest data is displayed. In our case the 7 random beer types.

Finally, it makes sense to test the functionality of the individual facade components:

it('should get individual Observable "stream" of vm data', (done) => {
    testFacade.vm$.subscribe((vm) => {
      expect(vm.size).toEqual(initStateMock.size);
      done();
    });
  });

  it('should update state values', (done) => {
    const updatedStateMock: TestBeerState = {
      beerArray: [
        {
          brand: 'Pabst Blue Ribbon',
          name: 'Two Hearted Ale',
          style: 'Merican Ale',
          hop: 'Sorachi Ace',
          alcohol: '2,9%',
        },
        {
          brand: 'Bud Light',
          name: 'La fin Du Monde',
          style: 'Stout',
          hop: 'Bullion',
          alcohol: '2,7%',
        },
      ],
      size: 2,
    };
    testFacade['updateState'](updatedStateMock);
    testFacade.vm$.subscribe((vm) => {
      expect(vm).toEqual(updatedStateMock);
      done();
    });
  });

  it('should update the size value', (done) => {
    const newSize = 9;
    const mockEvent = {
      target: {
        value: newSize,
      },
    };
    testFacade['updateSize'](mockEvent);
    testFacade.vm$.subscribe((vm) => {
      expect(vm.size).toEqual(newSize);
      done();
    });
  });

  it('should perform a mocked http request', (done) => {
    const httpMock: HttpTestingController = TestBed.inject(
      HttpTestingController
    );

    const mockResponse = {
      brand: 'Pabst Blue Ribbon',
      name: 'Two Hearted Ale',
      style: 'Merican Ale',
      hop: 'Sorachi Ace',
      alcohol: '2,9%',
    };

    testFacade['findBeerArray'](1);
    testFacade.vm$.subscribe((tb) => {
      expect(tb.beerArray).toBeTruthy();
      expect(tb.beerArray[0].brand).toBe(mockResponse.brand);
      expect(tb.beerArray[0].name).toBe(mockResponse.name);
      expect(tb.beerArray[0].style).toBe(mockResponse.style);
      expect(tb.beerArray[0].hop).toBe(mockResponse.hop);
      expect(tb.beerArray[0].alcohol).toBe(mockResponse.alcohol);

      done();
    });

    const mockRequest = httpMock.expectOne(
      'https://random-data-api.com/api/beer/random_beer?size=1'
    );
    mockRequest.flush(mockResponse);
  });

The post How to build a PUSH based architecture in Angular – Facade Design Pattern appeared first on Nerd Corner.