Setup WSL 2 for Web Development
Published: 2020-07-05 09:07:41

In the [previous post](https://dev.to/vishnumohanrk/setup-wsl-2-hop), 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

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

Create a new user
```bash
sudo adduser <username>
id -u <username>
```

Remember the ID.

Give root permissions to the newly added user.

```bash
usermod -aG sudo <username>
exit
```
Now, we have to change the default user for WSL. To do this open **powershell** and run

```PS
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](https://hyper.is/).

Hyper is a Cross Platform terminal app built with ElectronJS. You can install plugins directly with NPM. Do check out this [repo](https://github.com/bnb/awesome-hyper).

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
```js
// 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,

```js
shell: 'C:\\Windows\\System32\\wsl.exe',
shellArgs: ['~'],
```
Now relaunch Hyper. It will open your default WSL distro's shell.
```bash
sudo apt update && sudo apt upgrade -y
```
*Replace apt with your distro's pkg manger.*

## Install Node

First install NVM

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

Install LTS version of Node

```bash
nvm install --lts
```

Check version

```bash
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,

```bash
git --version
```

If not available install,

```bash
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](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl) for usage with WSL.

To demonstrate the usage with VSCode, we will test a react app as an example.
```bash
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

```bash
npm start
```

This will start our development server at [localhost:3000](http://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
```bash
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.