Install pnpm

pnpm is a Node Package Manager and Node Version Manager to install and manage multiple Node.js version and a central repository of node modules

First uninstall

nvm

Node.js

On Windows

Uninstall Node.js in Settings/ Apps / Installed Apps

Install pnpm

Open a PowerShell terminal and execute

Invoke-WebRequest https://get.pnpm.io/install.ps1 -UseBasicParsing | Invoke-Expression

IMPORTANT: Close the terminal (or the entire Visual Studio Code if you used the integrated terminal) for the Path changes to take effect

Create an alias for PNPM in PowerShell. In an Administrator PowerShell window execute

 notepad $profile.AllUsersAllHosts

Save the following in the file

set-alias -name pn -value pnpm

Create an alias for the Bash terminal. In a terminal execute

code C:\Users\MY_USER_NAME\.bashrc

Save the following in the file

alias pn=pnpm

Install Node.js

Install the latest LTS (Long Term Support) version of the Node.js framework

pnpm env use --global lts

Creating a new React Router application

Prerequisites

Install the development tools

Visual Studio Code

pnpm

See Install pnpm

Create the new application

To create a new React Router web application create a directory for the project and open a terminal and execute

npx create-react-router@latest MY_APPLICATION_NAME

Run the application

To run the web application, in the application root directory execute

cd MY_APPLICATION_NAME
pnpm i
pnpm run dev

Managing passwords in Windows Susbsystem for Linux (WSL)

To change the Linux password

To change your Linux password, in the Linux terminal execute

passwd

You will be asked for the current password and the new password.

If you forgot the Linux password

If you forgot your Linux password, you can reset it from Windows.

  • In Windows PowerShell enter the Linux distribution root account with the command
 wsl -u root
  • If you have multiple Linux distributions in your WSL, specify the distribution name too
wsl -d <DistroName> -u root
  • Once the Linux root level access opened, change the password of the user with
passwd <username>

Installing the Windows Subsystem for Linux (WSL)

WSL enables Windows computers to concurrently run Windows and Linux at the same time. Modern software development and deployment usually depends on Linux tools and commands. To be able to run a Linux container on a Windows workstation, we need the availability of the Linux Kernel.

To install Windows Subsystem for Linux (WSL)

To use the default Ubuntu distribution

  • Open a PowerShell terminal as Administrator and execute the command
    wsl --install

To install another distribution

  • Open a PowerShell terminal as Administrator and execute the command to get the list of available distributions
    wsl.exe --list --online
  • Install the desired distribution
    wsl --install -d MY_DISTRIBUTION_NAME

Create the Linux user

The installer will create a Linux user. By default it will use your Windows user name. Enter a password and retype it.

Create a default Unix user account: MY_USER_NAME
New password:
Retype new password:

Reboot the computer for the changes to take effect.

Configuration

Terminal

Install the Windows Terminal from the Microsoft App Store

Code editor

Configure Visual Studio Code to be able to access and debug in the Linux file system.

For more on this see Get started using Visual Studio Code with Windows Subsystem for Linux

Installation
  • Install Visual Studio Code on Windows, not in the WSL file system
Extensions

Remote Development extension pack

The installation will also install the following extensions

  • WSL
  • Dev Containers

Update the Linux distribution

In the Linux terminal execute

for OS update

sudo apt-get update

install wget and ca-certificates to be able to retrieve content from web servers

sudo apt-get install wget ca-certificates

Git

Install Git in WSL

Git is usually installed in the Linux distribution, update it to the latest version with

sudo apt-get install git
Configure Git in WSL
git config --global user.name "Your Name"
git config --global user.email "youremail@domain.com"
Install GitHub CLI in WSL
sudo apt install gh
Install the Git Credential Manager in WSL

Install the native Git credential manager in WSL

curl -sSL https://aka.ms/gcm/linux-install-source.sh | sudo bash
Install the Git Credential Manager in WSL
dotnet tool install -g git-credential-manager

IMPORTANT: For the change to take effect, close and open the WSL Linux terminal.

Verify the Git and Git Credential Manager installation in WSL
git --version; git credential-manager --version
Configure the Git Credential Manager in WSL
git-credential-manager configure
git config --global --replace-all  credential.hel
per "/mnt/c/Program Files/Git/mingw64/libexec/git-core/git-credential-wincred.exe"
Line ending auto conversion

For more information on Git line ending auto conversion see Resolving Git line ending issues in WSL (resulting in many modified files)

Credential Provider in WSL

To set up the Credential Provider for the repository you use see credential.provider

Install Git in Windows

Download and install Git from Git for Windows

Install the GitHub CLI on Windows

In the terminal execute

winget install --id GitHub.cli

IMPORTANT: For the path changes to take effect close and re-open the terminal window, or close and re-open Visual Studio Code if you use the integrated terminal.

Share the credentials between the Windows and WSL Git instances

In Windows execute

 git config --global credential.helper wincred
Create GitHub personal access tokens

In the GitHub Web interface create new Personal Access Tokens, one for Windows and one for WSL with the following scopes

  • repo
  • workflow
  • read:org
Authenticate in GitHub in Windows
 gh auth login

For more information see Set up a WSL development environment

Microsoft Azure Pipelines

Azure pipelines support the CI/CD (Continuous Integration, Continuous Deployment), the fully automated Continuous Delivery process.

Agents, either hosted by Microsoft, or self-hosted on the client’s infrastructure, execute the yaml scripts.

Steps

The smallest unit of work in the Azure Pipeline. Each step is one action in a job. A Step can be a Script or a Task.

Script

A Script is a command written in a scripting language to be executed as a step of a job.

Running a Bash Script

steps:
- script: echo "Hello, World!"
  displayName: 'Script to say Hello'
Task

A Task is a packaged script that can be used as a step within a job:

  • Built-in tasks from Azure Pipeline
  • Custom scripts written in PowerShell, Bash, Python or other languages
  • Third-party tasks from the Azure DevOps Marketplace

Running a Task, to execute an Azure CLI command with attributes

steps:
- task: AzureCLI@2
  displayName: 'Run Azure CLI Command'
  inputs:
    azureSubscription: 'MyAzureSubscription' # Service connection to Azure
    scriptType: 'bash'                     # Specify the script type (bash or ps)
    scriptLocation: 'inlineScript'          # Define the script location
    inlineScript: |                         # Start the inline script
      echo "Listing all resources in the resource group..."
      az resource list --resource-group MyResourceGroup

Jobs

The job is a single phase of the pipeline executing multiple steps. Jobs can run in parallel or in sequence if those depend on each other. It has its own context and workspace, so variables and files created in one job are kept separate from each other. This allows the easier troubleshooting of the process. Typical steps are:

  • Building code
  • Running tests

Stages

Stages hold related jobs together. It can represent

  • Environments, like
    • Development,
    • QA,
    • Production,
  • or Related jobs, like
    • Build,
    • Test,
    • Deploy.

Triggers

Triggers tells the pipeline to run. It can be based on

  • Events, like
    • A commit to a repository or
    • A pull request
  • or Schedules
    • To run at specific times, like end of the day.

Approval

Gatekeeper before the stage can proceed. The pipeline execution pauses until the approval arrives. It can be

  • Manual (like human approval is required before deployment to Production)
  • Automatic (like only during business hours, or when automated tests are passed)

DevOps Workflow

DevOps is the combination of two areas of information technology: Development and Operations. DevOps engineers work very closely with software developers and operation engineers to fully automate the creation and configuration of the cloud infrastructure and the build, testing and deployment of the applications. The best DevOps engineers come from software development and have a good understanding of operating systems, networking and data storage technologies.

CI/CD Pipelines

There are multiple interpretations of the origin of the acronym. The one I prefer explains CI/CD (Continuous Integration and Continuous Deployment), together Continuous Delivery pipelines, as the building, testing, deployment and configuration of applications. It can operate on-premises and cloud environments.

Continuous Integration (CI)

Continuous Integration automates the

  • Building
  • Testing

of the software. This allows developers to frequently merge code changes into the central repository to build and test the result of small updates. It is much easier to found and correct an error in a small change, than in a large, significant modification. This provides frequent feedback of on the quality of the code and allows stakeholders to follow the development process.

Continuous Deployment (CD)

The goal is to ensure the rapid and reliable release and deployment of the software to production. Automates the

  • Configuration
  • Deployment

of the application. Usually every merged change is automatically deployed to the Development environment, so it is available for human testing any time. The deployment to higher environments (QA, UAT, Production) can be automatic or manual.

Microsoft Azure CLI

Use the terminal to interact with the Azure Cloud

Installation

Latest instructions at it from bit.ly/AzureCLI

At the time of writing to install the CLI on Windows, execute the command in PowerShell

winget install --exact --id Microsoft.AzureCLI

Restart PowerShell to refresh the updated “path” value and found the newly installed tool: az

Extensions

Azure DevOps Extension – Adds DevOps specific functionality. To install execute in the terminal

az extension add --name azure-devops

Configuration

Enable tab completion

To autocomplete command names when tou press the Tab key, update or create the PowerShell Profile. In the terminal execute

notepad $PROFILE

If the file does not exist, Notepad will ask you to create it. When the popup is displayed, click Yes.

Save the following in the file

Register-ArgumentCompleter -Native -CommandName az -ScriptBlock {
    param($commandName, $wordToComplete, $cursorPosition)
    $completion_file = New-TemporaryFile
    $env:ARGCOMPLETE_USE_TEMPFILES = 1
    $env:_ARGCOMPLETE_STDOUT_FILENAME = $completion_file
    $env:COMP_LINE = $wordToComplete
    $env:COMP_POINT = $cursorPosition
    $env:_ARGCOMPLETE = 1
    $env:_ARGCOMPLETE_SUPPRESS_SPACE = 0
    $env:_ARGCOMPLETE_IFS = "`n"
    $env:_ARGCOMPLETE_SHELL = 'powershell'
    az 2>&1 | Out-Null
    Get-Content $completion_file | Sort-Object | ForEach-Object {
        [System.Management.Automation.CompletionResult]::new($_, $_, "ParameterValue", $_)
    }
    Remove-Item $completion_file, Env:\_ARGCOMPLETE_STDOUT_FILENAME, Env:\ARGCOMPLETE_USE_TEMPFILES, Env:\COMP_LINE, Env:\COMP_POINT, Env:\_ARGCOMPLETE, Env:\_ARGCOMPLETE_SUPPRESS_SPACE, Env:\_ARGCOMPLETE_IFS, Env:\_ARGCOMPLETE_SHELL
}
Set-PSReadlineKeyHandler -Key Tab -Function MenuComplete
Set the default organization

When the default organization is set, we don’t have to include it in every command. In the terminal execute

 az devops configure --defaults organization=https://dev.azure.com/MY_ORGANIZATION

Log in into Azure DevOps

To log into Azure DevOps in PowerShell execute

az login

Select your user account and click Continue

Troubleshooting

If you get the error message

Retrieving tenants and subscriptions for the selection…
Authentication failed against tenant …
This tenant has been blocked due to inactivity.

The tenant your Entra ID (user ID) is associated with was on idle for more than 20 days, or you have never signed up for the free Azure service. If you don’t have a paid subscription, to create a new Tenant, first sign up for a free Azure account. See Configure your Microsoft Azure environment and try to log in again.

Microsoft Azure authentication types

Authentication types

To log into Azure DevOps services use the Microsoft Entra ID – formerly known as Azure Active Directory (Azure AD). The Microsoft Identity platform provides two primary authentication patterns for Azure DevOps access.

User delegation (OAuth)

We will use this for the Azure DevOps CLI. Created for user facing tools, like web and desktop applications, command line interfaces. Formerly known as User Accounts. See Build Azure DevOps integrations with Microsoft Entra OAuth apps

Application identity (service principals and managed identities)

For background services, CI/CD pipelines, automated tools. Formerly known as Service Accounts.. See Use service principals and managed identities in Azure DevOps

Microsoft Azure DevOps tools

The Azure DevOps tools provide access to the Azure environment to create, manage and monitor Azure Cloud resources

Azure DevOps Web Portal

All DevOps operations are available through the Azure DevOps Web Portal. To access it navigate to dev.azure.com

Azure Command Line Interface

Use the terminal to interact with the Azure Cloud. See Microsoft Azure CLI

IDEs and Editors

The Azure connectivity is available in

  • Visual Studio
  • Visual Studio Code