DEV Community: Aamir Khan

Understanding JWT and Validating Tokens with Expiry Dates

Aamir Khan — Tue, 25 Jun 2024 08:54:04 +0000

JSON Web Tokens (JWT) are widely used for secure data transmission and authentication in modern web applications. This guide will provide an overview of JWT and demonstrate how to validate tokens with expiry dates, including examples with Microsoft Azure AD and Azure AD B2C tokens.

What is JWT?

JWT stands for JSON Web Token. It is a compact, URL-safe means of representing claims to be transferred between two parties. The token is digitally signed, so the information is verifiable and trusted.

Structure of JWT

A JWT consists of three parts separated by dots (.):

Header
Payload
Signature

Example:

xxxxx.yyyyy.zzzzz

Header

The header typically consists of two parts: the type of token (JWT) and the signing algorithm (e.g., HMAC SHA256 or RSA).

Example:

{
  "alg": "HS256",
  "typ": "JWT"
}

Payload

The payload contains the claims, which are statements about an entity (typically the user) and additional data. Common claims include sub (subject), name, and exp (expiration time).

Example:

{
  "sub": "1234567890",
  "name": "John Doe",
  "admin": true,
  "exp": 1516239022
}

Signature

The signature is created using the encoded header, the encoded payload, a secret, and the specified algorithm.

How JWT Works

Authentication: The server issues a token upon successful authentication.
Storage: The client stores the token, usually in sessionStorage.
Subsequent Requests: The client sends the token in the Authorization header of each request.
Verification: The server verifies the token's signature and decodes the payload to authorize the request.

Example with JavaScript

Let's see an example of creating, sending, and verifying a JWT in a Node.js application, including validating the token based on its expiry date.

Server Side (Node.js)

const jwt = require('jsonwebtoken');
const secretKey = 'your-256-bit-secret';

// Create a token
const token = jwt.sign(
  { 
    id: 1, 
    username: 'john.doe', 
    email: 'john.doe@example.com' 
  }, 
  secretKey, 
  { 
    algorithm: 'HS256', 
    expiresIn: '1h' // Token expires in 1 hour
  }
);

console.log(token);

Client Side (JavaScript)

// Store the token in sessionStorage
sessionStorage.setItem('token', 'your-generated-jwt-token');

// Send the token with a request
const token = sessionStorage.getItem('token');
fetch('/api/protected-endpoint', {
  method: 'GET',
  headers: {
    'Authorization': `Bearer ${token}`
  }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

Server Side (Node.js) - Verifying Token with Expiry Date

const jwt = require('jsonwebtoken');
const secretKey = 'your-256-bit-secret';

// Middleware to verify the token
const verifyToken = (req, res, next) => {
  const authHeader = req.headers['authorization'];
  if (authHeader) {
    const token = authHeader.split(' ')[1];
    jwt.verify(token, secretKey, (err, user) => {
      if (err) {
        if (err.name === 'TokenExpiredError') {
          return res.status(401).send('Token has expired');
        }
        return res.status(403).send('Invalid token');
      }
      req.user = user;
      next();
    });
  } else {
    res.status(401).send('Authorization header not found');
  }
};

// Protected route
app.get('/api/protected-endpoint', verifyToken, (req, res) => {
  res.json({ message: 'This is a protected endpoint', user: req.user });
});

Example with Microsoft (Azure AD) Token

Microsoft's Azure Active Directory (Azure AD) issues JWT tokens for authentication and authorization. Let's see how to acquire and verify an Azure AD token, including validating the token based on its expiry date.

Step 1: Acquiring an Azure AD Token

To acquire a token, you must authenticate against Azure AD. You can use Microsoft's msal library for this.

Client Side (JavaScript)

import * as msal from '@azure/msal-browser';

const msalConfig = {
  auth: {
    clientId: 'your-client-id',
    authority: 'https://login.microsoftonline.com/your-tenant-id',
    redirectUri: 'http://localhost:3000'
  }
};

const msalInstance = new msal.PublicClientApplication(msalConfig);

const loginRequest = {
  scopes: ["User.Read"]
};

msalInstance.loginPopup(loginRequest)
  .then(response => {
    console.log('Access Token:', response.accessToken);
    sessionStorage.setItem('msalToken', response.accessToken);
  })
  .catch(error => {
    console.error('Login failed:', error);
  });

Step 2: Sending the Token with Requests

Client Side (JavaScript)

const token = sessionStorage.getItem('msalToken');
fetch('/api/protected-endpoint', {
  method: 'GET',
  headers: {
    'Authorization': `Bearer ${token}`
  }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

Step 3: Verifying the Token on the Server

Server Side (Node.js) - Verifying Token with Expiry Date

const jwt = require('jsonwebtoken');
const jwksClient = require('jwks-rsa');

// Middleware to verify the token
const verifyAzureADToken = async (req, res, next) => {
  const authHeader = req.headers['authorization'];
  if (!authHeader) {
    return res.status(401).send('Authorization header not found');
  }

  const token = authHeader.split(' ')[1];
  const decodedToken = jwt.decode(token, { complete: true });

  if (!decodedToken) {
    return res.status(401).send('Invalid token');
  }

  const client = jwksClient({
    jwksUri: 'https://login.microsoftonline.com/your-tenant-id/discovery/v2.0/keys'
  });

  const kid = decodedToken.header.kid;
  client.getSigningKey(kid, (err, key) => {
    if (err) {
      return res.status(401).send('Unable to get signing key');
    }

    const signingKey = key.getPublicKey();
    jwt.verify(token, signingKey, (err, user) => {
      if (err) {
        if (err.name === 'TokenExpiredError') {
          return res.status(401).send('Token has expired');
        }
        return res.status(403).send('Invalid token');
      }
      req.user = user;
      next();
    });
  });
};

// Protected route
app.get('/api/protected-endpoint', verifyAzureADToken, (req, res) => {
  res.json({ message: 'This is a protected endpoint', user: req.user });
});

Example with Azure AD B2C

Azure AD B2C (Business to Consumer) is a cloud identity management solution for your consumer-facing web and mobile applications. It enables you to customize and control how customers sign up, sign in, and manage their profiles.

Step 1: Acquiring an Azure AD B2C Token

Client Side (JavaScript)

import * as msal from '@azure/msal-browser';

const msalConfig = {
  auth: {
    clientId: 'your-client-id',
    authority: 'https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/B2C_1_signupsignin1',
    redirectUri: 'http://localhost:3000'
  }
};

const msalInstance = new msal.PublicClientApplication(msalConfig);

const loginRequest = {
  scopes: ["https://your-tenant-name.onmicrosoft.com/api/read"]
};

msalInstance.loginPopup(loginRequest)
  .then(response => {
    console.log('Access Token:', response.accessToken);
    sessionStorage.setItem('b2cToken', response.accessToken);
  })
  .catch(error => {
    console.error('Login failed:', error);
  });

Step 2: Sending the Token with Requests

Client Side (JavaScript)

const token = sessionStorage.getItem('b2cToken');
fetch('/api/protected-endpoint', {
  method: 'GET',
  headers: {
    'Authorization': `Bearer ${token}`
  }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

Step 3: Verifying the Token on the Server

Server Side (Node.js) - Verifying Token with Expiry Date

const jwt = require('jsonwebtoken');
const jwksClient = require('jwks-rsa');

// Middleware to verify the token
const verifyB2CToken = async (req, res, next) => {
  const authHeader = req.headers['authorization'];
  if (!authHeader) {
    return res.status(401).send('Authorization header not found');
  }

  const token = authHeader.split(' ')[1];
  const decodedToken = jwt.decode(token, { complete: true });

  if

 (!decodedToken) {
    return res.status(401).send('Invalid token');
  }

  const client = jwksClient({
    jwksUri: 'https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/discovery/v2.0/keys'
  });

  const kid = decodedToken.header.kid;
  client.getSigningKey(kid, (err, key) => {
    if (err) {
      return res.status(401).send('Unable to get signing key');
    }

    const signingKey = key.getPublicKey();
    jwt.verify(token, signingKey, (err, user) => {
      if (err) {
        if (err.name === 'TokenExpiredError') {
          return res.status(401).send('Token has expired');
        }
        return res.status(403).send('Invalid token');
      }
      req.user = user;
      next();
    });
  });
};

// Protected route
app.get('/api/protected-endpoint', verifyB2CToken, (req, res) => {
  res.json({ message: 'This is a protected endpoint', user: req.user });
});

Conclusion

JWT provides a powerful and secure way to handle authentication and authorization in modern web applications. By understanding its structure and usage, you can efficiently implement JWT in your applications, including those integrating with Microsoft Azure AD and Azure AD B2C. This guide has shown you how to create, send, and verify JWTs in a Node.js environment, how to validate tokens based on their expiry date, and how to work with Azure AD and Azure AD B2C tokens using sessionStorage for client-side token storage.

Securely Update a PostgreSQL Database on Azure Using Azure DevOps Pipelines

Aamir Khan — Thu, 13 Jun 2024 13:16:46 +0000

In modern cloud environments, ensuring the security of your database credentials while maintaining automated CI/CD workflows is crucial. In this guide, we'll walk you through the process of using Azure DevOps pipelines to securely update and modify a PostgreSQL database hosted on Azure. We'll leverage Azure Key Vault to securely store and retrieve your database credentials during the pipeline execution.

Prerequisites

Before we start, ensure you have the following:

An Azure DevOps account and project.
An Azure subscription with a PostgreSQL database set up.
An Azure Key Vault to store your PostgreSQL credentials.
SQL scripts ready for modifying your PostgreSQL database.

Step 1: Store Secrets in Azure Key Vault

First, securely store your PostgreSQL username and password in Azure Key Vault.

Navigate to your Azure Key Vault in the Azure portal.
Go to the Secrets section and add two secrets:
- PGUSER: Your PostgreSQL username.
- PGPASSWORD: Your PostgreSQL password.

Step 2: Set Up Azure Service Connection in Azure DevOps

Next, set up a service connection in Azure DevOps to allow access to your Azure resources.

Go to your Azure DevOps project.
Navigate to Project Settings > Service connections.
Create a new service connection for Azure Resource Manager.
Select the appropriate subscription and resource group that contains your Key Vault.
Grant the service connection access to the Key Vault.

Step 3: Configure Key Vault Access Policy

Ensure Azure DevOps has permission to read the secrets from your Key Vault.

Navigate to your Azure Key Vault in the Azure portal.
Under Access policies, add a new access policy.
Select the Get permission for secrets.
Choose the service principal associated with your Azure DevOps service connection.

Step 4: Define the Pipeline in YAML

Now, define your pipeline in YAML to automate the process of updating your PostgreSQL database.

Here's an example of the YAML pipeline definition:

trigger:
- main

pool:
  vmImage: 'ubuntu-latest'

variables:
  PGHOST: 'your-postgresql-server.postgres.database.azure.com'
  PGDATABASE: 'your-database-name'

steps:
- task: UsePythonVersion@0
  inputs:
    versionSpec: '3.x'
    addToPath: true

- task: AzureKeyVault@1
  inputs:
    azureSubscription: '<your-service-connection-name>'
    KeyVaultName: '<your-key-vault-name>'
    SecretsFilter: 'PGUSER,PGPASSWORD'

- script: |
    sudo apt-get update
    sudo apt-get install -y postgresql-client
  displayName: 'Install PostgreSQL Client'

- script: |
    psql "sslmode=require host=$PGHOST dbname=$PGDATABASE user=$(PGUSER) password=$(PGPASSWORD)" -f path/to/your/script.sql
  displayName: 'Run SQL Script'
  env:
    PGPASSWORD: $(PGPASSWORD)

Explanation of YAML Pipeline

Trigger:
- The pipeline triggers on changes to the main branch.
Pool:
- Specifies the VM image to use for the pipeline.
Variables:
- Defines the PostgreSQL host and database name.
UsePythonVersion Task:
- Ensures Python is available in the pipeline (optional step depending on further needs).
AzureKeyVault Task:
- Fetches the PGUSER and PGPASSWORD secrets from the specified Key Vault using the defined service connection.
Install PostgreSQL Client:
- Installs the PostgreSQL client on the build agent.
Run SQL Script:
- Uses the psql command to execute the SQL script, passing the retrieved PostgreSQL user and password as environment variables.

Step 5: Securely Reference Secrets

By using the AzureKeyVault task, the secrets PGUSER and PGPASSWORD are securely retrieved and can be used in subsequent steps within the pipeline. Ensure the names used in SecretsFilter match the secret names in Azure Key Vault.

Step 6: Commit and Run the Pipeline

Commit your changes to the repository.
Go to Pipelines and select your pipeline.
Run the pipeline.

Conclusion

By following these steps, you can securely automate the process of updating and modifying your PostgreSQL database hosted on Azure using Azure DevOps pipelines. Leveraging Azure Key Vault ensures that your database credentials are securely managed, enhancing the security of your CI/CD process. With this setup, you can maintain a seamless and secure workflow, ensuring that your database modifications are consistently applied without exposing sensitive information.

Deploying a Vue or React App Using Azure Static Web Apps and Azure DevOps

Aamir Khan — Sun, 02 Jun 2024 15:46:46 +0000

Deploying a frontend application with Azure Static Web Apps integrated with Azure DevOps leverages the power of continuous integration and continuous deployment (CI/CD). This guide will walk you through the detailed steps to achieve a seamless deployment of your Vue or React application.

Step 1: Log into Azure Portal

Access the Azure Portal.
Navigate to App Services and select Static Web App.

Step 2: Select or Create a Resource Group

Choose an existing resource group if available.
To create a new resource group, click on Create new. Use a clear and consistent naming convention (e.g., rg-myproject-prod).

Step 3: Configure Static Web App

Enter a unique name for your Static Web App.
Choose the appropriate hosting plan:
- Free
- Standard
- Dedicated Click Compare plans to understand the differences and select the best option.

Step 4: Set Up Deployment with Azure DevOps

Under Deployment details, select Azure DevOps.
Authenticate and choose your Azure DevOps organization.
Select the project, repository, and branch for the deployment.

Step 5: Configure Build Details

Select from the available build presets or configure a custom build preset.
Define the App location:
- / if the code is in the root directory
- /app if the code is in a folder named app
Specify the API location:
- /api if you have Azure Functions code in an api folder.
Set the Output location:
- For example, if the build output is in build within the app directory, set it to build.

Step 6: Advanced Deployment Settings

If uncertain about some deployment details, select Other to allow post-deployment adjustments.
Click Next: Advanced to choose the region for Azure Functions and configure staging environments.

Step 7: Add Tags and Review

Add relevant tags for resource management and tracking.
Click Next to review all configurations.
If everything is correct, click Create to initiate the deployment.

Step 8: Deployment Process

You will be redirected to a deployment page.
Wait for the deployment to complete. This can take a few minutes.
Once completed, a notification saying "Your Deployment is complete" will appear.
Click Go to Resource to navigate to your newly created Static Web App.

Step 9: Verify Azure DevOps Pipeline

Navigate to your Azure DevOps project.
Inspect the pipeline for any failures or issues.
Click on Deployment history to view Azure DevOps pipeline runs.
Your repository will automatically be added with a YAML file. Review and modify this file to:
- Add deployment approval checks.
- Configure different deployment slots (e.g., staging and production).
- To add a staging slot, include deployment_environment: staging under the AzureStaticWebApp@0 task in the YAML file.

Step 10: Verify and Access Your Deployed App

Once the pipeline run is successful, return to the Azure portal.
Navigate to Static Web Apps and select your deployed application.
In the Overview section, click on the provided URL to view your web application.

Conclusion

Deploying a Vue or React application using Azure Static Web Apps combined with Azure DevOps provides a robust CI/CD pipeline, ensuring your app remains up-to-date with the latest code changes. This integration facilitates streamlined deployments, efficient resource management, and enhanced collaboration within your development team.

References

This comprehensive deployment approach not only simplifies the process but also ensures a scalable and maintainable solution for modern web applications.

Sample `.yaml` for reference

name: Azure Static Web Apps CI/CD

pr:
  branches:
    include:
      - main
trigger:
  branches:
    include:
      - main

jobs:
- job: build_and_deploy_job
  displayName: Build and Deploy Job
  condition: or(eq(variables['Build.Reason'], 'Manual'),or(eq(variables['Build.Reason'], 'PullRequest'),eq(variables['Build.Reason'], 'IndividualCI')))
  pool:
    vmImage: ubuntu-latest
  variables:
  - group: Azure-Static-Web-Apps
  steps:
  - checkout: self
    submodules: true
  - task: AzureStaticWebApp@0
    inputs:
      azure_static_web_apps_api_token: $(AZURE_STATIC_WEB_APPS_API_TOKEN_DELIGHTFUL_BAY_02378850F)
###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
      app_location: "/" # App source code path
      api_location: "" # Api source code path - optional
      output_location: "dist" # Built app content directory - optional

How to Create, Configure, and Manage a Self-Hosted Agent in Azure DevOps

Aamir Khan — Sun, 02 Jun 2024 15:37:41 +0000

In the intricate realm of DevOps, flexibility and granular control over your build and deployment processes are essential. While Azure DevOps offers robust cloud-hosted agents, there are scenarios where self-hosted agents become indispensable. Whether it’s for specific tool integrations, customized configurations, or compliance with stringent security policies, self-hosted agents provide the ultimate control. This guide will walk you through setting up a self-hosted agent in Azure DevOps, enriched with best practices, detailed steps, and management tips.

Prerequisites

Before diving in, ensure you have the following prerequisites:

Azure DevOps Account: Create one at Azure DevOps if you haven’t already.
Agent Machine: A physical or virtual machine running Windows, macOS, or Linux.
Network and Permissions: Ensure the machine has internet access and administrative permissions to install software.

Step 1: Create a Personal Access Token (PAT)

To authenticate your self-hosted agent with Azure DevOps, you need a Personal Access Token (PAT).

Navigate to your Azure DevOps organization settings.
Select "Personal Access Tokens" under the "Security" tab.
Click on "New Token".
Set the appropriate scopes (e.g., Agent Pools (read, manage)) and create the token.
Copy the token and store it securely.

Step 2: Download the Agent Package

On your agent machine:

Navigate to your Azure DevOps project.
Go to Project Settings > Agent pools.
Select the desired agent pool or create a new one.
Click on New Agent.
Download the appropriate agent package for your operating system.

Step 3: Configure the Agent

On Windows:

Extract the downloaded zip file.
Open Command Prompt and navigate to the extracted directory.
Run config.cmd.
Provide the server URL (e.g., https://dev.azure.com/yourorganization).
Paste the PAT when prompted.
Configure the agent with the default options or customize as needed.
Run the agent by executing run.cmd.

On Linux:

Download the file

wget https://vstsagentpackage.azureedge.net/agent/3.239.1/vsts-agent-osx-x64-3.239.1.tar.gz

Extract the downloaded tar.gz file:
```
tar zxvf vsts-agent-linux-x64-*.tar.gz
```
Navigate to the extracted directory:
```
cd vsts-agent-linux-x64
```
Run the configuration script:
```
./config.sh
```
Provide the server URL and PAT when prompted.
Configure the agent, then start it:
```
./svc.sh install
./svc.sh start
```

On macOS:

Extract the downloaded tar.gz file:
```
tar zxvf vsts-agent-osx-x64-*.tar.gz
```
Navigate to the extracted directory:
```
cd vsts-agent-osx-x64
```
Run the configuration script:
```
./config.sh
```
Provide the server URL and PAT when prompted.
Configure the agent, then start it:
```
./svc.sh install
./svc.sh start
```

Step 4: Verify Agent Configuration

Back in Azure DevOps:

Navigate to "Project Settings" > "Agent Pools".
Select your pool and check if the new agent is listed and online.

Managing the Agent

Removing the Agent

If you need to remove the agent from your pool:

Stop the Agent:
- On Windows: Run svc.sh stop or manually stop the service from the Services app.
- On Linux/macOS: Run ./svc.sh stop.
Unconfigure the Agent:
- Navigate to the agent's directory and run the unconfiguration command:
  - On Windows: config.cmd remove
  - On Linux/macOS: ./config.sh remove
Delete the Agent Directory:
- Once unconfigured, you can safely delete the agent's directory to free up space.

Reconfiguring the Agent

To reconfigure an existing agent:

Navigate to the Agent Directory:
- If you haven’t deleted the agent directory, navigate back to it.
Run the Configuration Command:
- On Windows: config.cmd
- On Linux/macOS: ./config.sh
Follow the Configuration Steps:
- Provide the server URL and PAT when prompted.
- Customize the agent settings as needed.
Start the Agent:
- On Windows: Run run.cmd or start the service from the Services app.
- On Linux/macOS: Run ./svc.sh start.

Best Practices

Security: Regularly rotate your PATs and ensure they have the least privilege necessary.
Maintenance: Keep the agent machine updated with the latest security patches and software updates.
Scalability: For large teams or complex pipelines, consider setting up multiple agents to distribute the workload.
Monitoring: Utilize Azure Monitor or other monitoring tools to keep an eye on the health and performance of your self-hosted agents.

Conclusion

Setting up, configuring, and managing a self-hosted agent in Azure DevOps empowers you with greater control and customization of your CI/CD pipelines. It’s a straightforward process that opens up a world of possibilities for optimizing your development workflow. Whether you're integrating specific tools, enhancing security, or boosting performance, a self-hosted agent is a powerful addition to your DevOps toolkit.

Happy DevOps-ing!

Javascript Basics

Aamir Khan — Tue, 11 Jan 2022 10:05:37 +0000

Spread Operator

const boo = [1, 2]
const foo = [3, 4]
const zoo = [...boo, ...foo]
console.log(zoo)
// prints [ 1, 2, 3, 4]

Arrow Function

const arrow = (a, b) => a + b
console.log(arrow(2, 10))
// prints 12

Function with Default Parameters

function fundef(a = 10) {
    console.log(a)
}
fundef() // prints 10
fundef(29) // prints 29

Template literals (Template strings)

const word1 = 'Hello'
const word2 = `${word1} World`
console.log(word2)
// prints "Hello World"

String includes()

console.log('orange'.includes('ge')); // prints true
console.log('orange'.includes('zz')); // prints false

String repeat()

console.log('ab'.repeat(4))
// prints "abababab"

String startsWith()

console.log('orange'.includes('or')); // prints true;
console.log('orange'.includes('ge')); // prints false;

Destructing Array

let [a, b] = [1, 2]
console.log(a); // prints 1
console.log(b); // prints 2

Destructing Object

let obj = {
    a1: 10,
    b2: 20
};
let { a1, b2 } = obj;
console.log(a1); // prints 10
console.log(b2); // prints 20

Object.assign()

const obj1 = { q: 12 }
const obj2 = { a: 33 }
const obj3 = Object.assign({}, obj1, obj2)
console.log(obj3); // prints { q:12, a: 33 }

Destructuring Nested Objects

const item = {
    device: "iPadPro",
    brand: "apple",
    year: 2020,
    accessories: {
        pencil: "2ndGen",
        charger: "30W",
    }
}
const { accessories: { pencil, charger }, device } = item
console.log(device, pencil, charger); 
// prints "iPadPro 2ndGen 30W"

Spread Operator

const v1 = {
    firstName: "Web",
    lastName: "Developer"
}
const v2 = {
    ...v1,
    lastName: "Tips",
    sex: "NA"
}
console.log(v1); 
// prints { firstName: 'Web', lastName: 'Developer' }

console.log(v2); 
// prints { firstName: 'Web', lastName: 'Tips', sex: 'NA' }

DEV Community: Aamir Khan

Understanding JWT and Validating Tokens with Expiry Dates

What is JWT?

Structure of JWT

Header

Payload

Signature

How JWT Works

Example with JavaScript

Example with Microsoft (Azure AD) Token

Example with Azure AD B2C

Conclusion

Securely Update a PostgreSQL Database on Azure Using Azure DevOps Pipelines

Prerequisites

Step 1: Store Secrets in Azure Key Vault

Step 2: Set Up Azure Service Connection in Azure DevOps

Step 3: Configure Key Vault Access Policy

Step 4: Define the Pipeline in YAML

Explanation of YAML Pipeline

Step 5: Securely Reference Secrets

Step 6: Commit and Run the Pipeline

Conclusion

Deploying a Vue or React App Using Azure Static Web Apps and Azure DevOps

Step 1: Log into Azure Portal

Step 2: Select or Create a Resource Group

Step 3: Configure Static Web App

Step 4: Set Up Deployment with Azure DevOps

Step 5: Configure Build Details

Step 6: Advanced Deployment Settings

Step 7: Add Tags and Review

Step 8: Deployment Process

Step 9: Verify Azure DevOps Pipeline

Step 10: Verify and Access Your Deployed App

Conclusion

References

Sample .yaml for reference

How to Create, Configure, and Manage a Self-Hosted Agent in Azure DevOps

Prerequisites

Step 1: Create a Personal Access Token (PAT)

Step 2: Download the Agent Package

Step 3: Configure the Agent

On Windows:

On Linux:

On macOS:

Step 4: Verify Agent Configuration

Managing the Agent

Removing the Agent

Reconfiguring the Agent

Best Practices

Conclusion

Javascript Basics

Sample `.yaml` for reference