DEV Community: Vishnu

WSL Port Forwarding

Vishnu — Wed, 15 Jul 2020 12:26:17 +0000

When you start a server in WSL, both Windows and Linux share the same local host. When using a WSL 1 distribution, if your computer was set up to be accessed by your LAN, then applications running in WSL could be accessed on your LAN as well. This isn't the default case in WSL 2.

So, in order to access the server from your local devices, you need to port forward the WSL local IP using netsh.

First, install net-tools in your linux distro.
For Ubuntu,

sudo apt install net-tools

Next, in Windows, create network.ps1 PowerShell script file with the following content.

If (-NOT ([Security.Principal.WindowsPrincipal][Security.Principal.WindowsIdentity]::GetCurrent()).IsInRole([Security.Principal.WindowsBuiltInRole] "Administrator")) {   
  $arguments = "& '" + $myinvocation.mycommand.definition + "'"
  Start-Process powershell -Verb runAs -ArgumentList $arguments
  Break
}

$remoteport = bash.exe -c "ifconfig eth0 | grep 'inet '"
$found = $remoteport -match '\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}';

if ($found) {
  $remoteport = $matches[0];
}
else {
  Write-Output "IP address could not be found";
  exit;
}

$ports = @(5001, 19000, 19001);

for ($i = 0; $i -lt $ports.length; $i++) {
  $port = $ports[$i];
  Invoke-Expression "netsh interface portproxy delete v4tov4 listenport=$port";
  Invoke-Expression "netsh advfirewall firewall delete rule name=$port";

  Invoke-Expression "netsh interface portproxy add v4tov4 listenport=$port connectport=$port connectaddress=$remoteport";
  Invoke-Expression "netsh advfirewall firewall add rule name=$port dir=in action=allow protocol=TCP localport=$port";
}

Invoke-Expression "netsh interface portproxy show v4tov4";

This script is taken from here, I added command to automatically ask for admin permission, when opening the script, instead of right clicking and clicking run as admin every time you run the script.

Note: The network should be a private network.

The script will ask for admin access.

The script gets the WSL IP address and then executes netsh commands to forward the connection to your Windows' local IP, which you can see by executing ipconfig in either PowerShell or Command Prompt.

The script also resets all previous forwards and at the end displays the list of ipv4 connections forwarded.

You can modify the $ports array with your commonly used ports.

Since WSL2 uses virtual network adapters, its IP address resets after every startup.

For Expo users

Include both ports 19000 and 19001 in the $ports array. (Don't include 19002 - dev tool server).
In your Android device (connected to the same network as your PC), copy exp://<your-windows-ip-address>:19000 to the clipboard.
Open Expo Go, "Open from Clipboard" option will appear.

Notes

PowerShell command to view all forwards

netsh interface portproxy show v4tov4

Have a desktop shortcut for the script. It could be handy.
The network should be a private network.
If your primary purpose is to only check your website for responsive design with your mobile, there is a simple way for that in chrome. See Chrome remote debugging

References

Accessing a WSL 2 distribution from your local area network (LAN) - WSL Docs
WSL issues on Github
Script Source
Running a command as Administrator using PowerShell - From StackOverFlow

Setup WSL 2 for Web Development

Vishnu — Sun, 05 Jul 2020 09:07:41 +0000

In the previous post, we saw how to install and setup WSL2. In this post we will setup WSL2 with Git, VSCode, Hyper and NodeJS.

Initial Setup

You can skip this section if you haven't used LXrunoffline WSL management tool for installing a distro, but rather directly from MS Store

In powershell

wsl

This will open the default WSL distro's terminal inside Powershell. Follow the steps,

Create a new user

sudo adduser <username>
id -u <username>

Remember the ID.

Give root permissions to the newly added user.

usermod -aG sudo <username>
exit

Now, we have to change the default user for WSL. To do this open powershell and run

wsl --shutdown
lxrunoffline su -n Ubuntu-20.04 -v <id>

where <id> is the ID of the user you just added.

Replace Ubuntu-20.04 with your default distro's name.

Now, this will set the newly added user as default user for the mentioned distro.

Install Hyper

Install Hyper from here.

Hyper is a Cross Platform terminal app built with ElectronJS. You can install plugins directly with NPM. Do check out this repo.

Now, if you open up hyper, you will see that it is opening windows' cmd prompt by default. We have to change default shell to our default WSL distro's shell.

To do so, open preferences. Shortcut - ctrl + ,
It will open a .hyper JS file. In that file scroll down to this section

// PowerShell on Windows
// -Example:`C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe`
shell: '',
// for setting shell arguments (i.e. for using interactive shellArgs: `['-i']`)
// by default `['--login']` will be used
shellArgs: ['--login'],

It is the config file for Hyper and it IS JavaScript.

Change shell and shellArgs values to,

shell: 'C:\\Windows\\System32\\wsl.exe',
shellArgs: ['~'],

Now relaunch Hyper. It will open your default WSL distro's shell.

sudo apt update && sudo apt upgrade -y

Replace apt with your distro's pkg manger.

Install Node

First install NVM

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

Install LTS version of Node

nvm install --lts

Check version

node -v && npm -v

Install Git

WSL requires git to be installed on both Windows and your distro, and both should be same version.(I am not sure about the version thing)

Most of the distros comes pre-installed with git. To check,

git --version

If not available install,

sudo apt install git

Setup VSCode

You don't have to install VSCode for your distro. Just install latest version of VSCode for windows and you are good to go.

However, you have to install this extension for usage with WSL.

To demonstrate the usage with VSCode, we will test a react app as an example.

cd ~
mkdir demo
npx create-react-app test
cd test
code .

This will open VSCode in our windows environment.

While loading VSCode for the first time from WSL, it will take some time, but it is a one time process.

Now if you open VSCode's integrated terminal, you can see that it is opening the bash shell of our distro and not windows' shell. The same applies to the VSCode's integrated git feature as well.

Now if you move to the extensions tab in VSCode, you can see it requires us to install some extensions separately for WSL. Go ahead and install them and reload VSCode.

Now from VSCode's integrated terminal, run

npm start

This will start our development server at localhost:3000, and it will automatically open the app in browser. Here it will open in windows' default browser with same localhost and same port. How cool is that. Two OS share the same localhost.

Now the procedure is pretty much the same for express or other Node based applications.

Bonus

One nice and neat trick, in your distro's terminal, in any directory, run

explorer.exe .

Don't forget the dot. Dot means open the mentioned program with the current working directory as the path for that program. Without dot, it will simply open the program's default window

This will open the current working directory in windows explorer. Just like with nautilus or with any other linux file manager, when you have used linux with a GUI desktop env.

Get Started with WSL 2

Vishnu — Sun, 05 Jul 2020 07:01:36 +0000

How to setup WSL 2

Before we begin, update Windows to the latest version.

Version: 2004
OS Build: 19041 or later

You can check this by going to Settings => Update and Security => OS build Info

In this post, we will setup Ubuntu 20.04, but the procedure is same, only name and download links differ, at the end of the post, I will leave links for other distros

Install Scoop or Chocolatey

These are package managers for Windows.

We need a package manager for installing LxRunOffline, a WSL management tool. It is useful for installing, uninstalling, moving our distros.

To install scoop, Open Powershell as Admin and execute

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

A quick side note, Windows is finally getting an official package manager called Winget. But now we will use either of the above.

After scoop is installed successfully, install LxRunOffline by executing the following commands one by one in powershell.

scoop bucket add extras
scoop install lxrunoffline

Enable WSL 2

WSL is a optional feature, so you have to manually enable it to use it.
To do so, in Powershell (as admin), execute the following

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart

To upgrade to WSL 2, you must enable another optional feature, "Virtual Machine Platform"
This can be done by executing the following in Powershell.

dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

After completion, Restart your system.

After boot, Set WSL 2 as default version

wsl --set-default-version 2

Install distro

There are quite a few distros available to install from. You can directly install any one or more from Microsoft store or manually from powershell. The problem with installing from store is that by default, all apps from store, if you have not changed the settings, will be saved in the system drive - "C" drive.

So, if you don't want to save all your project files (that you will be working with in WSL) in C drive. Consider not to save the distro in C drive, rather in another partition.

So, installing distro manually through Powershell is the best option.
Navigate to the directory, where you want to save the distro image, in Powershell and execute

Invoke-WebRequest -Uri https://aka.ms/wslubuntu2004 -OutFile Ubuntu.appx -UseBasicParsing

This will download Ubuntu 20.04 image to the current working directory.

If you want to install other distro, check the end of the post for links, then replace the link in the above command with that link.

After successful download, execute the following commands one by one in powershell

move .\Ubuntu.appx .\Ubuntu.zip
Expand-Archive .\Ubuntu.zip
cd .\Ubuntu\

Now, inside this directory you will have a tarball named install.tar.gz, we will use it with the WSL management tool that we installed in the beginning.

Now , in Powershell, execute

lxrunoffline install -n Ubuntu-20.04 -d <install-dir> -f <distro img dir>\install.tar.gz

Where <install-dir> is where you have want your distro, with its entire file system to live, and <distro img dir> is where you have installed your distro image (this will probably be your current working directory, if you have been following along).

Now this will install the distro, in the <install-dir>.

Verify installation

[All commands in Powershell]

To check installed distros, with status and WSL version

wsl --list --verbose

To change WSL version

wsl --set-version Ubuntu-20.04 <ver-num>

<ver-num> is 1 or 2.

WSL 2 is recommended.

To check distro location,

lxrunoffline get-dir -n Ubuntu-20.04

replace Ubuntu-20.04 with name of the distro you installed

Open the distro's Terminal

Open powershell and execute

wsl

If you have only one distro installed, then it will be set as default, and it will open.
If you have installed multiple distros, to set one as default, execute

wsl --set-default <distro-name>

Now execute the first command to open the default distro.

The distro's terminal will open inside Powershell.

References and Links

WSL docs => https://docs.microsoft.com/en-us/windows/wsl/
Available Distro Links => https://docs.microsoft.com/en-us/windows/wsl/install-manual#downloading-distros
Why to use Linux File System for WSL projects and not Windows' => https://docs.microsoft.com/en-us/windows/wsl/compare-versions#use-the-linux-file-system-for-faster-performance

PS: This is my first blog post, feedback appreciated.