Pinter Computing – Knowledge Base for IT Professionals, Teachers and Astronauts

Debugging web applications in the Visual Studio Code Integrated Browser

Visual Studio Code version 1.112.0 introduced the Integrated Browser that supports web application debugging entirely within Visual Studio Code.

To set up the debugging configuration see Integratee Browser

Debugging Vitest JavaScript and TypeScript unit tests

Node.js has multiple unit testing frameworks, one of the most popular for web applications is Vitest. If a unit test fails, debugging is the best way to find the problem. To debug Vitest JavaScript and TypeScript unit tests in Visual Studio Code

Set the breakpoint

In the unit test file set the breakpoint at the failing line by clicking the margin of the code

Open the JavaScript Debug Terminal

Press CTRL-SHIFT-P (CMD-SHIFT-P on Mac) and on the top of the screen select JavaScript Debug Terminal
In the dropdown on the top select the directory to open the terminal in

Start the debugger

In the terminal window execute the command

cd PATH_TO_THE_APPLICATION && pnpm vitest run app/routes/THE_UNIT_TESTFILE_NAME.ts -t "THE_NAME_OF_THE_UNIT_TEST_IN_THE_it_STATEMENT"

When the test reaches the breakpoint, the execution stops, and the variable values are available by hovering over them and on the left side of the screen.

Set up Easy Auth with Microsoft Azure Entra ID

The Microsoft Azure Entra ID provides federated authentication and authorization services for applications running in the Azure Cloud. Easy Auth enables application to use Single Sign On (SSO) services transparent to the user to detect the identity of the user of the application. To set up Easy Auth

Open the Microsoft Azure management portal at https://portal.azure.com/

There are two ways to set up Easy Auth for an Azure Container App: automatically from the Container App or manually using Entra ID by an administrator.

Automatic configuration ( does not require Azure Cloud account admin rights)

Configure the authentication

On the Azure Container App page in the Security section select Authentication
On the page select the Add Identity Provider button
In the list select Microsoft as the identity provider
Configure the identity provider. Set the client secret expiration date
- To require users to authenticate when thay use the application elect Require authentication and for web applications leave HTTP 302 selected
- To allow users to access the application without the login page, select Allow unauthenticated access. If this is an internal application and the users have already authenticated to access the network, the user information will be included in the web request header.
Click the Next: Permissions button to configure the Microsoft Graph permissions
Keep the User.Read permission
Click the Add button to save the settings
It takes a minute to generate all objects.
The App (client) ID is on the Authentication page of the Security tab

Get the tenant ID

Install the Azure CLI
In the Terminal execute
az account show
The Tenant ID is displayed in the output

Manual configuration by an Azure Cloud account admin

Register the application

On the main page select the Microsoft Entra ID icon
Click the Add item in the header and select App Registration
Enter the display name of the application. If the application does not use Azure Entra as the authentication provider, leave the Redirect URI empty and click the Register button

Set the permissions

Make sure the Microsoft Graph User.Read permission is enabled

On the left side open the Manage menu and select API permissions
Make sure the Microsoft Graph User.Read permission is enabled
If the Microsoft Graph User.Read permission is not enabled
- Click the Add a permission option
- Select the Microsoft Graph option
- Select Delegated permissions
- In the User section enable User.Read permission
- Click the Add permission button at the bottom of the page
Click the Grant admin-consent for … button
Click the Yes button
The status should be Granted for …

Use the Easy Auth feature in your application

Configure your Azure Container Apps application to use Easy Auth

Copy the Application (client) ID and Directory (tenant) ID from the Overview page

In the Azure Container Apps deployment script update the application to use the Easy Auth feature with the authTenantId and authClientId values extracted above:

# Entra ID issuer URL for built-in authentication (Easy Auth)
authIssuer="https://login.microsoftonline.com/${authTenantId}/v2.0"            

# Enable Entra ID (Azure AD) built-in authentication (Easy Auth)
            # This injects the X-MS-CLIENT-PRINCIPAL-NAME header with the user's UPN on every authenticated request.
            echo "Configuring Entra ID authentication..."
            az containerapp auth microsoft update \
                --name $applicationName \
                --resource-group $resourceGroupName \
                --client-id $authClientId \
                --issuer $authIssuer \
                --yes

Extract the user information in the application

In the loader() function of the React Router 7 (Remix) web application read the “x-ms-client-principal-name” header value. It will contain the email address of the user.

export async function loader({ request }: Route.LoaderArgs) {
  let userName = "";

  // 1. Check for Azure AD / Entra ID auth header (production)
  const principalName = request.headers.get("x-ms-client-principal-name");
}

For more information on configuring Azure Container Apps for Easy Auth see Authentication and authorization in Azure Container Apps

Debugging React Web Applications

React web applications run code at two places.

Server side

First the server executes the server side code to access databases, call APIs and other backend resources usually to retrieve data. This is coded in the loader() and action() functions in the React Router (formerly Remix) framework.
Depending on the specific React framework it may performs Server Side Rendering (SSR) to generate the HTML that the browser can quickly display to the user without putting much load on the client device.

Client side

The browser executes the client side code and displays the web page. This is coded in the remaining exported function, like
export function FileUploader()

As we can see, our application runs at two separate locations, so we need to debug them, at those places too.

Debugging the server side code

To debug the server side code, we can start the application in the Visual Studio Code Debugger

and set breakpoints in the code editor margin

If we picked the correct function, and the code really runs on the server side, the execution will stop when it reaches that point. If the breakpoint is ignored, most likely that function is executed in the browser, so we need to debug it there.

Debugging the client side code

To debug the code that runs in the browser, we use the same Debugger in Visual Studio Code,

but set the breakpoint in the Developer Tools of the Chrome browser. When the application started in the Visual Studio Code debugger

Click the link to open the local URL with the default browser. IN this example we use Google Chrome to run the site and debug the client side code.
Press F12 to open the Developer Tools
On the Sources tab select the program file to debug and click the margin to set the breakpoint
When the code execution reaches that point, the application will stop, so you can investigate variable values, step through instructions with F10. See the debug panel in the upper right corner for other functions.

Running MSSQL Server in a local Docker container

If the MSSQL Server is not needed all the time on the workstation, we can run it in a Docker container. It allows us to easily upgrade the server version and shut it down when it is not used. To set up MSSQL Server in a Docker container we will follow the steps in Nawaz Dhandala’ excellent article at How to Run SQL Server in a Windows Docker Container

Install the Docker Desktop application from https://www.docker.com/products/docker-desktop/

Start the MSSQL Server

We will start the MSSQL server in a Docker container. This script sets up a volume for the database, so when the container is stopped, or destroyed, the data stays on the host’s hard drive. The detached mode keeps the container running in the background. We will use a Linux container, as it has smaller memory and CPU requirements, and runs faster. In the port argument the first number specifies the outside port, the second number the inside port. To run multiple MSSQL server instances on the same host, increment the first number to use a unique number, like 1434. In a terminal execute

docker run -d \
  --name sqlserver \
  -e "ACCEPT_EULA=Y" \
  -e "MSSQL_SA_PASSWORD=TheSA#Databas4ServerPassword" \
  -e "MSSQL_PID=Developer" \
  -p 1433:1433 \
  -v sqlserver-data:/var/opt/mssql \
  mcr.microsoft.com/mssql/server:2022-latest

Test the MSSQL server

To test the server from inside the container we can remote into the container to execute SQL commands from the command line.

# Remote into the MSSQL Server container and start the sqlcmd command line tool
docker exec -it sqlserver opt/mssql-tools18/bin/sqlcmd -S localhost -U sa -P "TheSA#Databas4ServerPassword" -C

To test the server from the workstation, we can connect to it from outside. To test from the command line install the sqlcmd commadn line tool and execute

# Or install sqlcmd locally and connect to the mapped port
sqlcmd -S localhost,1433 -U sa -P "TheSA#Databas4ServerPassword"

Connect to the server

To connect to the server from Microsoft SQL Server Management Studio, use the following settings. This example shows how to specify the port in the server name field using a comma. If we use the default 1433 port, it is not necessary to include it in the server name.

Automated database initialization

If we use the MSSQL server mainly for testing it is very useful to script the database initialization. This way we can always recreate the entire data infrastructure by running a script.

Create a Dockerfile to build a custom image that includes the initialization script

# Dockerfile - to build an MSSQL Server image with automatic database setup
FROM mcr.microsoft.com/mssql/server:2022-latest

# Switch to the root user for file operations
USER root

# Create a directory in the image for the initialization scripts
RUN mkdir -p /docker-entrypoint-initdb

# Copy the SQL initialization scripts from the init-scripts subdirectory of the workstation
COPY ./init-scripts/ /docker-entrypoint-initdb/

# Copy the entrypoint wrapper script from the  current directory of the workstation
COPY ./entrypoint.sh /entrypoint.sh
RUN chmod +x /entrypoint.sh

# Switch back to the mssql user
USER mssql

# Environment variables with defaults
ENV ACCEPT_EULA=Y
ENV MSSQL_PID=Developer

# When the container starts. execute the entrypoint.sh bash script
ENTRYPOINT ["/entrypoint.sh"]

Create the entrypoint.sh bash script in the same directory to execute the initialization scripts

#!/bin/bash
# entrypoint.sh - Start the MSSQL Server and run the init scripts

# Start SQL Server in the background
/opt/mssql/bin/sqlservr &
SQLSERVER_PID=$!

# Wait for SQL Server to become available
echo "Waiting for SQL Server to start..."
for i in {1..60}; do
    /opt/mssql-tools18/bin/sqlcmd -S localhost -U sa -P "$MSSQL_SA_PASSWORD" -C -Q "SELECT 1" > /dev/null 2>&1
    if [ $? -eq 0 ]; then
        echo "SQL Server is ready."
        break
    fi
    sleep 1
done

# Run the initialization scripts in the docker-entrypoint-initdb subdirectory of the container
for script in /docker-entrypoint-initdb/*.sql; do
    if [ -f "$script" ]; then
        echo "Running $script..."
        /opt/mssql-tools18/bin/sqlcmd -S localhost -U sa -P "$MSSQL_SA_PASSWORD" -C -i "$script"
    fi
done

echo "Initialization complete."

# Keep the container running by waiting on the SQL Server process
wait $SQLSERVER_PID

In the init-scripts subdirectory of the workstation create the SQL script to initialize the database and call it create-database.sql

-- init-scripts/01-create-database.sql
-- Create the application database
IF NOT EXISTS (SELECT name FROM sys.databases WHERE name = 'MyDB')
BEGIN
    CREATE DATABASE MyDB;
END
GO

USE MyDB;
GO

-- Create tables
CREATE TABLE Tasks(
    Id INT PRIMARY KEY IDENTITY(1,1),
    TaskName NVARCHAR(50) NOT NULL UNIQUE,
    Description NVARCHAR(100) NOT NULL,
    CreatedAt DATETIME2 DEFAULT GETUTCDATE()
);
GO

CREATE TABLE Data(
    Id INT PRIMARY KEY IDENTITY(1,1),
    TaskId INT FOREIGN KEY REFERENCES Tasks(Id),
    Count INT NOT NULL,
    Status NVARCHAR(20) DEFAULT 'pending',
    CreatedAt DATETIME2 DEFAULT GETUTCDATE()
);
GO

Build the custom MSSQL Server image and run it

Execute the scrip in the directory where the Dockerfile is located

docker build -t myapp-sqlserver .

Run the custom container

docker run -d  --name myapp-db  -e "MSSQL_SA_PASSWORD=TheSA#Databas4ServerPassword"  -p 1433:1433  myapp-sqlserver

Using Kiro Sandbox to run AI Agents and MCP servers in a secure environment

MCP servers provide standardized tools for AI agents to access providers and services, like GitHub, AWS, Azure. If MCP servers run unchecked on the workstation, those have full access to the filesystem. MCP Servers can cause catastrophic disasters, like deleting all files form the hard drive.

Kiro provides a sandbox to securely run MCP Servers in an isolated environment. Credentials are stored outside of the sandbox, MCP Servers can only access them through Kiro.

To run Kiro and MCP Serves on the workstation install the Docker Desktop application from https://www.docker.com/products/docker-desktop/

For more information

See https://kiro.dev/

An interesting post on the Kiro demo at Supercharging Kiro with Docker Sandboxes and MCP Catalog

Using AgentCraft

Log into Claude CLI

As AgentCraft uses your Claude Pro or Max subscription, first, you need to log into Claude CLI.

Open a terminal in the project folder and start Claude CLI with

claude

In the Claude CLI enter

/login

Follow the instructions to authorize Claude CLI to use your Anthropic subscription and paste the token from the browser window into the CLI.

Run AgentCraft

In a terminal navigate to the project folder
Execute the command

npx @idosal/agentcraft

The AgentCraft UI opens in your default web browser

Approving actions

If Manual approval is selected in the lower right corner (the button is hidden behind the thick fancy border), AgentCraft will ask for approval.

To approve the action

In the Claude CLI press enter to move the process forward
Claude CLI will ask for permission and execute the command of AgentCraft

Installing Claude AI

Install the Claude CLI

In a terminal execute

irm https://claude.ai/install.ps1 | iex

The Claude Code installation will check your system path environment variable, and if missing it will ask you to add the following to it:

C:\Users\YOUR_USER_NAME.local\bin

Start Claude CLI

Open a terminal in the project folder
Execute

claude

Configure Claude AI

Select the look in the terminal light/dark mode
Select Claude account with subscription. You need at least the Pro subscription to use Claude Code.
The Claude authorization page opens in your default web browser.
Claude CLI displays the message
Login successful. Press Enter to continue…

Installing AgentCraft

AgentCraft is an AI Orchestrator with Real Time Strategy Game user interface.

It uses Claude Code CLI to access your Pro or Max Claude agent subscription. It does not need to know any tokens or credentials. To use AgentCraft, first, you need start Claude CLI and uses its infrastructure to connect to Claude Code.

Install Claude Code CLI

See Installing Claude AI

Install Node.js

AgentCraft is a Node.js package it requires Node.js version 18 or higher from https://nodejs.org/en/download

Run AgentCraft

To run AgentCraft directly from the NPM registry, execute the command in a terminal. This will always run the latest available version without a need for update.

npx @idosal/agentcraft

This is an NPM package for running AI agents in your project folder. It allows them to interact with your local files in that location. The user interface opens in a your default web browser.

Advanced use cases

To start AgentCraft in the background

npx @idosal/agentcraft start -d

To stop the server in the background

npx @idosal/agentcraft stop

Cannot connect to local MSSQL Server from Node.js

The default MSSQL server installation only enables the Shared Memory network protocol for connection.

Node.js can only connect using TCP/IP protocol. The error message is

Failed to connect to localhost/…. Error: Failed to connect to localhost:1433 – Could not connect (sequence) Failed to connect to localhost:1433 – Could not connect (sequence) ConnectionError: Failed to connect to localhost:1433 – Could not connect (sequence)

Enable the TCP/IP protocol

To be able to connect to a local MSSQL Server from a Node.js application, we need to enable the TCP/IP protocol.

Open the SQL Server Configuration Manager as administrator
Right-click the SQL Server Configuration Manager item in the start menu, select More, and click the Run as administrator option
In the SQL Server Network Configuration select Protocols for MSSQL SERVER, and double-click the TCP/IP option. Set the Enabled value to Yes
The dialog box reminds us to restart the MSSQL Server for the change to take effect

Restart the MSSQL Server

On the left side select SQL Server Services, right-click MSSQL Server and select Restart