Quickly Run NodeJS Demos in Vanilla Windows Sandbox featuring Scoop

TL;DR – this article describes how Windows Sandbox can be used to prepare a well known environment for demonstrations, tutorials, tests etc. Scoop is a great package manager for quickly installing Windows packages (Node runtime, Git client, VS Code editor, …) into the Sandbox. I have applied these concepts to a series of somewhat complex demos around the Playwright library – but the generic approach is applicable in many circumstances.

Windows Sandbox to me is a light weight Windows 10 virtual machine that I can quickly start and stop and use to install and run programs. The Windows Sandbox provides a well defined, clean environment that is fresh every time it is started. Inside the Sandbox, any user can create an isolated environment for working through a tutorial or the labs in a workshop or for doing R&D to stuff they do not want (yet) in their regular Windows environment or that should not depend on the exact layout and composition of their Windows environment.

I have created a number of quite nice demonstrations of using Playwright – the NodeJS library for automating browser interactions with web applications and websites. In order for my colleagues or any interested party to quickly try out my demonstrations – using Windows Sandbox is a nice vehicle. Because the sandbox has the same starting point for any user, my instructions will work for every user. And because the sandbox is isolated from the main Windows environment there will not be undue interference in either direction. And of course it is dead easy to get rid of the Playwright demo environment once the user is done with it.

To get going, the steps are simple:

• run fresh Windows Sandbox
• install git client and Node runtime
• git clone my Playwright scenarios GitHub repo’
• install Playwright library
• run sample scenarios

I will demonstrate these steps in detail – not that there is much detail. These steps should take you less than 5 minutes.

Run Windows Sandbox

The resulting environment is a vanilla Windows sandbox that will be the same for all Windows users anywhere (except for small differences resulting from the exact Windows version used).

In the sandbox, open a Command Line Prompt (as Administrator)

Then type: notepad script.ps1

Confirm that you want Notepad to create a new file. Paste the following lines into this file (note: only three lines actually matter). Then save and close the file.

Invoke-Expression (New-Object System.Net.WebClient).DownloadString(‘https://get.scoop.sh’)

# Note: if you get an error you might need to change the execution policy (i.e. enable Powershell) with
# Set-ExecutionPolicy RemoteSigned -scope CurrentUser

# this one line is all it takes to install a git client, the latest nodejs runtime environment;
scoop install git nodejs

# if you want to install VS Code, add these commands (see https://vscodium.com/) : scoop bucket add extras and scoop install vscodium

node –version

Back on the command line, now execute this command:

%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command “.\script.ps1”

This will install Scoop and then use Scoop to install Node and Git (and optionally VSCodium – a spitting image of VS Code).

When the installation is complete and the version of the node run time is displayed, close the command line.

Start a new command line. This new command line window is required because it inherits all environment settings that were created during the installations performed by Scoop.

In this new window, execute the following lines (you can copy and paste all lines at once into the command line window):

git clone https://github.com/lucasjellema/playwright-scenarios

cd playwright-scenarios

npm install -D playwright

cd step-by-step

node step-by-step

This will clone my Playwright scenario repository from GitHub, install the Playwright library (including the binaries required to the run the Chromium browser) and run one of the scenarios.

After 50-70 seconds, you should see a browser opening with a Wikipedia page loaded. Press the Play option in the toolbar to kick off the scenario.

At this point you have a Windows Sandbox with Node, git, Playwright and a set of scenarios that demonstrate some of the things we can do with Playwright.

From the command line – the root directory of the cloned repository – run the following scenarios:

• node .\imdb\movies.js – this retrieves movie data in JSON format through the IMDb website
• node .\floating_menu\floating-menu.js – to show how a floating toolbar can be injected into virtually any web application
• node .\inject-shortcuts\inject-shortcut-download-all-images.js – to show how a shortcut key combination can be injected into almost any page
• node  .\translate\translate-api – this runs a REST API at port 3000 listening for HTTP requests such as http://localhost:3000/?sourceLanguage=nl&targetLanguage=fr&sourceText=Goedendag ; This API leverages the Google Translate Web UI to perform a translation.
  
  
• node .\search\search.js – run a customized version of DuckDuckGo search engine as a demonstration how you finetune any web user interface using Playwright:
  
  

Conclusion

Of course the approach I have introduced here for quickly composing a Windows environment that is exactly according to specifications is easily applicable in many different situations – where tutorials, self guided training, demonstrations, tests and other activities are planned that require a known starting situation. The Windows Sandbox is a well defined starting point. Using a tool such as Scoop, we can quickly decorate that environment with the interior we require for the circumstances.

Starting and preparing the Sandbox can perhaps be sped up just a little – for example by using the .wsb sandbox definition file with a LogonCommand that executes a PS1 script. The main challenge is getting that script inside the sandbox in a generic, reliable manner.

Resources

My article Windows Sandbox – light weight playground for R&D, tutorials and workshops – https://technology.amis.nl/platform-technology/windows-sandbox-light-weight-playground-for-rd-tutorials-and-workshops/

Another article I wrote on installing Windows Sandbox with Chocolatey, Scoop, Git, VisualStudio Code and more

Article on use of Scoop to quickly compose Windows environment – https://dev.to/lampewebdev/my-fresh-development-setup-for-2020-vs-code-windows-10-1hm0

And another highlighting use of Scoop: https://medium.com/around-the-app-in-365-days/setting-up-a-pc-63409ee7ab33