DEV Community

Vishnu
Vishnu

Posted on • Updated on

Setup WSL 2 for Web Development

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
Enter fullscreen mode Exit fullscreen mode

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

Create a new user

sudo adduser <username>
id -u <username>
Enter fullscreen mode Exit fullscreen mode

Remember the ID.

Give root permissions to the newly added user.

usermod -aG sudo <username>
exit
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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'],
Enter fullscreen mode Exit fullscreen mode

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

Change shell and shellArgs values to,

shell: 'C:\\Windows\\System32\\wsl.exe',
shellArgs: ['~'],
Enter fullscreen mode Exit fullscreen mode

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

sudo apt update && sudo apt upgrade -y
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Install LTS version of Node

nvm install --lts
Enter fullscreen mode Exit fullscreen mode

Check version

node -v && npm -v
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

If not available install,

sudo apt install git
Enter fullscreen mode Exit fullscreen mode

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 .
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 .
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)