Knowledge Base for IT Professionals, Teachers and Astronauts
Once the mono repo is configured, we can install dependencies and build applications from the top level using the filter.
pnpm -r installpnpm -r buildpnpm --filter MY_APP buildpnpm --filter MY_APP devIf your user account cannot access certain folders or files, you can recursively set the owner.
icacls "C:\THE_TOP_DIRECTORY" /inheritance:e /grant "MY_USER_NAME:(OI)(CI)F" /Ticacls "C:\THE_TOP_DIRECTORY" /reset /TIf you are planning to develop multiple applications working together, using the same technology, it is advantageous to place all of them in the same Git repository. This way you can use relative paths to refer to shared functions to access the same database, React components, and images to make the pages look consistent. As all are in the same repository, the CI/CD pipeline will also find those during application building and testing.
If you use Node.js packages, use PNPM for package management to rationalize the node modules and store them in the top level node_modules directory and use symbolic links to point to those from other locations. See Install pnpm.
To set up the mono repo for multiple Node.js applications
Create the root directory of the repository and the apps and packages subdirectories.
mkdir -p MY_APP_SUITE
cd MY_APP_SUITE
mkdir -p apps
mkdir -p packagesThis is the minimum you should have for any Node.js project to exclude secrets and libraries
.DS_Store
.env
/node_modules/
# React Router
/.react-router/
/build/Set the versions of node and pnpm in the file below and save it in the root of the repository
{
"name": "MY_APP_SUITE_NAME",
"version": "1.0.0",
"private": true,
"description": "MY DESCRIPTION",
"main": "index.js",
"scripts": {
},
"keywords": [],
"author": "MY NAME",
"dependencies": {
},
"devDependencies": {
},
"config": {
},
"engines": {
"node": ">=24.11.0",
"pnpm": ">=10.15.1"
},
"packageManager": "pnpm@10.15.1"
}This file tells PNPM where the applications and shared packages will be to be able to reuse node-packages.
** tells PNPM to search for package.json files recursively.
packages:
- "apps/**"
- "packages/**"If you already have existing applications, copy their directory structures into the apps directory and delete the node_modules directories. PNPM will recreate those and create symbolic links to point to the top level node_modules directory.
To create a new React Router web application, open a terminal in the apps directory and follow the instructions at Creating a new React Router application.
As we use PNPM to rationalize the node modules for all applications, do not install the node modules in the individual application directories. Once the application structure been created open a terminal in the root of the mono repo and execute
pnpm installBased on the packages list in the pnpm-workspace.yaml file, PNPM will install all necessary node modules for all applications and packages in the entire workspace, which is the current mono repo.
Figma make can generate web applications with AI assistance. To download and run the generated web application on your local computer
pnpm run devTry to load it in an incognito / Private window
Open http://localhost:PORT/... in a brand new private window.
curl test
In a Windows or in WSL:
curl -v http://localhost:8081/
Who owns the port
In a Windows PowerShell window with Admin rights:
netstat -abno | findstr :8081In a Windows PowerShell window with Admin rights:
tasklist /FI "PID eq <PID from above>"In WSL (if wslrelay.exe is involved):
sudo ss -lntp | grep 8081
sudo lsof -i :8081To kill the processes in WSL, use the PIDs returned by the command above
sudo kill PID1 PID2WARNING: To permanently disable the docker and docker.socket in WSL you may execute the following commands, but maybe those processes are necessary for the normal operation of the WSL system.
# 1. Disable Docker and its socket so they don't start automatically
sudo systemctl disable docker.service docker.socket
# 2. Stop the socket right now so nothing can auto-start dockerd in this session
sudo systemctl stop docker.socket
# 3. Sanity check
systemctl status docker
systemctl status docker.socketpnpm is a Node Package Manager and Node Version Manager to install and manage multiple Node.js version and a central repository of node modules
Uninstall Node.js in Settings/ Apps / Installed Apps
Open a PowerShell terminal and execute
Invoke-WebRequest https://get.pnpm.io/install.ps1 -UseBasicParsing | Invoke-ExpressionIMPORTANT: Close and re-open all terminals and Visual Studio Code for the Path changes to take effect
Create an alias for PNPM in PowerShell. In an Administrator PowerShell window execute
notepad $profile.AllUsersAllHostsSave the following in the file
set-alias -name pn -value pnpmCreate an alias for the Bash terminal. In a terminal execute
code C:\Users\MY_USER_NAME\.bashrcSave the following in the file
alias pn=pnpm
Install the latest LTS (Long Term Support) version of the Node.js framework
pnpm env use --global ltstsup is a fast TypeScript bundler that gains popularity. To install it as a dev dependency in the current project, in the root of the repo execute:
pnpm add tsup -DInstall the development tools
See Install pnpm
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_NAMEIf you want to create the Git repository on a higher level, answer NO to the Initialize a new git repository? question.
If you want to use PNPM as node package manager, answer NO to the Install dependencies with npm? question and issue thepnpm install -r
command in the root folder of the repository to only have one real copy of the node modules. PNPM creates symbolic links from subdirectories to refer to the one file instance to save space on the hard drive.
To run the web application, in the application root directory execute
cd MY_APPLICATION_NAME
pnpm i
pnpm run devTo change your Linux password, in the Linux terminal execute
passwdYou will be asked for the current password and the new password.
If you forgot your Linux password, you can reset it from Windows.
wsl -u rootwsl -d <DistroName> -u rootpasswd <username>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.
wsl --installwsl.exe --list --onlinewsl --install -d MY_DISTRIBUTION_NAMEThe 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.
Install the Windows Terminal from the Microsoft App Store
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
Remote Development extension pack
The installation will also install the following extensions
In the Linux terminal execute
for OS update
sudo apt-get updateinstall wget and ca-certificates to be able to retrieve content from web servers
sudo apt-get install wget ca-certificatesGit is usually installed in the Linux distribution, update it to the latest version with
sudo apt-get install gitgit config --global user.name "Your Name"
git config --global user.email "youremail@domain.com"sudo apt install ghInstall the native Git credential manager in WSL
curl -sSL https://aka.ms/gcm/linux-install-source.sh | sudo bashdotnet tool install -g git-credential-managerIMPORTANT: For the change to take effect, close and open the WSL Linux terminal.
git --version; git credential-manager --versiongit-credential-manager configure
git config --global --replace-all credential.hel
per "/mnt/c/Program Files/Git/mingw64/libexec/git-core/git-credential-wincred.exe"For more information on Git line ending auto conversion see Resolving Git line ending issues in WSL (resulting in many modified files)
To set up the Credential Provider for the repository you use see credential.provider
Download and install Git from Git for Windows
In the terminal execute
winget install --id GitHub.cliIMPORTANT: 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.
In Windows execute
git config --global credential.helper wincredIn the GitHub Web interface create new Personal Access Tokens, one for Windows and one for WSL with the following scopes
gh auth loginFor more information see Set up a WSL development environment
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.
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.
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'A Task is a packaged script that can be used as a step within a job:
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
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:
Stages hold related jobs together. It can represent
Triggers tells the pipeline to run. It can be based on
Gatekeeper before the stage can proceed. The pipeline execution pauses until the approval arrives. It can be