Forem: YogitaKadam14

🚀 CI/CD Pipelines & YAML Best Practices

YogitaKadam14 — Fri, 13 Feb 2026 14:11:37 +0000

Lessons Learned from Real-World Azure + Bitbucket Deployments
Designing CI/CD pipelines feels straightforward…
until your builds become inconsistent, deployments start failing, and environment management turns messy.

After working extensively with:

Bitbucket Pipelines
Azure App Service (Linux)
Node.js backends
React / Angular frontends
Monorepos

…I’ve gathered practical lessons that saved hours of debugging and prevented production issues.

This post focuses on real-world patterns, not textbook theory.

🧱 1️⃣ Deterministic Builds Are Non-Negotiable
One of the most common CI/CD mistakes:

npm install

❌ Why this is risky in pipelines

Can modify package-lock.json
Non-reproducible builds
“Works locally, fails in CI”

✅ Best Practice

npm ci

For deployment bundles:

npm ci --omit=dev

✔ Benefits

Enforces lockfile
Faster installs
Reproducible builds

📦 2️⃣ Don’t Ship Dev Dependencies to Production
Early pipelines often bundle everything:

node_modules/

❌ Consequences

Bloated artifacts
Slower deployments
Higher memory usage
Cold start delays

✅ Better Strategy
Reinstall only production dependencies:

npm ci --omit=dev

✔ Result

Smaller ZIP
Faster startup
Cleaner runtime

⚛ 3️⃣ Frontend Configuration: The Silent Problem
For React / Angular / Vite apps:

npm run build

👉 Environment variables become hardcoded into JS bundles
❌ Symptoms

Azure App Settings changes do nothing
Rebuild required per environment

✅ Scalable Solution → Runtime Config
Create an env.js file:

window.__env = {
  API_URL: "https://api.example.com"
};

Load before the app bundle:

<script src="/env.js"></script>

Access in React:

const apiUrl = window.__env?.API_URL;

✔ Advantages

Build once, deploy anywhere
No rebuild per environment
Easy config updates
Customer-specific deployments

🔐 4️⃣ Frontend Secrets? They Don’t Exist.
Important reality:
❌ You cannot truly hide secrets in frontend apps
Anything delivered to the browser can be inspected.

🚨 Never expose

API keys
DB credentials
Client secrets

✅ Correct Architecture

Frontend → Backend → Third-party

Secrets live only in:

Backend
Azure App Settings
Key Vault

🌱 5️⃣ One YAML vs Multiple YAML Files
As projects grow:
👉 Should we create separate YAML per branch?

❌ Why this becomes painful

Pipeline drift
Duplication
Maintenance overhead

✅ Recommended
Use one common YAML with branch logic:

branches:
  dev:
  test:
  main:

🔁 6️⃣ Repeated Steps? Use YAML Anchors
Avoid copy-paste pipelines.
✅ Use Anchors

definitions:
  steps:
    - step: &build_step

Reuse:

- step: *build_step

✔ Benefits

Cleaner YAML
Easier updates
Less duplication

☁️ 7️⃣ Azure Deployment: Pipe vs CLI
Two popular approaches:

✅ Atlassian Azure Pipe (Preferred)

pipe: atlassian/azure-web-apps-deploy

✔ Why it’s great

Minimal scripting
Cleaner pipelines
Fewer failure points

🧰 Azure CLI (Use When Needed)

Best for:

Slot swaps
Infra provisioning
Advanced automation

❌ Avoid installing CLI manually

curl InstallAzureCLIDeb

✅ Use Azure CLI image instead

image: mcr.microsoft.com/azure-cli

🚨 8️⃣ Dangerous Commands to Avoid (Unless Justified)

Examples:

az resource update ... allow=true
PORT=8080 hardcoding
sleep 30 hacks

✅ Only acceptable when

Legacy constraints
Debugging scenarios
Platform requirements
Always document the reason.

🔐 9️⃣ Repository vs Deployment Variables
Misusing variables causes many CI/CD issues.
✅ Repository Variables

Use for:

Shared config
Build constants

Examples:

NODE_VERSION
LINT_FLAGS

✅ Deployment Variables
Use for:

Environment-specific values
Secrets

Examples:

API_URL
Azure credentials

🏆 Final Takeaways

✅ Pipelines must be deterministic
✅ Use npm ci, not npm install
✅ Install prod dependencies only
✅ Artifacts should be environment-agnostic
✅ Never store secrets in frontend
✅ Prefer runtime config for SPAs
✅ Use one YAML with branch logic
✅ Use YAML anchors to avoid duplication
✅ Prefer deployment pipes over complex scripts
✅ Use Azure CLI only when flexibility required

🏆 Conclusion: CI/CD is Easy… Until It Isn’t

Setting up a pipeline that “works” is not difficult.

But designing a pipeline that is:

Deterministic
Environment-agnostic
Secure
Scalable

Easy to maintain
👉 requires deliberate engineering decisions.

Small shortcuts like:
❌ Using npm install
❌ Embedding secrets in frontend
❌ Duplicating YAML per branch
❌ Shipping devDependencies
…may work initially but create serious friction as projects scale.

🔥 Final Thought

Your CI/CD pipeline is not just automation…
👉 It is part of your system architecture.
Treat it with the same care as application code.

Deploying a Node.js Application on Azure Using Bitbucket CI/CD Pipelines

YogitaKadam14 — Fri, 28 Feb 2025 08:52:05 +0000

In today's fast-paced software world, delivering updates quickly and reliably is crucial. Traditional deployment methods were slow, error-prone, and inconsistent, leading to frustrated developers and unhappy users. This is where CI/CD (Continuous Integration & Continuous Deployment) comes in a game changing approach that automates testing and deployment, ensuring smooth and efficient software delivery.

Why We Use CI/CD?
Traditional software deployment had challenges like:
❌ Manual Errors – Deployments were prone to mistakes.
⏳ Slow Releases – Weeks/months to deliver updates.
🔄 Inconsistent Environments – "Works on my machine" issues.
🚧 Difficult Rollbacks – Fixing bugs took too long.

How CI/CD Solves These Issues
✅ Automation – Code is tested & deployed without manual intervention.
⚡ Speed – Continuous updates, no waiting for big releases.
🔍 Consistency – Same environment for dev, test & production.
🔄 Quick Rollbacks – Issues? Revert to the last stable version easily.

Real-Life Example
Imagine an E-commerce App during Black Friday. A bug in the checkout process could mean huge revenue loss. With CI/CD:
🚀 Developers push a quick fix → ✅ Automated tests run → 🌍 Fix is deployed instantly without downtime → 💰 Sales continue smoothly!

In this blog, we'll explore how to implement a CI/CD pipeline using Bitbucket, automating deployments to Azure App Service to ensure seamless and hassle-free software delivery. 🚀

What We'll Cover in This Blog
In this guide, we’ll walk through setting up a CI/CD pipeline using Bitbucket Pipelines to deploy a Node.js application to Azure App Service.

🔹 Configuring the Azure Environment
🔹 Setting Up Bitbucket Pipelines
🔹 Deploying a Node.js App Automatically

Prerequisites

An Azure App Service has already been created.
Your Node.js application is hosted in a Bitbucket repository.
Basic knowledge of Azure and Bitbucket Pipelines.

Step 1: Configure the Azure Environment

1. Enable SCM Basic Auth Publishing Credentials
Go to your Azure App Service settings and enable SCM Basic Auth Publishing Credentials.

2. Create an Azure App Registration:
To securely deploy your app, create an Azure App Registration to generate credentials for authentication.

🔹 Navigate to Azure Portal and search for App registrations.
🔹 Click New Registration and provide a name for your app.
🔹 Generate a Client Secret under "Certificates & Secrets".
🔹 Note down the Application (Client) ID, Directory (Tenant) ID, and Client Secret Value for later use.

Refer to the snapshots below for details:

3. Assign the App registration as a contributor to the App Service.

Step 2: Set Up Bitbucket Pipelines
Create a bitbucket-pipelines.yml File: Add the following YAML configuration file to the root of your Bitbucket repository. This file defines the CI/CD pipeline for your Node.js app

# Bitbucket Pipeline for deploying a Node.js app to Azure App Service.
# This workflow runs build and security scans before deployment.
# Environment variables: AZURE_APP_ID, AZURE_PASSWORD, AZURE_TENANT_ID, AZURE_RESOURCE_GROUP, AZURE_APP_NAME.
# For advanced cases, please, follow examples from the pipe's README https://bitbucket.org/microsoft/azure-web-apps-deploy/src/1.0.3/README.md


image: node:18
pipelines:
  default:
    - parallel:
      - step:
          name: Install
          caches:
            - node
          script:
            - npm install
  branches:
    master:
      - parallel:
        - step:
            name: Build
            caches:
              - node
            script:            
              - npm run build              
              - apt update && apt install zip
            # Create a zip file with the build output
              - zip -r app-$BITBUCKET_BUILD_NUMBER.zip build package.json package-lock.json
            artifacts:
              - "*.zip"
        - step:
            name: Security Scan
            script:
              # Run a security scan for sensitive data.
              # See more security tools at https://bitbucket.org/product/features/pipelines/integrations?&category=security
              - pipe: atlassian/git-secrets-scan:0.5.1
      - step:
          name: Deploy to Production          
          deployment: Production
          script:
            - pipe: atlassian/azure-web-apps-deploy:1.0.1
              variables:
                AZURE_APP_ID: $AZURE_APP_ID
                AZURE_PASSWORD: $AZURE_PASSWORD
                AZURE_TENANT_ID: $AZURE_TENANT_ID
                AZURE_RESOURCE_GROUP: $AZURE_RESOURCE_GROUP
                AZURE_APP_NAME: $AZURE_APP_NAME
                ZIP_FILE: app-$BITBUCKET_BUILD_NUMBER.zip        
                DEBUG: 'true'

📝 Note:
DEBUG: 'true' enables detailed error logging to help diagnose deployment issues. Once your pipeline is stable and running smoothly, you can remove this variable to reduce unnecessary log output.

Step 3: Update the package.json File
Ensure your package.json includes the correct build script and paths:

{
  "name": "TestAPI",
  "version": "1.0.0",
  "description": "This is Test API",
  "main": "server.ts",
  "scripts": {
    "start": "node build/dist/server.js",
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsc -p ." 
  },
}

Step 4: Configure Environment Variables in Bitbucket
To securely pass Azure credentials to Bitbucket Pipelines:

🔹 Go to your Bitbucket repository.
🔹 Navigate to Repository settings → Repository variables.
🔹 Add the following variables:

AZURE_APP_ID: Application (Client) ID
AZURE_PASSWORD: Client Secret Value
AZURE_TENANT_ID: Directory (Tenant) ID.
AZURE_RESOURCE_GROUP: Name of the Azure resource group
AZURE_APP_NAME: Name of your Azure App Service

Step 4: Commit and Push Changes
Once you've configured everything, commit and push your code to Bitbucket.
Bitbucket Pipelines will automatically trigger the build and deploy process, ensuring your application is deployed to Azure App Service without manual intervention.

Conclusion
By following these steps, you've successfully set up a fully automated CI/CD pipeline for deploying a Node.js application from Bitbucket to Azure App Service.

✅ Automated Builds & Deployments
✅ Secure Authentication with Azure
✅ Seamless Integration & Fast Releases

With this setup, your application deployment becomes faster, more reliable, and hassle-free!

Next Steps🚀
Now that your CI/CD pipeline is up and running, here’s how you can further enhance it:

🔹 Add Unit & Integration Tests – Improve code quality by running automated tests before deployment.
🔹 Implement Staging & Production Environments – Deploy to a staging environment first, test, and then promote to production.
🔹 Enable Deployment Monitoring & Alerts – Use Azure Monitor or Application Insights to track deployments and get notified of failures.
🔹 Optimize Performance & Security – Perform performance profiling and security audits to keep your app fast and secure.
🔹 Containerize Your App with Docker – Consider deploying using Docker and Kubernetes for scalability.

Practical Approaches to Accurate Project Estimation

YogitaKadam14 — Fri, 13 Dec 2024 08:52:58 +0000

Accurate project estimation is essential for project planning, resource allocation, and managing stakeholder expectations. Yet, developers often encounter challenges when estimating tasks due to overlooked factors or assumptions like, "This is a small change—it won’t take long." This mindset often leads to underestimated timelines, unexpected roadblocks, and missed deadlines.

For instance, a developer might estimate 2 hours for a minor UI change but forget about essential tasks like code reviews, testing, deployment, or addressing dependencies. These oversights can quickly snowball, affecting the overall project timeline.

This guide aims to help developers, product managers, and stakeholders anticipate common pitfalls and adopt practical strategies for more accurate and realistic project estimates.

1. Requirement Understanding: Start with a Detailed Requirement Breakdown
Approach: Start by breaking down project requirements into smaller, manageable components. Understanding every detail will make it easier to assign accurate estimates to each part.
Example: For a user authentication feature, you could separate tasks into backend API, frontend form, validation, error handling, and testing.
Tip: The more granular you get with tasks, the easier it becomes to estimate each one accurately.

2. Project Design and Flow Diagrams: Visualize Task Sequences and Dependencies
Approach: Design diagrams and flow diagrams help illustrate the project’s structure, reveal dependencies, and map out task flows. Visualizing complex projects aids in spotting interdependencies and sequences, making estimation more accurate.
Example: For a user authentication system, a flow diagram could illustrate steps from login to logout, while a design diagram can highlight backend services, frontend components, and database interactions.
Tip: Tools like Lucidchart or Draw.io are useful for creating diagrams that clarify project design and execution flow.

3. Research and Learning Time
Approach: Include time for learning new technologies, tools, or languages involved in the project. Research might be needed for specific modules or third-party libraries.
Example: If using a new database like MongoDB, add time for understanding basic operations, querying, and best practices.
Tip: Include a small buffer for unanticipated learning challenges, particularly with less familiar tools.

4. Task Dependencies: Identify and Allocate Time Accordingly
Approach: Recognize dependencies between tasks to avoid project delays or bottlenecks. Sometimes, development tasks depend on others being completed first, which can affect timelines.
Example: Frontend development of a feature may depend on backend API readiness. If backend work takes two weeks, add buffer time for frontend work to avoid delays.
Tip: Clearly mapping out dependencies helps with task sequencing and ensures time is allocated for dependencies properly.

5. Testing and Debugging Time
Approach: Testing is essential but often underestimated. Factor in time for unit testing, integration testing, and debugging.
Example: If building a feature takes two days, consider adding another day for testing and bug fixes.
Tip: Bugs are inevitable; overestimate debugging time rather than assuming a bug-free process.

6. Include Code Reviews and Team Meetings
Approach: Account for the time spent on code reviews and team discussions, which are critical for quality and alignment.
Example: A 30-minute code review may stretch if significant feedback requires follow-up changes.
Tip: Add 1-2 hours per task for review and consider meeting times based on team structure.

7. Third-Party Integrations
Approach: Integrations, particularly with third-party tools, can have hidden complexities. Estimate additional time for integration setup, testing, and error handling.
Example: If integrating with a payment gateway, consider time for API documentation review, sandbox testing, and error-handling implementation.
Tip: Look up integration documentation and forums in advance to gauge potential issues.

8. Responsive Design Adjustments
Approach: Allocate time for testing and adjusting layouts and components across various devices and screen sizes.
Example: For a new web interface, add time for adjusting and testing on different mobile and tablet views.
Tip: Responsive design typically requires additional CSS adjustments and testing, so be proactive with time allocation.

9. Plan for Unexpected Issues (Buffer Time)
Approach: Use a buffer to handle unforeseen issues that might arise during development or testing.
Example: If a task is estimated to take 10 hours, add a 1-2 hour buffer for unexpected challenges.
Tip: A 10-20% buffer based on project complexity is ideal, especially for tasks involving new technologies.

10. Team Feedback: Review Estimates
Approach: Review estimates with teammates or stakeholders to ensure completeness and identify any missing factors.
Example: After initial estimation, consult with a senior team member who might identify overlooked dependencies.
Tip: Fresh perspectives often reveal hidden challenges or opportunities to refine estimates.

11. Deployment and Access Management
Approach: Allocate time for deployment configurations, testing, and setting up access control in production environments.
Example: For production deployment, estimate time for server setup, access control, and verifying that deployment is successful.
Tip: Post-deployment checks and multi-environment setups (e.g., QA, staging) can require additional time, so include this in estimates.

12. Code Repository Setup and Access
Approach: Factor in time for initial repository setup, branching, and access permissions.
Example: Setting up a new project repository on GitHub might involve branch protections, team permissions, and CI/CD configurations.
Tip: Streamlined setup here avoids access issues and supports smoother collaboration.

13. Documentation
Approach: Documentation is essential for project continuity and should be included in the estimate.
Example: After completing a feature, allow time for updating API documentation or user guides.
Tip: Allocate 1-2 hours for documentation per feature to prevent rushed or incomplete documentation.

14. Estimating Bug Fixes in an Existing Application (Especially When Unfamiliar)
Approach: When working with an unfamiliar codebase, plan carefully to avoid breaking existing functionality. Allocate time for bug investigation, cautious fixes, and regression testing.
Example: If fixing a bug in an authentication module, allocate time to trace dependencies and ensure no new issues arise in user profiles or session handling.
Tips:
Analyze the Bug Thoroughly: Start by replicating the bug in a safe environment. Analyze logs or error traces to understand the root cause.
Study Code Dependencies: Trace related services or components. Note dependencies to avoid breaking other areas.
Estimate Investigation Time: Time for code exploration might exceed actual fix time in an unfamiliar codebase. Estimate 1-2 hours based on complexity.
Incremental Fixes and Testing: Apply fixes incrementally, testing each change. Prioritize minimal effective fixes to reduce unintended side effects.
Buffer for Rollbacks: Sometimes, initial fixes may need rollbacks or adjustments. Plan time for testing and refinement across all affected modules.

Quick Reference: Estimation Checklist

Requirement Understanding
Project Design and Flow Diagrams
Research and Learning
Task Dependencies
Testing and Debugging
Code Reviews and Meetings
Third-Party Integrations
Responsive Design Adjustments
Buffer for Unexpected Issues
Team Feedback
Deployment and Access Management
Code Repository Setup and Access
Documentation
Estimating Bug Fixes in an Existing Application

Key Takeaways for Developers
Estimation is about preparation, not perfection. Use this checklist to anticipate potential challenges and cover all necessary tasks—from detailed breakdowns to bug fixes in legacy code.

By taking the time to understand requirements, account for dependencies, and include buffers for unexpected issues, developers can deliver on time while minimizing stress.

Remember: Start small, learn from experience, and refine your process.

5 Steps to Secure Passwordless Azure SQL Connections Using Node.js

YogitaKadam14 — Mon, 12 Aug 2024 11:31:16 +0000

Passwordless Authentication for Azure SQL Using Microsoft Entra ID

Introduction:
In today’s digital landscape, traditional password-based security systems are increasingly vulnerable to cyberattacks and data breaches. Passwords often serve as the weakest link in cybersecurity, exposing users to risks such as phishing, credential stuffing, and brute force attacks. To address these vulnerabilities, organizations are adopting passwordless authentication. This modern approach eliminates the need for passwords, significantly enhancing security by removing common password-related threats. Additionally, it simplifies the user experience by removing the need to remember complex passwords, thereby reducing the administrative burden of password management and improving overall system efficiency.

Azure SQL Authentication Options:

Traditional Methods:
Typically, we connect to Azure SQL using usernames and passwords. While these can be stored securely, they are still vulnerable to phishing, hacking, and other cyberattacks.
Passwordless Authentication:
Azure SQL allows passwordless connections through Microsoft Entra ID (formerly Azure Active Directory), reducing the reliance on passwords and leveraging secure tokens and identities instead.

Benefits of Passwordless Authentication:

Enhanced Security: Reduces the risk of phishing, brute force attacks, and credential stuffing by eliminating passwords.
Improved Compliance: Meets the requirements of various security regulations, such as GDPR and CCPA, which emphasize reducing password-related vulnerabilities.
Streamlined User Experience: Simplifies the login process, making it easier for users to access resources without managing complex passwords.

Setting Up Microsoft Entra ID for Passwordless Access:

Why Microsoft Entra ID?: It is Microsoft's cloud-based identity and access management service. It controls access to resources like Azure SQL, ensuring that only authorized users can connect.
How to Set It Up:
1. Ensure your Azure account is linked with Microsoft Entra ID.
2. Set up the necessary roles and permissions in Microsoft Entra ID to allow access to your Azure SQL databases.
3. Enable passwordless authentication methods in Microsoft Entra ID, such as multi-factor authentication (MFA).

Prerequisites:

Before setting up passwordless authentication, ensure you have:
An Azure subscription with the appropriate permissions.
A linked Microsoft Entra ID account.
Managed identities enabled for your Azure services (if required).
Visual Studio Code and the necessary Azure extensions installed.

High-level steps are used to connect to Azure SQL Database using passwordless connections

Step 1: Create an Azure Group

Add Members
Add Owners

Step 2:Configured SQL Server for authentication with Microsoft Entra ID

Enable the option: Allow Azure services and resources to access this selected server.

Step 3: Configure System Identity for the Backend App Service

Step 4: Create a SQL database User for the Identity and Assign Roles

CREATE USER "system-assigned-identity-name" FROM EXTERNAL PROVIDER; 
 
ALTER ROLE db_owner ADD MEMBER "system-assigned-identity-name"; 
---OR
ALTER ROLE db_datareader ADD MEMBER [system-assigned-identity-name];
ALTER ROLE db_datawriter ADD MEMBER [system-assigned-identity-name];
ALTER ROLE db_ddladmin ADD MEMBER [system-assigned-identity-name];

Step 5: Configure Your Database Connection for Passwordless Authentication
In Visual Studio Code, create a config.js file. Add the following mssql configuration code to enable passwordless authentication for your connection to Azure SQL Database.

Note: Set DB_AUTH_TYPE to 'azure-active-directory-default' for passwordless authentication.


require("dotenv").config();// Load environment variables from .env file
module.exports = {
    development: {
        dbConnectionString: {
            dialect: 'mssql',
            host: process.env.DB_HOST, //Update   
            database: process.env.DB_NAME, //Update
            dialectOptions: {
                authentication: {
                    type: process.env.DB_AUTH_TYPE, //Update
                },
                options: {
                    encrypt: true,
                    trustServerCertificate: true,
                    //Update 
                    "requestTimeout": Number(process.env.SEQUELIZE_TIMEOUT)
                },
            },
            pool: {
                max: 5,
                min: 0,
                acquire: Number(process.env.SEQUELIZE_TIMEOUT),
                idle: 10000
            },
        }
    }
};

Add the code to connect to Azure SQL Database using sequelize in Node.js

'use strict';
const fs = require('fs');
const path = require('path');
const Sequelize = require('sequelize');
const basename = path.basename(__filename);
const env = process.env.NODE_ENV || 'development';
const config = require(__dirname + '/../config/config')[env];
const db: {
    [key: string]: any
} = {};

module.exports = (async function sequelizeConnect() {

                const dbConnectionString = config.dbConnectionString;

                let sequelize: typeof Sequelize;
                //passing the dbConnectionConfig to the sequelize instance
                sequelize = new Sequelize(dbConnectionString);
                const files = fs
                    .readdirSync(__dirname)
                    .filter((file: string) => {
                        return (file.indexOf('.') !== 0) && (file !== basename) && (file.slice(-3) === '.ts' || file.slice(-3) === '.js');
                    });

                for (const file of files) {
                    const model = require(path.join(__dirname, file))(sequelize, Sequelize.DataTypes);
                    db[model.name] = model;
                }

                Object.keys(db).forEach(modelName => {
                    if (db[modelName].associate) {
                        db[modelName].associate(db);
                    }
                });

                db.sequelize = sequelize;
                db.Sequelize = Sequelize;

                return db;
})

The tedious package, which is used for connecting to SQL Server from Node.js, supports passwordless authentication starting from version 13.0.0. This version introduced support for Azure Active Directory (AAD) authentication, which includes passwordless authentication methods.

To use passwordless authentication with tedious, make sure you have at least version 13.0.0 or later installed. You can update your tedious package by running:

npm install tedious@latest

Running Locally: Setup with Visual Studio Code
Install Azure CLI on Windows

Install Azure Account Extension

Run the Command to log In

az login

Security Best Practices:

Conditional Access Policies: Implement conditional access policies in Microsoft Entra ID to add another layer of security, ensuring that only trusted devices and users can access your Azure SQL databases.
Enable Logging and Monitoring: Regularly monitor authentication events in Microsoft Entra ID to detect unusual activity and respond promptly to potential security threats. Additionally, enable auditing in Azure SQL Database to track access and changes effectively.

Use Cases:

High Compliance Industries:
Passwordless authentication is particularly beneficial in industries with strict compliance requirements, such as finance, healthcare, and government, where data protection is paramount. In these sectors, reducing the reliance on passwords helps minimize risks associated with data breaches and ensures compliance with regulatory standards.
Large User Bases:
Applications with large user bases can benefit from the streamlined login process. For instance, if an employee leaves the organization, the need to change and update passwords across multiple systems is eliminated, reducing administrative overhead and minimizing disruptions. This reduces support requests related to password resetting and enhances overall user satisfaction and security.

Troubleshooting Tips:

Common Issues: If you encounter connection failures, ensure that the correct roles and permissions are set in Microsoft Entra ID. Also, verify that the managed identity is properly configured and that the SQL Server settings allow Azure services to connect.
Diagnostic Tools: Utilize Azure's diagnostic tools, such as SQL Server logs and Azure Monitor, to troubleshoot and resolve issues quickly.

Further Reading and Resources:

Microsoft Entra ID Documentation
Azure SQL Database Security Best Practices
Using Managed Identities with Azure SQL
Passwordless connections for Azure services

Conclusion:

Passwordless authentication with Microsoft Entra ID offers a robust, secure, and user-friendly way to connect to Azure SQL databases. By following the steps outlined above and adhering to best practices, you can significantly reduce security risks and improve the efficiency of your system.

Start implementing passwordless authentication today to enhance your system’s security and streamline user access.

Shared Access Signature

YogitaKadam14 — Mon, 29 Apr 2024 08:07:01 +0000

A shared access signature (SAS) is a URI that grants restricted access rights to Azure Storage resources. You can provide a shared access signature to clients that you want to grant delegate access to certain storage account resources.

Types of shared access signatures:

User delegation SAS: A user delegation SAS applies to Blob storage only.
Service SAS: A service SAS delegates access to a resource in many of the Azure Storage services.
Account SAS: An account SAS delegates access to resources in one or more of the storage services.

When to implement shared access signatures

A common scenario where SAS is useful is a service where users read and write their data to their storage account.
When you copy a blob to another blob that resides in a different storage account, you must use an SAS to authorize access to the source blob. You can optionally use a SAS to authorize access to the destination blob as well.

How shared access signatures work?

SAS provides temporary, limited access to Azure Storage resources by granting specific permissions and duration through a generated token, ensuring secure and controlled sharing without exposing sensitive credentials.

Use Case: Secure Data Sharing

Scenario:
A company needs to securely share confidential documents stored in Azure Blob Storage with external partners for a limited time.

The settings below are configured on Azure Storage to restrict access for anonymous users from accessing the storage directly from the public network without a SAS (Shared Access Signature).

Note: The most flexible and secure way to use a service or account SAS is to associate the SAS tokens with a stored access policy.

Node js sample code to generate SAS URI:



import { Request, Response } from "express";
import {BlobServiceClient} from '@azure/storage-blob';
import azureStorage from "azure-storage";
require('dotenv').config()
async function  generateSASURL(req:Request,res:Response) {
    try
    {         
    //read the file name received from the client 
    const blobName:string = req.body.blobName; 
    const containerName:string =req.body.containerName;
    const sasUrlExpiryInMinutes:number= req.body.sasUrlExpiryInMinutes;  
      //Best practice: create time limits
      //const MINUTES:number = sasUrlExpiryInMinutes;
      const NOW = new Date();  
      // Best practice: set the start time a little before the current time to 
      // make sure any clock issues are avoided    
      const MINUTES_BEFORE_NOW = new Date(NOW.valueOf() - sasUrlExpiryInMinutes * 60 * 1000); 
      const MINUTES_AFTER_NOW = new Date(NOW.valueOf() + sasUrlExpiryInMinutes * 60 * 1000); 

      var sharedAccessPolicy = {
        AccessPolicy: {
            Permissions: "r",
            Start: MINUTES_BEFORE_NOW,
            Expiry: MINUTES_AFTER_NOWv
        }
    };

    const conStr:string = process.env.AZURE_STORAGE_CONNECTION_STRING || '';
    const blobService =  azureStorage.createBlobService(
      conStr
    );

    var sasToken = blobService.generateSharedAccessSignature(containerName, blobName, sharedAccessPolicy);
    var sasUrl=blobService.getUrl(containerName,blobName,sasToken); //shared access signature URL
    var url=blobService.getUrl(containerName,blobName) //Normal URL   
    return res.status(200).json({
        "sasUrl":sasUrl,
        "url":url
    });
    }
    catch{
      console.error(new Error('Error generating SAS URL, method- GenerateSASURL').stack)
      res.status(500).json({
        "error":new Error('Error generating SAS URL, method- GenerateSASURL').stack
    });
    }
}

SAS Configuration:
Define a shared access policy object specifying the permissions (Permissions), start time (Start), and expiry time (Expiry) for the SAS token.
Azure Blob Service Setup:
Retrieve the Azure Storage connection string from environment variables.
Create an Azure Blob Service client using the connection string.

Generate SAS Token:
Generate a shared access signature (SAS) token for the specified container and blob using the shared access policy.
Generate URLs:
Generate URLs for accessing the blob: one with the SAS token appended (sasUrl) and one without (url).

SAS URL comprises two components: The first part is the URI to the resource you wish to access. The second part is a SAS token, which you've generated to authorize access to that resource.

You can split the URI from the SAS token within a single URI like this:
URI: https://medicalrecords.blob.core.windows.net/patient-images/patient-116139-nq8z7f.jpg?
SAS token: sp=r&st=2020-01-20T11:42:32Z&se=2020-01-20T19:42:32Z&spr=https&sv=2019-02-02&sr=b&sig=SrW1HZ5Nb6MbRzTbXCaPm%2BJiSEn15tC91Y4umMPwVZs%3D

Component	Description
`sp=r`	Controls the access rights. The values can be `a` for add, `c` for create, `d` for delete, `l` for list, `r` for read, or `w` for write. This example is read only. The example `sp=acdlrw` grants all the available rights.
`st=2020-01-20T11:42:32Z`	The date and time when access starts.
`se=2020-01-20T19:42:32Z`	The date and time when access ends. This example grants eight hours of access.
`sv=2019-02-02`	The version of the storage API to use.
`sr=b`	The kind of storage being accessed. In this example, b is for blob.
`sig=SrW1HZ5Nb6MbRzTbXCaPm%2BJiSEn15tC91Y4umMPwVZs%3D`	The cryptographic signature.

For more details, refer to Implement shared access signatures
.

Top 10 Best Practices for Shared Access Signatures (SAS) in Azure Storage

Least Privilege: Grant only necessary permissions.
Short Expiry: Set short token expiry times.
Renewal and Rotation: Regularly renew and rotate tokens.
Restricted Scope: Limit tokens to specific resources.
Secure Transmission: Transmit tokens securely over HTTPS.
Monitoring and Logging: Monitor token usage and log activities.
Revocation Mechanism: Have a way to revoke tokens.
Stored Access Policies: Use stored policies for centralized management.
Token Scope Awareness: Educate users about token scope.
Regular Security Audits: Conduct periodic security audits

In conclusion, shared access signatures (SAS) in Azure Storage offers controlled access to resources, empowering users to manage permissions effectively. Understanding the different types of SAS and leveraging associated access policies ensures secure data sharing. The provided Node.js sample demonstrates SAS URL generation for secure blob access, enhancing data protection in Azure Storage.

Exception Handling in Node.js Applications using log4js

YogitaKadam14 — Fri, 02 Jun 2023 04:57:57 +0000

Exception handling plays a crucial role in ensuring the stability and reliability of Node.js applications. By effectively handling exceptions, developers can identify and address errors, improve debugging, and provide a smoother user experience. In this blog post, we will explore how to handle exceptions in a Node.js application using the popular logging library, log4js with customized configurations.

When logging messages, it is important to easily identify the log level, such as whether it is an error, warning, or information.

To use the Log4Js package, follow these basic steps:

1.Install the package by running the following command:

npm install log4js

You can find more information about the Log4js package on the npmjs.com website.

2.Create a new file called logger.ts and add the following code:

// Description: This file contains the logger configuration and custom logger functions
import { getLogger, configure } from 'log4js';
//configure logger
//type of appenders: console, file, dateFile, logLevelFilter, multiFile, stdout, stderr, cluster, log4js
//level of appenders: all, trace, debug, info, warn, error, fatal, mark, off
configure(
    {
        appenders: {          
            console: { type: "console" }
        },
        categories: {
            default: {
                appenders: ["console"],
                level: 'all'

            }
        }
    }
);
//get logger
const logger = getLogger();
//custom error logger
const errorLogger = (error: Error, functionName:string)=>{

    let responseErrorMessage = error.message;
    logger.error(`Function Name: ${functionName} \n Message: ${responseErrorMessage} \n Stack: ${error.stack}`)

}
//custom info logger
const infoLogger = (infoMessage: string, functionName:string)=>{

    logger.info(`Function Name: ${functionName} Message: ${infoMessage}`);

}
//custom warning logger
const warnLogger = (warnMessage: string, functionName:string)=>{

    logger.warn(`Function Name: ${functionName} Warning: ${warnMessage}`);    

}
export default {errorLogger,infoLogger,warnLogger}

This code sets up a logger configuration and defines three custom logger functions: errorLogger, infoLogger, and warnLogger. Here's a breakdown of the code:

• The code imports the getLogger and configure functions from the 'log4js' library.
• The configure function is called to set up the logger configuration. In this configuration, a single appender of type "console" is defined
• The logger configuration specifies that all log events should be appended to the console appender.
• The getLogger function is called to retrieve a logger instance
• The errorLogger function takes an Error object and a functionName string as parameters. It logs an error message, including the function name, error message, and stack trace.
• The infoLogger function takes an infoMessage string and a functionName string as parameters. It logs an info message, including the function name and info message.
• The warnLogger function takes a warnMessage string and a functionName string as parameters. It logs a warning message, including the function name and warning message
• Finally, the code exports an object containing the three custom logger functions: errorLogger, infoLogger, and warnLogger.

Overall, this code sets up a logging configuration using the log4js library and provides custom logger functions for logging errors, info messages, and warnings with additional context information like function names.

3.Use the logger in your function. Here is an example using logger.ts:

It logs various messages at different stages of execution using a custom logger object.

import { Request, Response } from "express";
import models from "../models"
import logger from "../log/logger";
const getContact = async (req: Request, res: Response) => {

    logger.infoLogger("Start", "getContact");

    let contactDetails: {count:number,
          rows:{
                 Id:string,  
                 LastName:string, 
                 MiddleName:string, 
                 FirstName:string, 
                 ContactNumber:string, 
                 Email:string}[]};
    try {
        const contactnumber=req.params.contactnumber
        contactDetails = await models.Contact.findAndCountAll({

            offset: 0,
            //limit: max,    
            attributes: [
            "Id",           
            "LastName",
            "MiddleName",
            "FirstName",            
            "ContactNumber",
            "Email"
            ],
            where: { IsActive: 1,ContactNumber:contactnumber }
        });
        if (contactDetails.count == 0) {
            logger.infoLogger("No data found", "getContact");
            logger.warnLogger( `No data found for contact number: ${contactnumber}`, "getContact");
            return res.status(204).json({ message: 'No data found' });
        }
        else
            return res.status(200).json({ data: contactDetails });
    }catch (error: any) {

        logger.errorLogger(error, "getContact");

        if (error.statusCode) {
            return res.status(error.statusCode).json({ message: error.message });
        } else {
            return res.status(500).json({message: `An unexpected error occurred. ${error.message}` });
        }

    }
}

4.Below is the expected output in various scenarios:

• When the data not found:
Logging level: Info
Color: Green
Output:

• When an unexpected error occurs (catch block):
Logging level: Error
Color: Red
Output:

• When a warning message is logged:
Logging level: Warning
Color: Yellow
Output:

To review logs on Azure, you can refer to the article Exception Handling, Logging, and Notifications in Azure App Services: A Comprehensive Guide for detailed instructions.

By following best practices and leveraging the power of log4js, developers can enhance their Node.js applications' overall quality and maintainability. Furthermore, the comprehensive guide on exception handling, logging, and notifications in Azure App Services provides valuable insights for managing logs in Azure environments. With these practices in place, developers can build robust and resilient Node.js applications that meet the highest standards of stability and reliability.

Exception Handling, Logging, and Notifications in Azure App Services: A Comprehensive Guide

YogitaKadam14 — Fri, 31 Mar 2023 07:09:53 +0000

Introduction
Azure App Services are cloud-based applications that enable developers to build, deploy, and manage applications on the cloud. As with any application, it is important to have the proper exception handling, logging, and notification practices in place to ensure the application runs smoothly and any issues can be quickly identified and resolved. In this blog post, we will discuss the best practices for exception handling, logging, and notifications for Azure App Services.

Exception Handling
Exception handling is one of the most important aspects of application development. It is important to properly handle exceptions to ensure the application runs smoothly and any unexpected errors can be quickly identified and resolved. When developing Azure App Services, it is important to use the Azure Application Insights feature to track and monitor application exceptions. This feature provides insight into application performance, errors, and exceptions and can help pinpoint the root cause of any issues.

Logging
Logging is an essential practice when developing applications, as it can provide valuable insight into how the application is performing and any potential issues that may arise.

Log Stream
Log Stream is a feature in Azure Monitor that allows users to quickly view and analyse log data from multiple sources in real-time. It allows users to quickly search and analyse log data, identify trends, and take action on any issues. Log Stream can help with troubleshooting, performance optimization, and security monitoring.

Diagnostics Settings
When developing Azure App Services, it is important to use the Azure Diagnostics feature to log application events, errors, and exceptions. This feature provides detailed logging.

Select the App Service from the list of services.
Select the Diagnostic Settings option from the left navigation pane.
Configure the settings including the type of logging and the frequency of logging.
Configure the type of metrics that should be collected, the metrics that should be collected, and the metrics that should be used to trigger alerts.
Configure the retention period for the collected data and the type of data that should be stored in the log files.
Azure Storage account is for Archive logs for audit, offline analysis or backup. Compared to using Azure Monitor Logs or a Log Analytics workspace, Storage is less expensive, and logs can be kept there indefinitely

Azure Application Insights
Azure Application Insights is a great tool for tracking and monitoring your application. It can provide detailed information about errors and exceptions, as well as performance metrics and other useful information.

For example, you can use Application Insights to monitor the performance of your web application. You can track the number of requests and response times, as well as the performance of individual requests. You can also track exceptions and errors, and get detailed information about when and where they occur.

Additionally, you can use Application Insights to monitor the performance of your backend services, such as databases and queues. You can track the number of requests and response times, as well as the performance of individual requests. You can also track exceptions and errors, and get detailed information about when and where they occur.

Alerts & Notifications
Alerts are typically sent out in response to a specific trigger, such as a critical system error.

Notifications are messages sent to one or more users to notify them that an alert has been created.

For more details please refer Azure app service monitoring and alerts.

Exception handling, logging, alerts and notifications are essential to the reliable operation of Azure App Services. With the right configuration and setup, these are the features can ensure that your services are operating efficiently and securely. This comprehensive guide provides an overview of each of these features, as well as basic instructions on how to configure them. With this guide, you'll be able to make sure that your Azure App Services are running smoothly and securely.

3rd Party Cookies

YogitaKadam14 — Sat, 31 Dec 2022 02:31:30 +0000

I am writing this blog because came across a scenario where I was using the social Login Microsoft, Google, and LinkedIn using passport strategy, and these Log-In doesn’t work when 3rd party cookies are disabled, and each browser has different settings to enable 3rd party cookies ref. Browser settings to enable 3rd party cookies. Below, I have listed a few points which I thought we should know about the 3rd party cookies.

Let's first understand what is cookies.
At their most basic, cookies are small files that websites send to your browser. They then track and monitor the sites you visit and your browsing activity on these pages. Retailers might use cookies to remember what items you've put in your online shopping cart, while news sites might use them to remember what stories you've clicked on in the past. Other sites might use cookies to remember your login information so that it automatically pops up when you visit the site’s log-in page.

What is Third Party Cookies?
Third-party cookies are cookies that are set by a website other than the one you are currently on. In my case, want to disable the social login button options when Third-party cookies are disabled and enabled social login buttons when cookies are enabled. Handled it using the code. Please, ref. First-party vs Third-party Cookies for more details

Why we required Third party cookies?
Third-party cookies are usually used to analyze your web activity. Since a third-party cookie is mainly interested in user behavior, it keeps track of the user’s internet activity. Once it recognizes you, it can store your browsing history. It is considered an effective way of targeted and personalized marketing.

The most common third-party entities are advertisers, marketers, and social media platforms.

Are third-party cookies safe?
Cookies are not necessarily a bad thing. The code behind them will not infect your computer, install adware or malware on your device, or alter your devices.

But you might not like the fact that third-party cookies track your online browsing. These cookies allow websites to track your activity even if you’re not using their sites. If you think that is an invasion of your online privacy, then you might want to disable cookies.

Should you enable or disable third-party cookies?
When you visit any website, it will store at least one cookie — a first-party cookie — on your browser. This cookie remembers your basic activity on the site.
Most sites store third-party cookies on your browser, too. If you want to keep social media companies, advertisers, and other website operators from tracking your online browsing, these are the cookies to disable.

Benefits of Third-Party Cookies
Convenience is a major one. A cookie that follows a user around the internet can allow them to take advantage of pre-filled address information on order forms, for instance. Websites can also get your location and serve you the most relevant information for your area.

Personalization is another major benefit. How would you get related videos on YouTube or related products on Amazon if your interests and browsing history couldn’t follow you around the web? People enjoy seeing things they have an interest in, and third-party cookies are the reason they can do so.

Relevant ads are an important aspect of these browser cookies. It’s not helpful for either a business or a consumer if the ads being shown have nothing to do with their needs, wants, or desires. It’s a waste of company money and it wastes the prospect's time as well.

With cookies, you can ensure that a person is seeing offers that are the most relevant to their life and goals. That’s a win-win. Most consumers agree – if they must see ads, they’d rather see relevant ones. 90% of consumers say that irrelevant messages from companies are annoying.

Drawbacks of Using Browser Cookies
The biggest problem that consumers have with third-party cookies is related to cookies and privacy: they feel their privacy is being invaded. How can cookies invade privacy? Cookies allow companies to track every website visited, marketers collect a lot of data about each person. This can be very uncomfortable for consumers, especially since this data can be accessed by almost anyone.

Even the cookies that allow for personalization aren’t without risk. There are security problems in some of the software that can allow outside parties to access name, address, and even credit card information if it’s stored in the browser.

Conclusion:
In the end, it’s important to use Third-Party cookies sensibly.

Best practices for Node.js

YogitaKadam14 — Thu, 06 Oct 2022 07:08:59 +0000

In this article I will cover best practices for writing Node.js

NodeJS has become tremendously popular and is one of the most popular runtime environments for web servers. It is an open source, a cross-platform runtime environment for developing server-side applications, or more precisely, code that run on a server.
Node.js is an asynchronous event-driven JavaScript runtime and is the most effective when building scalable network applications. Node.js is free of locks, so there's no chance to deadlock any process.

Project structure
Everything has to have its place in our application, and a folder is the perfect place to group common elements. In particular, we want to define a very important separation

Use HTTP Methods & API Routes
Use HTTP Status Codes Correctly
If something goes wrong while serving a request, you must set the correct status code for that in the response:

2xx, if everything was okay,
3xx, if the resource was moved,
4xx, if the request cannot be fulfilled because of a client error (like requesting a resource that does not exist),
5xx, if something went wrong on the API side (like an exception happened). If you are using Express, setting the status code is as easy as res.status(500).send({error: 'Internal server error happened'}). Similarly with Restify: res.status(201)

Use camelCase
It is recommended to use lowerCamelCase when naming constants, variables, and functions and UpperCamelCase (capital first letter as well) when naming classes.
This is universally accepted conventions and developers across the globe can easily identify and differentiate objects and classes when using this naming convention.

Use Environment Variables
A .env file is a plain text document. It should be placed in the root of your project. You specify key value pairs, and you can write single line comments using #. Here is an example how a .env file looks like:

Avoid callbacks - Use async-await
We can avoid the callback hell with the help of Promises. Promises in javascript are a way to handle asynchronous operations in Node.js. It allows us to return a value from an asynchronous function like synchronous functions. When we return something from an asynchronous method it returns a promise which can be used to consume the final value when it is available in the future with the help of then() method or await inside of async functions

Avoid Anonymous Functions

Named function can be re-used over an order again in other parts of the project as well and this reduces code redundancy.
If you find a bug in the code that creates an order, you fix that bug only in once place i.e. postOrderTasks() method and it will reflect in all places - saves time.

Use Refactoring of API calls
Refer Link: Refactoring of API calls

Confirm that your app restarts automatically
A dependency mistake can bring down your app even if you use the best error handling standards in development. Instead, use a process manager to ensure that the app recovers gracefully from a runtime fault or when the server fails.
Aside from that, there is another case in which you must restart your program. And that situation is if the entire service that you are running fails. In this instance, you want your program to continue as soon as possible. You can also utilize PM2 Keymetrics to manage your process.Ref. PM2 Keymetrics

Make use of Gzip compression
The server can use Gzip compression to compress the response before transmitting it to a web browser, reducing time lag and latency. This is one of the top NodeJS best practices in 2022-23.

Making the Server Restart Automatically After Updating a File
Every time when we make changes to the code, we have to restart the server to reflect those changes.
To avoid having to restart the server manually, let's install nodemon, an npm package that automatically restarts the server when changes are made to a file.
npm install -g nodemon

Use Const Over Let, Do Not Use Var
Before ES6, the var keyword was used to declare a variable in JavaScript
Variables declared using the var keyword are either globally or functionally scoped, they do not support block-level scope. This means that if a variable is defined in a loop or in an if statement it can be accessed outside the block and accidentally redefined leading to a buggy program. As a general rule, you should avoid using the var keyword.

Error Handling
To handle error in node.js we should know some key concepts like callback functions, Asynchronous functions like a promise, and async-await, try.. catch block, throw keyword, error object.

Add comments
A comment is a description of a program about how it works in a simple readable format. These are usually used at places where some additional clarity needs to be provided to the developer who is reading through the code.

Application testing
Implementing code quality testing at any project stage is never too late. Begin small and straightforward.

Create a Proper API Documentation
The following open-source projects can help you with creating documentation for your APIs:
APIBluePrint
Swagger

In this article, I have listed the best practices for Node.js development. These practices helps you to write better code for the Node.js app. You can use a combination of best Node.js practices.

WordPress Plugin

YogitaKadam14 — Tue, 05 Jul 2022 07:00:07 +0000

If we search WordPress plugin in google, we find that there are lots of free plugins available in the market. You can even create your own custom WordPress plugins. In this blog I will show you how to create a simple WordPress plugin, and how to begin your WordPress plugin development journey.

Why do we require to create our own plugins?
Creating your own instruments and effects is surely the best way to get a completely custom sound. WordPress plugins allow you to add custom features and offer a powerful way to add unique functionality to your website.

What is a WordPress Plugin?
WordPress plugins are like apps for your WordPress website. Just like apps on your phone, you can install plugins in WordPress to add new features.

Simple steps to create WordPress plugin
Before starting the development of a plugin, you should have the WordPress setup on your local environment or access to your site via FTP. Here I have created the plugin which will execute at the page load to display message. You can install WordPress on your local system using this link

Navigate to the WordPress plugins folder. It is almost always located at /wp-content/plugins
Create a new folder for your plugin with name my-first-plugin
Create the main PHP file for your plugin.
Setup your plugin's information
You will need to open that PHP file with your editor.
Program Your Plugin to add functions

This code hooks into “the_content” action that fires when WordPress renders the post content for your site. When that action fires, WordPress will call our “my_content_text” function that is defined below the “add_action” call.
Activate Plugin: Click on activate plugin
Browse WordPress site

For more details you can visit this link

Final Thoughts on WordPress Plugin Development
There are tons and tons of things you can do with plugins and almost as many ways you can create them. In this tutorial on WordPress plugin development, we explored how you can create a simple plugin from scratch.

My first deployment on Azure

YogitaKadam14 — Tue, 04 Jan 2022 14:11:44 +0000

To deploy your application on the Azure
You should have a Microsoft Azure Account. You can get a free account for one month.
Refer below link to create Azure account:
Azure Account

Azure offers a number of ways to host your application code. The term compute refers to the hosting model for the computing resources that your application runs on.

If you want to deploy your application on the managed platform by selecting the runtime, An App Service is the right choice.

Which service should you choose?
Azure Virtual Machine, which is considered as IaaS (Infrastructure as a Service) and the other one is Azure App Service, which is a PaaS (Platform as a Service). We will discuss which service is better for different use-cases, and what are the differences between these two services.

Azure Virtual Machine

Azure App Service

Azure Virtual Machines is detailed as "It provides on-demand, high-scale, secure, virtualized infrastructure".
Azure VMs are more expensive to run in comparison to Azure App Service.
Developers describe Azure App Service as "Build, deploy, and scale web apps on a fully managed platform". Quickly build, deploy, and scale web apps created with popular frameworks
Azure App Service requires much less managerial efforts in comparison to Azure Virtual Machines.
Azure App Services do not offer Pay-as-you-Go. Hence, you’re paying for the service plan, even if you’re not using it.
Azure App Service have constraints in comparison to Azure VMs in terms of scalability. Hence, Azure VMs are preferred for apps, which have scope to expand for future.
The development of app is much simpler and faster in Azure App Service.
Azure VMs offer developer more control over the environment. Like, one can’t choose underlying OS of VM in an Azure App Service.
There may be constraints for the support of certain programming languages on Azure App Service. In that case, one has to use Azure VM to create environment for the programming language.

Use below configuration for deployment:
For NodeJS Application:
Build provider: App Service Build Service
Runtime stack: Node
Version: Node 16 LTS
Operating System: Linux
Deployment: Bitbucket

Refer to the following link:
Deploying Your NodeJS App on Azure

For React Application:
Build provider: App Service Build Service
Runtime stack: .NET
Version: ASP.NET V4.8
Operating System: Windows
Deployment: FTP deployment using FileZilla

Refer to the following video link:
Deploy ReactJS application to Azure cloud using 3 different ways | FTP | Kudu | CI/CD DevOps

Note:

In App Service, application settings are variables passed as environment variables to the application code
.NET framework and IIS require a web.config file to identify application folder structure for navigation.

<configuration>
<system.webServer>
<staticContent>
    <mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>
    <rewrite>
      <rules>
        <rule name="Main Rule" stopProcessing="true">
                <match url=".*" />
                <conditions logicalGrouping="MatchAll">
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                </conditions>
                <action type="Rewrite" url="/" />
            </rule>
        </rules>
    </rewrite>
</system.webServer>
</configuration>

Conclusion
There is a lot to Azure. These are basic steps of the deploying React and NodeJS application on App services. Understanding of which service should you choose App Service or Virtual Machine for deployment?