DEV Community

AW A RE
AW A RE

Posted on • Updated on

Building WSL2 Environment for Web Development

This article will not cover all details about every bit. I just want to give what steps needs to be done for building a wsl2 environment. Therefore I can also come back to this article and do things again.
1)Install WSL2(windows subsystem linux) on your windows.
google>> install wsl2

2)Install Ubuntu on top of WSL2 environment.
google>> install ubuntu wsl

3)Install node for ubuntu.
google>> install nodejs linux

4)Install git for ubuntu
google>>install git wsl
source: https://docs.microsoft.com/en-us/windows/wsl/tutorials/wsl-git
bash>>

git config --global user.name "Your Name"
git config --global user.email "youremail@email.com"
Enter fullscreen mode Exit fullscreen mode

5)Install vscode wsl extensions pack. We will use wsl: remote out of that bunch of extensions..
At this point, when you want to open a folder in WSL you can type Remote-WSL: Open Folder in WSL from vscode-command-line-palette(crtrl+shift+P or settings>commandline palette)

6)How to see folders and files inside wsl without using command line. This will be usefull to reach out your project files easily and it will also allow us open our projects on github destkop.

try to go following path in normal windows folder \\wsl$ > You will see Ubuntu Folder >Right click on Ubuntu folder icon > Select Map network drive (Z:) > Now Z: can be used as other partition/drive

Now Ubuntu is visible on drive. So you can easily look up for your files and also open folders in github destkop.

7)Now you can serve your website as you used to. If for example you served your files with npm start successfully but there is no signs of life at localhost. Try this. Create .wslconfig file in C:/Users/<username>/.wslconfig

Inside .wslconfig, write following lines and save it:

[wsl2]

localhostForwarding=true

Then open command line windows: >>>wsl --shutdown

Reload vscode window.

8)Since you can reach both wsl and windows folders it is possible to run project in windows file system from wsl. But performance is so poor. You probably want to move your project folder to the wsl. So in linux use following path to store your projects. home/<username>/. You can also create home/<username>/webprojects/ folder.

source: https://github.com/microsoft/WSL/issues/5298

Discussion (0)