DEV Community: Yevheniia

🚀 Deploying an API to AWS Using a Serverless Architecture (Node.js, SAM, and Lambda)

Yevheniia — Sun, 24 Aug 2025 10:10:48 +0000

To get a simple backend live quickly, serverless is the way to go. Instead of provisioning and managing servers, we can wrap our Express app, run it inside AWS Lambda, and expose it through API Gateway.

In this guide, we’ll learn how to deploy a minimal Express API to AWS in a minutes ⏱️ using AWS SAM (Serverless Application Model).

The best part? No need to manage any servers infra - AWS will do it for us.

📋Prerequisites and Setup

Before starting, ensure you have the following tools installed and configured:

1️⃣ Node.js 18.x+ and npm - Download from nodejs.org

2️⃣ AWS CLI - Install and run aws configure with your AWS credentials

3️⃣ AWS SAM CLI - Install from github.com/aws/aws-sam-cli or use brew install aws-sam-cli on macOS

4️⃣ Active AWS account with Lambda/API Gateway permissions (first 1M requests/month are free)

5️⃣ Verify setup by running:aws sts get-caller-identity and sam --version

📂 Basic project structure

express-sample-api/
├── api/                 
│   ├── controllers/    
│   └── services/       
│   └── middlewares/       
│   └── routes/       
│
├── app.ts              
├── handler.ts           # entry point for Lambda
├── package.json        
├── template.yml         # AWS SAM template (Lambda + API Gateway)
└── samconfig.toml       # Deployment config (stack name, region, etc.)

🔌Wrapping Express with serverless-http

The bridge between Express and AWS Lambda is serverless-http

It converts incoming API Gateway events into Express-compatible requests. With this, we can run Express just like on a server — but serverlessly.
For that:

1️⃣ Run npm i serverless-http

2️⃣ Inside handler.ts add:

import serverless from "serverless-http";

import app from "./app";

const { NODE_ENV } = process.env;

export const handler = async (event, context) => {
  console.log(`App running in AWS Lambda. Environment: ${NODE_ENV}`);
  const lambdaHandler = serverless(app);

  return lambdaHandler(event, context);
};

3️⃣ Basic app.ts (CORS, Auth and other logic is not the subject of this article, but still a little reminder - please DON'T forget to setup it for real API. You can find the detailed guide in my other article)

import express from "express";

import apiRoutes from "./routes/index";

const { PORT, NODE_ENV, LAMBDA_TASK_ROOT } = process.env;
const runningOnLambda = !!LAMBDA_TASK_ROOT; //this variable is AWS default, no need for manual setup
const app = express();

app.use("/api", apiRoutes);

if (!runningOnLambda) {
  app.listen(PORT, () => {
    console.log(
      `Local server running on http://localhost:${PORT}. Environment:${NODE_ENV}`
    );
  });
}

export default app;

🏗️ Infrastructure with AWS SAM

With AWS SAM, we define IaC (Infra as code) in template.yml:
1️⃣ Define format version and environment variables:

AWSTemplateFormatVersion: '2010-09-09'
Transform: AWS::Serverless-2016-10-31

Parameters:
  Environment:
    Type: String
    Default: test
    AllowedValues:
      - development
      - production
      - test 
  DefaultAwsRegion:
    Type: String
    Default: eu-west-1 #your AWS region (e.g. us-east-1)

Globals:
  Function:
    Runtime: nodejs18.x
    Environment:
      Variables:
        NODE_ENV: !Ref Environment #that's how we map values from samconfig.toml to app level environment variable names
        DEFAULT_AWS_REGION: !Ref DefaultAwsRegion

2️⃣ REST API Gateway that forwards requests to the Lambda:

 ExpressSampleGateway:
    Type: AWS::Serverless::Api
    Properties:
      Name: !Sub "ExpressSampleGateway_${Environment}"
      StageName: !Ref Environment
      Cors:
        AllowMethods: "'GET,POST,OPTIONS,PUT,HEAD,PATCH,DELETE'"
        AllowHeaders: "'Content-Type,Authorization'"
        AllowOrigin: "'*'" #CORS config should be specified here or on the app level, note that the star is used here because CORS is controlled on app level in my case

3️⃣ A Lambda function IAM role:

ExpressSampleLambdaRole:
    Type: AWS::IAM::Role
    Properties:
      RoleName: !Sub "ExpressSampleLambdaRole_${Environment}"
      AssumeRolePolicyDocument:
        Version: "2012-10-17"
        Statement:
          - Effect: Allow
            Principal:
              Service:
                - lambda.amazonaws.com
            Action: sts:AssumeRole
      ManagedPolicyArns:
        - arn:aws:iam::aws:policy/service-role/AWSLambdaBasicExecutionRole #Here we attached minimum required role which is AWS managed, but in case your app need access to other AWS services (e.g. DB, S3, Secrets Manager) - you have to explicitely specify them in another policy.

4️⃣ A Lambda function that uses handler.handler as the entry point:

  ExpressSampleLambda:
    Type: AWS::Serverless::Function
    Properties:
      FunctionName: !Sub "ExpressSampleLambda_${Environment}"
      CodeUri: dist/ #after build command all the files will be inside dist folder (relevant only for TS, while for JS pass just dot - '.')
      Role: !GetAtt ExpressSampleLambdaRole.Arn
      Handler: handler.handler #our entry file/method
      Timeout: 180 #3 min max execution time, while max allowed value might be up to 15 min
      MemorySize: 512 #MB RAM
      Events:
        ApiEvent:
          Type: Api
          Properties:
            RestApiId: !Ref ExpressSampleGateway #Here we attach our API gateway as a trigger to Lambda
            Path: /{proxy+}
            Method: ANY #here we can limit it only to GET or POST methods if needed
            Stage: !Ref Environment

5️⃣ Outputs that print the API URL once deployed:

Outputs:
  ApiEndpoint:
    Description: API Gateway endpoint URL
    Value: !Sub https://${ExpressSampleGateway}.execute-api.${AWS::Region}.amazonaws.com/${Environment}/

SAM then expands this into CloudFormation under the hood — no console clicking, everything is automated.

FYI - all that can be done in AWS Console (UI) as well

⚙️ Deployment configuration

The samconfig.toml file holds our deployment settings so we don’t have to re-enter them every time:

version = 0.1
[default.build.parameters]
cached = true
parallel = true

[test]
[test.deploy]
[test.deploy.parameters]
stack_name = "express-serverless-sample-test"
resolve_s3 = true
s3_prefix = "express-serverless-sample-test"
region = "eu-west-1"
confirm_changeset = false
capabilities = "CAPABILITY_NAMED_IAM"
parameter_overrides = "Environment=\"test\" DefaultAwsRegion=\"eu-west-1\"" #here we specify the values for our environment variables
image_repositories = []
disable_rollback = false

[prod]
[prod.deploy]
[prod.deploy.parameters]
stack_name = "express-serverless-sample-prod"
resolve_s3 = true
s3_prefix = "express-serverless-sample-prod"
region = "eu-west-1"
confirm_changeset = false
capabilities = "CAPABILITY_NAMED_IAM"
parameter_overrides = "Environment=\"production\" DefaultAwsRegion=\"eu-west-1\"" #here we specify the values for our environment variables
image_repositories = []
disable_rollback = false

🚀 Build & deploy

Deploying is just 3 steps:

npm run build - optional, needed only in case you use TS
sam build🛠️
sam deploy --config-env test (e.g. prod - for production) 📤

When it’s done, you’ll see the API URL in the terminal - outputs section. Test it immediately with curl, Postman, or browser 🌐.

🔍 Verify in the AWS Console

After deployment, confirm everything works:

1️⃣ API Gateway → APIs → ExpressSampleGateway_test

Go to the Stages tab → test.

Copy the Invoke URL 🔗

2️⃣ Lambda → Functions → ExpressSampleLambda_test

Open the Monitor tab 📊

Check for recent invocations

For logs and debugging, head over to AWS CloudWatch Logs 📜.

Got questions? Drop them in the comments!

🔐 Managed Secure Authentication for Server-Side Applications (Node.js & Okta Example)

Yevheniia — Sun, 08 Jun 2025 16:54:04 +0000

In this guide, we’ll integrate Okta authentication into an Express.js app using OAuth 2.0 and OIDC standards. We’ll verify JWTs, fetch public keys dynamically, and use robust middleware to protect our API — all in a modular, scalable way. If you’ve followed my Angular + Okta article, this backend piece completes the picture.

📦 Prerequisites

Okta Developer account with an app set up (here you can find the guide)
Node.js + Express.js basic app
npm i jsonwebtoken
npm i axios

🧩 Okta Config

Create okta.config.ts to centralize your Okta metadata:

export const OktaConfig = {
  issuer: "https://dev-your_acc_id.okta.com/oauth2/default",
  audience: "your_audience",
  get jwksUri() {
    return ${this.issuer}/v1/keys;
  },
};

🌐 HTTP Request Service

import axios, { AxiosRequestConfig, AxiosResponse } from "axios";
import { CRUDHttpMethods } from "../enums/crud.enum";
import { logger } from "../../utils/logger";

export class HttpRequestService {
  static async executeHttp(
    method: CRUDHttpMethods,
    url: string,
    params: Record<string, unknown> = {},
    headers: Record<string, any> = {},
  ): Promise<any> {
    const config: AxiosRequestConfig = {
      url,
      method,
      responseType: "json",
      timeout: 240000,
      headers,
      ...(method === CRUDHttpMethods.GET ? { params } : { data: params })
    };

    try {
      const response: AxiosResponse = await axios(config);
      logger("info", `${method} request to ${url} succeeded`, "HttpRequestService:executeHttp");
      return response.data;
    } catch (err) {
      logger("error", `Failed ${method} to ${url}: ${err?.message}`, "HttpRequestService:executeHttp");
      throw err;
    }
  }
}

🔍 JWT Validation Service

Here’s the token validator that fetches public keys from Okta and verifies tokens securely.

import jwt from "jsonwebtoken";

import { HttpRequestService } from "./http-request.service";
import { CRUDHttpMethods } from "../enums/crud.enum";
import { OktaConfig } from "../config/okta";

const { issuer, audience, jwksUri } = OktaConfig;

export class JwtService {
  static async validateToken(token: string): Promise<any> {
    const tokenParts = token.split(".");
    const header = JSON.parse(atob(tokenParts[0]));
    const kid = header.kid;
    const key = await JwtService.getSigningKey(kid);

    try {
      return jwt.verify(token, key, {
        audience: audience,
        issuer: issuer,
        algorithms: ["RS256"],
      });
    } catch (error) {
      throw new Error(error?.message || 'Okta token verification error');
    }
  }

  private static async getSigningKey(kid: string): Promise<string> {
    try {
      const data = await HttpRequestService.executeHttp(
        CRUDHttpMethods.GET,
        jwksUri
      );

      if (!data.keys || data.keys.length === 0) {
        throw new Error("No Okta signing keys found in JWKS.");
      }

      const key = data.keys.find((k) => k.kid === kid);
      if (!key) {
        throw new Error(
          "No matching Okta signing key found based on provided token",
        );
      }
      const signingKey = JwtService.generatePemKey(key.n, key.e);

      return signingKey;
    } catch (error) {
      const errorMessage = `An error has occured during retrieving signing key from Okta API. Message: ${error?.response?.data?.errorSummary || error?.message || "seems like Okta API is unavailable."}`;

      throw new Error(errorMessage);
    }
  }

  private static generatePemKey(n: string, e: string): string {
    const modulus = Buffer.from(n, "base64").toString("hex");
    const exponent = Buffer.from(e, "base64").toString("hex");

    return (
      `-----BEGIN RSA PUBLIC KEY-----\n` +
      Buffer.from(`3082010a0282010100${modulus}0203${exponent}`, "hex")
        .toString("base64")
        .match(/.{1,64}/g)
        .join("\n") +
      `\n-----END RSA PUBLIC KEY-----`
    );
  }
}

🧱 Authentication Middleware

import { Request, Response, NextFunction } from "express";
import { JwtService } from "../services/jwt-validation.service";
import { HttpStatus } from "../enums/http-status.enum";
import { httpResponseFailed } from "../helpers/api-response.helper";

export class AuthMiddleware {
  static async validateToken(
    req: Request,
    res: Response,
    next: NextFunction,
  ): Promise<void> {
    const authHeader =
      req.headers["authorization"] || req.headers["Authorization"];
    if (!authHeader) {
      return res
        .status(HttpStatus.UNAUTHIRIZED)
        .json(httpResponseFailed("Missing token"));
    }
    try {
      const token = (authHeader as string).replace(/bearer\s?/i, "").trim();
      const payload = await JwtService.validateToken(token);
      (req as any).user = payload;
      next();
    } catch (err) {
      res
        .status(HttpStatus.UNAUTHIRIZED)
        .json(httpResponseFailed(err?.message || "Invalid token"));
      return;
    }
  }
}

🧪 Wire It Up in app.ts

Attach the middleware globally or per route:

import express from "express";
import cors from "cors";
import apiRoutes from "./api/routes/index";
import { AuthMiddleware } from "./api/middlewares/auth.middleware";
import corsConfig from "./config/cors";
import { logger } from "./utils/logger";

const app = express();

app.use(cors(corsConfig));
app.use(AuthMiddleware.validateToken); // 🔐 Protect all routes
//app.use('api/private', AuthMiddleware.validateToken, privateRoutes); - in case you want to secure only certain routes

 app.listen(process.env.PORT || 3000, () => {
    logger("info", `Server started on port ${process.env.PORT}`, "app.ts");
  });

app.use("/api", apiRoutes);
export default app;

📚 Resources used

🔐 Okta Developer Documentation (OAuth 2.0 + OIDC)

🧰 jsonwebtoken GitHub Repo

📖 Node.js Official Docs

🔎 Express.js Middleware Concepts

🧪 Testing APIs with Postman

Got questions? Drop them in the comments!
Stay secure and clean. 🔐✨

🔐 Modern Secure Authentication in Frontend Applications (Angular & Okta Example)

Yevheniia — Mon, 10 Mar 2025 09:30:48 +0000

Hey devs! 👋 In this guide, we’ll integrate OAuth 2.0 + OpenID Connect step by step. If you followed my previous article on Okta setup, you’re all set to continue!

What We’ll Cover

✅ Installing the Okta Angular SDK
✅ Setting up Okta configuration
✅ Creating an Okta authentication service
✅ Adding logic to Login component
✅ Updating Angular routing
✅ Checking if the user is logged in

Let’s get started! 🎯

📌 Step 1: Install Okta SDK

Run this command to install the Okta Angular SDK:

npm install @okta/okta-angular

This package simplifies authentication in Angular apps using OAuth 2.0 & OIDC.

📌 Step 2: Create okta.config.ts

import { OktaAuthOptions } from '@okta/okta-auth-js';

export const oktaConfig: OktaAuthOptions = {
    issuer: 'https://dev-your_acc.okta.com/oauth2/default',
    clientId: 'your_client_id',
    redirectUri: `${window.location.origin}/login/callback`,
    pkce: true,
    scopes: ['openid', 'profile', 'email'],
};

🔹 Why This Matters?

Issuer → Your Okta domain.

Client ID → From your Okta app.

Redirect URI → Must match Okta settings.

Scopes → Controls what user info can be accessed.

📌 Step 3: Create Okta Auth Service

import { Inject, Injectable } from '@angular/core';

import { OKTA_AUTH } from '@okta/okta-angular';
import { OktaAuth } from '@okta/okta-auth-js';

@Injectable({
    providedIn: 'root',
})
export class OktaAuthService {
  public isAuthenticated$ = new BehaviorSubject<boolean>(false);

    constructor(@Inject(OKTA_AUTH) private oktaAuth: OktaAuth) {}

    public async signIn(): Promise<void> {
        await this.oktaAuth.signInWithRedirect();
    }

    public async signOut() {
        await this.oktaAuth.signOut();
    }

    public getAccessToken() {
        return this.oktaAuth.getAccessToken();
    }

    public isAuthenticated() {
        return this.oktaAuth.authStateManager.getAuthState()?.isAuthenticated;
    }
}

📌 Step 4: Update/create login.component.ts

import { Component } from '@angular/core';
import { OktaAuthService } from '../okta-auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrl: './login.component.scss',
})
export class LoginComponent {
  constructor(private oktaService: OktaAuthService) {}

  public async login() {
    await this.oktaService.signIn();
  }
}

📌 Step 5: Update app.routes.ts

import { Routes } from '@angular/router';
import { OktaCallbackComponent } from '@okta/okta-angular';
import { AuthGuard } from './shared/guards/auth.guard';

export const routes: Routes = [
    {
        path: '',
        redirectTo: 'main',
        pathMatch: 'full',
    },
    {
        path: 'login/callback',//Handles Okta’s redirect callback after login.
        component: OktaCallbackComponent,
    },
    {
        path: 'login',
        loadChildren: () => import('./pages/login/login.module').then(m => m.LoginModule),
    },
    {
        path: 'main',
        loadChildren: () => import('./pages/main/main.module').then(m => m.MainModule),
        canActivate: [AuthGuard],
        data: {
            okta: { acrValues: 'urn:okta:loa:2fa:any' },
        },
    },
];

📌 Step 6: Update app.config.ts (e.g. This ensures OktaAuth is globally available in your app.)

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { provideAnimations } from '@angular/platform-browser/animations';

import { OktaAuthModule } from '@okta/okta-angular';
import { OktaAuth } from '@okta/okta-auth-js';

import { routes } from './app.routes';
import { oktaConfig } from './configs/okta.config';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideAnimationsAsync(),
    provideAnimations(),
    importProvidersFrom(
      OktaAuthModule.forRoot({
          oktaAuth: new OktaAuth({
              ...oktaConfig,
          }),
      }),
  ),
  ]
};

📌 Step 7: Check If User is Logged In and Set Auth State

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

import { OktaAuthService } from './shared/services/okta-auth.service';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet, CommonModule],
    templateUrl: './app.component.html',
    styleUrl: './app.component.scss',
})
export class AppComponent {
    constructor(private oktaService: OktaAuthService) {}

    ngOnInit() {
        this.oktaService.isAuthenticated$.next(this.oktaService.isAuthenticated() || false);
    }
}

🎯 Now your Angular app is secured with Okta authentication!

➡️ In my next article, we’ll secure API requests with access tokens & backend verification. Stay tuned!

Got questions? Drop them in the comments!

🔐 Securing API Access with OAuth 2.0 and OpenID Connect using Okta

Yevheniia — Sat, 08 Mar 2025 11:30:33 +0000

Hey devs! 👋 Today, we’re diving into how to secure your API using OAuth 2.0 and OpenID Connect (OIDC) with Okta. Whether you’re building an Angular app or setting up RBAC (Role-Based Access Control), this guide will walk you through the Okta setup from scratch—no prior experience needed!

🚀 What We’ll Cover

✅ Setting up Okta from the very beginning (no account? No problem!)
✅ Creating user groups and assigning access (RBAC in action)
✅ Setting up an OAuth 2.0 app in Okta
✅ Configuring authentication & API policies

🔧 Step 1: Get an Okta Developer Account

First thing we need is an Okta Developer Edition account. It’s free and gives us everything we need for secure authentication.

1️⃣ Go to Okta Developer and click Sign Up.

2️⃣ Select Developer Edition

3️⃣ Fill in your email, company name, and region. Note: Okta requires business email, if you don't have one you can quickly buy it for a cheap price (e.g. domain can be bought on GoDaddy while custom email address on proton)

4️⃣ Verify your email and log in to your Okta Admin Dashboard.

Once you’re in, you’ll see your Okta domain at the top (something like https://dev-xxxxxx.okta.com). Save this—it’s important!

👥 Step 2: Set Up User Groups for RBAC

Using groups in Okta makes access control easy. Instead of manually managing users, we’ll create a group and assign access at the group level.

📌 Create a Group

1️⃣ In the Okta Admin Dashboard, go to Directory → Groups.

2️⃣ Click "Add Group".

3️⃣ Give it a name and add short description.

4️⃣ Your new group can be found here ⬇️

📌 Add Users to the Group

1️⃣ Go to Directory → Groups.

2️⃣ Inside groups locate the desired group and click on it

3️⃣ Click "Assign people".

4️⃣ Click on plus button near the desired user.

🎯 Why This Matters:
RBAC (Role-Based Access Control) ensures only the right users can log in to your app. Later, we’ll restrict API access to this group.

🛠️ Step 3: Create an OAuth 2.0 App in Okta

Now, let’s register our Angular app in Okta so it can use OAuth 2.0 and OpenID Connect (OIDC) for authentication.

📌 Create a New App

1️⃣ Go to Applications → Applications → Create App Integration.

2️⃣ Choose "OIDC - OpenID Connect" as the sign-in method.

3️⃣ Select "Single Page Application (SPA)" as the app type.

4️⃣ Click Next.

📌 Give it a name and configure redirect URIs

1️⃣ Base URI → http://localhost:4200

2️⃣ Login Redirect URI → http://localhost:4200/login/callback

3️⃣ Logout Redirect URI → http://localhost:4200

📌 Enable OAuth 2.0 Grant Types

1️⃣ Inside grant type section enable:
✅ Authorization Code (more secure than implicit flow).
✅ Refresh Token (for session persistence).

📌 Set Controlled Access

1️⃣ Select "Limit access to selected groups".

2️⃣ Choose the groups (this restricts access to only assigned users).

3️⃣ Click Save.

Now our Angular app is registered with Okta and ready to authenticate users! 🎉

🔒 Step 4: Configure Authentication & API Access Policies

Okta uses authentication policies to control who can log in and API policies to manage who gets access tokens. Let’s configure both!

📌 Set Up Authentication Policy (2FA Required!)

We want our users to log in with password + Okta Verify (TOTP) for extra security. By default Okta applies 'Any two factors' to new apps, but we have to ensure on it.

1️⃣ Go to Security → Authentication Policies and ensure the 'Any two factors' policy was applied to our app.

If not - then create the new one and apply it to the app:
2️⃣ Click Create Policy → Name it 'Angular Users Policy'.

3️⃣ Under Rules, set:
✅ Require Password (Knowledge Factor).
✅ Require Okta Verify - TOTP (Possession Factor).

4️⃣ Click Save and assign this policy to our Angular app.

📌 Configure API Authorization Policies

🚀 Why Restrict API Tokens at the User Level, Not Just the App?
Imagine an attacker registers another app inside Okta—if API policies only checked app authentication, this fake app could get valid access tokens! 😱
By locking API tokens to specific user groups, we ensure that only authorized users within trusted apps can access our API. 🔐

1️⃣ Prepare the ClientId of our angular app

2️⃣ Go to Security → API → Authorization Servers.

3️⃣ Click "default" Authorization Server → Go to Access Policies.

4️⃣ Click "Add Policy", give it a name (e.g. 'angular_app_policy'), and assign it to your angular app using its ClientID.

5️⃣ Add a Rule:
✅ Allow Authorization Code with PKCE.
✅ Apply it only to desired groups.
✅ Allow Scopes (optional): openid, profile, email (restrict access to only necessary data).

6️⃣ Click Save.

🎯 Why This Matters:

✅ Ensures only authenticated users can get API tokens.
✅ Restricts API access based on user groups.
✅ Uses scopes to limit what data users can access.

🔥 What’s Next? Frontend & Backend Integration!
Now that Okta is fully set up, it’s time to connect it to our Angular app and backend.
🚀 Next Article: How to authenticate users in Angular & secure API requests.
🔐 Upcoming: Backend token verification & advanced security best practices.
🛎 Stay tuned & follow for updates!

🔑 Wrapping Up

In this guide, we:
✅ Created an Okta Developer account from scratch.
✅ Set up user groups for RBAC.
✅ Registered an OAuth 2.0 app in Okta.
✅ Configured authentication policies (password + 2FA).
✅ Set API authorization rules to restrict access.

With this setup, your app is now secure using OAuth 2.0, OpenID Connect, and Role-Based Access Control. 🚀

Let me know in the comments if you have any questions, and check out my next posts on frontend and backend authentication & token verification! 🔥

Data Polling on the Backend for Long-Running HTTP Requests: NestJS Example

Yevheniia — Sat, 16 Nov 2024 16:37:40 +0000

Following my previous article on long-runnig http requests handling on the frontend, I’d like to demonstrate how to implement data polling on the backend. This example uses a NestJS server app, PostgreSQL database, and Prisma ORM. However, this approach is universal and can be applied with any other programming language, framework, or database.

Here’s the workflow:

A /purchase/execute HTTP request is received.

A new taskId is generated, and a new entity is created in the tasks table of the database.

The method responsible for purchase execution is called in the background with taskId as an argument (without waiting for its result).

The server returns an HTTP 202 status and the taskId to the client.

Once the purchase execution method finishes, the result is stored in the database.

The client polls/purchase/execution-status/${taskId} until the status is "done", at which point the response is returned.

The database is cleaned up automatically using TTL (e.g., AWS RDS with expireAt). Alternatively, you can use a Cron job to periodically remove expired tasks.

Here’s how this workflow can be implemented in NestJS:

//purchase.controller.ts

  import {
  Controller,
  Post,
  UseGuards,
  Body,
  Get,
  Param,
  Res,
  HttpStatus,
} from '@nestjs/common';
import { ApiBearerAuth } from '@nestjs/swagger';
import { Response } from 'express';

import jsend from 'jsend';
import { AuthenticatedGuard } from '../auth/auth.guard';
import { PurchaseService } from './purchase.service';
import { TasksService } from '../tasks/tasks.service';

@Controller('purchase')
export class PurchaseController {
  constructor(
    private readonly purchaseService: PurchaseService,
    private readonly tasksService: TasksService,
  ) {}

  @UseGuards(AuthenticatedGuard)
  @ApiBearerAuth()
  @Post('execute')
  public async executePurchase(
    @Body()
    executePurchaseDto: {
      userId: string;
      goods: Array<{
        productId: string;
        quantity: number;
      }>;
    },
    @Res() res: Response,
  ) {
    const taskId =
      await this.tasksService.createTask();
    this.purchaseService.executePurchase(
      executePurchaseDto,
      taskId,
    );

    res
      .status(HttpStatus.ACCEPTED)
      .send({
        taskId,
        status: HttpStatus.ACCEPTED,
      });
  }

  @UseGuards(AuthenticatedGuard)
  @ApiBearerAuth()
  @Get('execution-status/:taskId')
  public async getPurchaseExecutionStatus(
    @Param('taskId') taskId: string,
    @Res() res: Response,
  ) {
    const result =
      await this.purchaseService.getPurchaseExecutionStatus(
        taskId,
      );

    return res
      .status(HttpStatus.OK)
      .json(jsend.success(result));
  }
}

//purchase.service.ts

import { Injectable } from '@nestjs/common';
import { Task } from '@prisma/client';
import { TasksService } from '../tasks/tasks.service';

@Injectable()
export class PurchaseService {
  constructor(
    private readonly tasksService: TasksService,
  ) {}

  public async executePurchase(
    executePurchaseDto: {
      userId: string;
      goods: Array<{
        productId: string;
        quantity: number;
      }>;
    },
    taskId: string,
  ): Promise<any> {
    const res = await this.processPurchase(
      executePurchaseDto,
      taskId,
    );
    await this.tasksService.updateTaskById(res);
  }

  public async getPurchaseExecutionStatus(
    taskId: string,
  ): Promise<Task> {
    return await this.tasksService.getTaskById(
      taskId,
    );
  }

  public async processPurchase(
    executePurchaseDto: {
      userId: string;
      goods: Array<{
        productId: string;
        quantity: number;
      }>;
    },
    taskId: string,
  ): Promise<any> {
    // Your purchase handling logic here
    const result = {};

    return { result, taskId };
  }
}

//tasks.service.ts
import { Injectable } from '@nestjs/common';
import { v4 as uuidv4 } from 'uuid';
import { Task } from '@prisma/client';

import { PrismaService } from 'src/prisma/prisma.service';

@Injectable()
export class TasksService {
  constructor(
    private prismaService: PrismaService,
  ) {}

  public async createTask(): Promise<string> {
    const currentDate = Date.now();
    const createdAt = Math.floor(
      currentDate / 1000,
    ); // in seconds
    const expireAt = createdAt + 900; // + 15 minutes

    const params = {
      taskId: uuidv4(),
      createdAt: new Date(
        currentDate,
      ).toISOString(),
      status: 'processing',
      response: '-',
      expireAt,
    };

    const newTask =
      await this.prismaService.task.create({
        data: {
          ...params,
        },
      });

    if (!newTask) {
      throw new HttpException(
        'Failed to create a task',
        HttpStatus.INTERNAL_SERVER_ERROR,
      );
    }

    return params.taskId;
  }

  public async getTaskById(
    taskId: string,
  ): Promise<Task> {
    const task =
      await this.prismaService.task.findUnique({
        where: {
          taskId,
        },
      });
    if (!task)
      throw new HttpException(
        "Task doesn't exist",
        HttpStatus.BAD_REQUEST,
      );

    return task;
  }

  public async updateTaskById({
    taskId,
    result,
  }): Promise<void> {
    const updatedTask =
      await this.prismaService.task.update({
        where: { taskId },
        data: {
          response: result,
          status: 'done',
        },
      });
    if (!updatedTask) {
      throw new HttpException(
        'Failed to update task',
        HttpStatus.INTERNAL_SERVER_ERROR,
      );
    }
  }
}

//prisma.service.ts

import { Injectable } from '@nestjs/common';
import { ConfigService } from '@nestjs/config';

import { PrismaClient } from '@prisma/client';

@Injectable()
export class PrismaService extends PrismaClient {
  constructor(
    public configService: ConfigService,
  ) {
    super({
      datasources: {
        db: {
          url: configService.get('DATABASE_URL'),
        },
      },
    });
  }
}

Thanks for reading and feel free to shair your feedback)

Data Polling on the Frontend for Long-Running HTTP Requests: Angular Example

Yevheniia — Sat, 14 Sep 2024 17:09:10 +0000

What is polling, and when does it come into play?

Polling is like checking your mailbox every few minutes, hoping for that important letter. In programming, it refers to repeatedly sending requests to the server at regular intervals to check if new data is available.

Real-world scenario:
Imagine a web app - an internet-shop with both frontend and backend parts. After selecting items, a customer proceeds to the cart and clicks the 'buy' button. When this happens, the frontend sends a /buy HTTP request to the backend. The backend then performs several operations to complete the purchase:

Creating a new order entry.
Updating the database for the selected items.
Handling third-party communications for payment processing.

These actions can take anywhere from a few seconds to a few minutes. To avoid keeping the client waiting for so long, the backend often responds immediately with a 202 Accepted status and a taskId, while continuing to process the request in the background. The frontend's role here is to poll the server at regular intervals using the taskId to check when the data is ready.

In this article, I’ll show you a simple and effective way to implement polling into an Angular frontend app:

**cart.component.ts**

import { Component, OnInit } from '@angular/core';

import { take } from 'rxjs';

import { HttpService } from '../../modules/shared/services/http.service';
import { AuthService } from '../../modules/shared/services/auth.service';

@Component({
    selector: 'app-cart',
    templateUrl: './cart.component.html',
    styleUrl: './cart.component.scss',
})
export class CartComponent implements OnInit {
    constructor(
        private readonly httpService: HttpService,
        private readonly authService: AuthService,
    ) {}

    ngOnInit() {}

    private executePurchase(selectedGoods: Array<{productId:string; 
      quantity:number;}>): void {
        const params = {
            userId: this.authService.currentUserId,
            goods: [...selectedGoods],
        };
        this.httpService
            .executePurchase(params)
            .pipe(take(1))
            .subscribe({
                next: res => {
                    console.log(res); //here your logic
                },
                error: err => console.error(err),
            });
    }
}

**http.service.ts**

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

import { Observable, catchError, delay, filter, map, of, startWith, switchMap, timer } from 'rxjs';

import { AppConfig } from '../../../configs/app.config';
import { IResponse } from '../interfaces/response.interface';
import { ParsePurchaseService } from './parse-purchase.service';
import { IPurchase, IExecutePurchaseResponse } from '../interfaces/purchase.interface';

@Injectable({
    providedIn: 'root',
})
export class HttpService {
    constructor(
        private readonly http: HttpClient,
        private readonly parsePurchaseService: ParsePurchaseService,
    ) {}

    public executePurchase(params: IPurchase): Observable<IExecutePurchaseResponse> {
        return this.executePurchaseRequest(params);
    }

    public pollData(url: string, interval: number): Observable<any> {
        return timer(0, interval).pipe(
            startWith(null), // Start with null to avoid immediate emission at the beginning
            delay(interval),
            switchMap(() => this.http.get<any>(url)),
            catchError(error => {
                throw new Error(`Polling error: ${error}`);
            }),
        );
    }

    private executePurchaseRequest(params: IPurchase): Observable<IExecutePurchaseResponse> {
        return this.http.post<IResponse>(`${AppConfig.API_URL}/purchase/execute`, params).pipe(
            switchMap(data => {
                if (data.status === 200) {
                    return of(data).pipe(
                        map(parsedData => this.parsePurchasesService.parseCommitedPurchaseResponse(parsedData.data)),
                    );
                } else if (data.status === 202 && data.data.taskId) {
                    return this.pollData(
                        `${AppConfig.API_URL}/purchase/execution-status/${data.data.taskId}`, //every 5 seconds poll server
                        5000,
                    ).pipe(
                        filter(res => res?.data?.status === 'done'),
                        map(parsedData => this.parsePurchasesService.parseCommitedPurchaseResponse(parsedData.data)),
                    );
                } else {
                    return of(data).pipe(
                        map(parsedData => this.parsePurchasesService.parseCommitedPurchaseResponse(parsedData.data)),
                    );
                }
            }),
            catchError(error => {
                throw error;
            }),
        );
    }
}

Thanks for reading, hope it was useful, please feel free to comment))

Data caching in NestJS

Yevheniia — Sat, 17 Aug 2024 11:03:33 +0000

Feeling like your NestJS API is lagging under heavy traffic?
Caching could be a secret weapon!

Why Use Caching?
Let's imagine running an e-commerce site where users frequently request products lists. Each request hits the database, slowing down performance as traffic grows. Caching helps by storing the product list temporarily, so subsequent requests are served faster without hitting the database again.

In this article, I'm going to show you how to implement data caching into NestJS app using @nestjs/cache-manager cache-manager

Install the package npm install @nestjs/cache-manager

2.In your module, import the cache module

import { Module } from '@nestjs/common';
import { CacheModule } from '@nestjs/cache-manager';

@Module({
  imports: [CacheModule.register()],
})
export class ProductsModule {}

3.Inject the cache manager into your service and use it like this:

import { Inject, Injectable } from '@nestjs/common';
import { CACHE_MANAGER } from '@nestjs/cache-manager';
import { Cache } from 'cache-manager';

@Injectable()
export class ProductsService {
  private readonly productsCacheKey: string = 'your_key_here';

  constructor(
    @Inject(CACHE_MANAGER)
    private readonly cacheManager: Cache,
  ) {}

  public async set(
    data: IProduct[],
    ttl: number = 100000,
  ): Promise<void> {
    await this.cacheManager.set(
      productsCacheKey,
      JSON.stringify(data),
      ttl,
    );
  }

  public async get(): Promise<string> {
    return await this.cacheManager.get(productsCacheKey);
  }

  public async delete(): Promise<boolean> {
    await this.cacheManager.del(productsCacheKey);
    return true;
  }

  //Other methods
}

By adding caching to your NestJS app with @nestjs/cache-manager, you can improve performance and make your application handle high traffic more efficiently. Give it a try and see the difference it makes!

Set data in localStorage with a limited time to live (TTL)

Yevheniia — Sun, 11 Aug 2024 12:58:38 +0000

Sometimes we need to set data in browser localStorage with a time to live (TTL).

Real-world example
We have an online store with a cart and liked products. A new customer comes to our store and, without authorization, starts adding products to the cart or liked list. In this case, we store each product from the shopping cart in browser localStorage. However, we don’t need to keep them there forever, localStorage is not infinite. If the user doesn’t continue the purchase within the next month, it means he/she might have lost interest, and we can clean that data from localStorage.

How can we do that?
Obviously, we can’t achieve this simply using the setTimeout method🙂

Option 1. We can set data in localStorage with the current date and expiration date fields and manually implement a function that checks whether the data has expired every time the page is reloaded and removes it if it has.
Option 2. This is much easier. Just use a ready-made solution— localstorage-slim. We can set values in localStorage with a TTL, and this package will handle the expiration and removal for us, so no extra checks are needed.

Here is an example of a vanilla JavaScript implementation:

**index.html**
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Test localstorage-slim</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="../favicon.ico" />
    <link rel="stylesheet" href="./css/main.css" type="text/css">
</head>

<body>
        <script src="https://cdn.jsdelivr.net/npm/localstorage-slim"></script>
    <script src="./js/main.js">
    </script>
</body>

</html>

**main.js**
const localStorageKey = ""; //your key here
const goodsIds = ["1", "2", "3"];

//set data
ls.set(localStorageKey, JSON.stringify(goodsIds), {
  ttl: 604800,
}); //one week in seconds

//get data
const dataFromLs = ls.get(localStorageKey);

Using ng-content in Angular. Simple DropDownComponent.

Yevheniia — Sat, 03 Aug 2024 16:04:31 +0000

ng-content

Is a directive that allows content projection, enabling us to insert and display content within a component's template from its parent component.

When it might be useful?

Let’s imagine that we have the drop-down component. We reuse this component in a many different places within our app.The drop-down itself always looks the same, only the options inside are changing. The design of the menu always is the same.

But the trigger of that dropdown might have a few different views.

View number 1:

View number 2:

View number 3:

How many ways do we have to implement it?
Solution number 1: add an @Input() decorator to with a type of trigger view and use it’s value as an *if-expression inside HTML.

Solution number 2: add an @Input() same as in the previous one and use its value for *ngSwitch with the several possible *cases inside HTML.

Solution number 3: no extra @Input() decorator inside , no extra expressions inside HTML, we going to use ng-content.

For sure those ways are only part of all possible ones, there are certainly others, it’s just 3 of the fastest ones from my point of view:) If you usually use another one feel free to share it in the comments.

In this article, I’m going to show you how to create the simple drop-down component with differrent views of it’s trigger using ng-content.

DropDownComponent.html
<div class="drop-down-component">
    <div #dropDownMenuTrigger (click)="openDropDown()" class="drop-down-component__trigger">
        <ng-content select="[drop-down-trigger]"></ng-content>
    </div>
    <ul class="drop-down__list">
        <li *ngFor="let option of dropDownData" class="drop-down-component__option">
            <a (click)="selectOption(option)" class="drop-down-component__option-name" role="button">
                {{ option.name }}

            </a>

        </li>
    </ul>
</div>


DropDownComponent.ts
  public isDropDownVisible: boolean = false;

 @Input() dropDownData: ITDropDown[] | null = null;
 @ViewChild('dropDownMenuTrigger', { read: ElementRef, static: false })
    dropDownMenuTrigger: ElementRef;

 public openDropDown(): void {
  this.isDropDownVisible = !this.isDropDownVisible;
}

public selectOption(option: ITDropDown): void {
  //your logic here
}


ParentComponent.html
<app-drop-down [dropDownData]="dropDownData">
    <div drop-down-trigger>
        <img src="/assets/images/your-icon-name.svg" class="drop-down-component__trigger-inner" />
    </div>
</app-drop-down>

As you can see it is a really simple way to create a dynamic view of a drop-downs trigger that frees us from the need to use extra expressions and decorators.