Web development on Windows using WSL 2

andreasbergqvist

Andreas Bergqvist

Posted on September 2, 2019

Web development on Windows using WSL 2

So, I've been testing the new WSL 2 (Windows Subsystem for Linux 2).
It's currently available when using Windows 10 Insider Preview Build.
This means that you needs to setup your Windows 10 system to install preview builds.
Install at own risk :-)

Information on how to install WSL 2 is found here:
https://pureinfotech.com/install-windows-subsystem-linux-2-windows-10/

This version of WSL could be considered more of an complete Linux environment. Like an Virtual Machine running on your Windows computer. But of course speedy, lightweight and more integrated with Windows. I'm not an expert on architecture but there are other articles you can find regarding this =)

I'm just looking for a smooth developer experience on Windows (yeah, I'm a web developer you prefers Windows... Strange...).

Linux

So, you basically have a bare Linux installation now (I installed Ubuntu 18.04).
So if you want to run Node, PHP or other application you need to install the appropriate packages. There are a number of guides how to do that.

You know:

sudo apt install this
sudo apt install that
Enter fullscreen mode Exit fullscreen mode

The new Windows terminal

I'm also using the new Windows terminal. This one is found (also as a Preview) in the Windows Store.

Alt Text

During the time I've used it there have been some updates and I would generally say I like it. Great addition to the developer experience in Windows.

Here, I create a Next.js project:
Alt Text

Integration with VS Code

Install the "Remote - WSL" VS Code extension:
https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl

Now, from VS Code command palette (CTRL+Shift+P) run "Remote-WSL: New Window"

Alt Text

Now, when you select "Open folder" you can select from your WSL dist:
Alt Text

You can now access and edit the files directly and use the terminal:
Alt Text

And even if the Linux distibution has it's own IP address, you can reach it through localhost:
Alt Text

Lets test an Laravel project (PHP)

First, make sure you have PHP-FMP and Composer installed.

Run:

composer global require laravel/installer
laravel new blog
cd blog
php artisan serve --host=0.0.0.0
Enter fullscreen mode Exit fullscreen mode

Notice the --host=0.0.0.0. This was the only way I got the localhost:8000 to work in the browser:
Alt Text

Whats missing?

Auto-starting services

The services you install (like PHP-FPM or MySQL) need to be started manually after every system restart. I read about third-party solutions that might fix it but I would rather have it integrated in WSL.

Custom hostnames

I like to name my different sites stuff like thesitename.local and access them that way. It's possible, but since the WSL system changes IP address after every restart, the hosts-file need to be manually updated.

Future and Docker

Docker for Windows has announced that it will support running via WSL. There is currently a Tech Previews that I haven't yet tested. But that seems really cool!

Summary

During the time I tested it most things seems to work just fine and with some more fixes I would say that web developing on Windows has a bright future used with WSL 2.

💖 💪 🙅 🚩
andreasbergqvist
Andreas Bergqvist

Posted on September 2, 2019

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related