NPM and the problem with exploits
Recently, there were several incidents with hijacked NPM packages that injected malicious code and executed it on the host systems, stealing user credentials, and so on.
WSL Sandbox Environment as a solution
To prevent that from happening, you can set up a safer solution with the new WSL 2 of Windows 11, so the malicious code only runs in a secure environment and cannot compromise anything on your host system.
Installation of Ubuntu
To install Ubuntu on your Windows 11 machine, simply go to the Microsoft Store and search for "Ubuntu".
I'm personally using Ubuntu 20.04 LTS, but older versions should work as well.
Moving your project to WSL Ubuntu
In this step, we navigate to "Our PC" in Windows 11. We should now see the Ubuntu file system in the bottom left corner under "Linux". Navigate to /home/your-user/ and create a new directory "workspace".
Then copy your web-based projects into it. You can remove the node_modules directory of each to speed things up a bit ( we need to run npm / yarn install on the new machine again anyways )
Installation of Nodejs
The next step is to install Node.js in your Ubuntu Distribution. We need to start the Ubuntu Shell.
I personally use Windows Terminal, which is available in the Microsoft Store.
Pick your Node.js distribution from here:
https://github.com/nodesource/distributions/blob/master/README.md
curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt-get install -y nodejs
Install Yarn in Ubuntu
Additionally, you can install yarn and use it as your preferred package manager
npm install -g yarn
Set Permissions of your project directory
To run the Ubuntu yarn from Windows, we need to give the project rwx permissions.
sudo chmod -R 0777 the-project-path
Configuring Jetbrains WebStorm or IntelliJ IDEA to use WSL / Ubuntu as terminal
Now you can open the project by navigating to the correct directory, within the Ubuntu file system, which should be located under `/home/user/workspace/myproject`.
We need to set wsl.exe as our default terminal, so all our commands are executed in Ubuntu and not in Windows.
You can give the wsl command a distribution flag in addition, to ensure that always the right distribution is picked
wsl.exe --distribution Ubuntu-20.04
The terminal tab at the bottom of WebStorm will now default to Ubuntu.
If you are running multiple distributions with WSL (for example if Docker is installed and WSL enabled) you should set your Ubuntu distribution to default:
wsl.exe -l
wsl.exe -s <your ubuntu distribution name>
Otherwise, you might run into this issue
An error occurred mounting one of your file systems. Please run 'dmesg' for more details.
See https://github.com/microsoft/WSL/issues/5456
Configuring WebStorm to use the Node.js Interpreter and Yarn within Ubuntu
We also need to tell WebStorm / IntelliJ to use the recently installed Node.js interpreter of Ubuntu, instead of the one in Windows.
Go to Settings and type "npm" and click on the settings menu "Node.js and NPM.
Now click on the three dots [...] of Node interpreter, then click on the plus sign and pick "Add WSL". You should now see this:
After you've picked the Ubuntu Node.js interpreter, you can choose it as the default interpreter.
In my case, the yarn path was wrong and pointed to a non-existent directory. I had to change it accordingly to the installation directory:
\wsl$\Ubuntu-20.04\usr\lib\node_modules\yarn
Git
If you are using Git, and have copied your project to Ubuntu, you don't have to install git on the Linux distribution. WebStorm will work fine with the Git installation of Windows, although your project is mounted in Ubuntu.
Disable WSL Automount
WSL automounts all of your Windows partitions by default, and your Ubuntu User has read and write access. In theory, your host system's files are still not protected and the "sandbox" is open.
We disable auto-mount of WSL and restrict Ubuntu's access to the filesystem of the host entirely.
For that, navigate to your /etc
directory, use an editor of your choice and type
sudo nano wsl.conf
paste this content inside and save the file
[automount]
enabled=false
mountFsTab=true
"kill" Ubuntu.
wsl --terminate Ubuntu
Restart it by re-opening the Windows Terminal with the Ubuntu Shell, or in case you are having Docker Desktop installed, it will recognized the termination and offer you to restart your Ubuntu WSL distribution.
Navigate to /mnt/
. Although you still might see directories inside, they won't point to your hosts file system anymore.
Increase max memory allowed of WSL / Ubuntu
By default, WSL2 can only use 1GB of memory, which is insufficient for web development.
We need to create/update the `.wslconfig` in our host system under
C://Users/YourUser/.wslconfig
It should look something like this, depending on your hardware requirements
[wsl2]
memory=4GB # Limits VM memory in WSL 2 to 4 GB
processors=2 # Makes the WSL 2 VM use two virtual processors
Afterwards, we have to shutdown not only our distribution, but WSL entirely. We do so by typing
wsl --shutdown
When we open the Windows Terminal again, WSL is booted automatically.
Testing
If you have configured everything, you can open the terminal and type `yarn install`. It should now run into Ubuntu.
Run Configurations should now also point to the correct node interpreter and run in ubuntu.