Modern WSL Web Development Workflow the essentials

The Windows Subsystem for Linux (WSL) is now mature enough to use for a pretty good modern web development workflow.

The rest of this guide assumes you are running the latest Windows 10 Creators update and have already installed the Ubuntu version into WSL via Windows Store. If not before continuing have a look here: Windows Subsystem for Linux installation guide

Testing

Create a file named info.php in the /var/www/html directory to test that PHP is working correctly with Nginx:

sudo nano /var/www/html/info.php

Add the following code to the file in nano and save:

<?php
phpinfo();
?>

In your windows browser navigate to http://localhost/info.php and if everything is working correctly the standard PHP information page should be displayed.

Create Symbolic Links (Optional)

The WSL filesystem is separate and cannot be directly edited from windows applications so if you want to use VSCode or similar then you can only edit files within the windows filesystem. However, the WSL filesystem mounts the windows drives so that you can then access your windows files from Linux.

With that in mind, we need to edit our files from VSCode within the windows filesystem but also access them via the mounted windows filesystem in Nginx. The easiest option is to use a symbolic link. Mine is as follows, yours will likely be different. Replace alison with your own Linux username:

On the Windows filesystem my development files are located in C:\dev\www

On WSL I configure Nginx to use a symbolic link to the windows files /home/alison/www

Conclusion

That’s it for now. I will continue adding to this article as I refine each step. It should be said that this is a really quick and dirty setup and would not be suitable for a production server, but for getting a WSL development environment up and running quickly this article is hopefully of use to you.