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 lastest 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

This post uses material from two other excellent guides which go into a lot more detail than here which I recommend reading Developing on Windows 10 using WSL and How to set up the perfect modern dev environment on Windows

Most of my development is with Wordpress and Ghost using Visual Studio Code so the tools installed in this guide are centred around that workflow.

Update the system

sudo apt-get upgrade && sudo apt-get update

Add Node v6.x repoitory and Install Node

curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -

The above command even automatically runs apt-get update so we can just get straight to installing nodejs.

sudo apt-get install nodejs

installing NPM is not required as it is included in this version of node

Install Nginx

Install Nginx

sudo apt-get install nginx

Install MySQL

sudo apt-get install mysql-server-5.7

The installer will ask you for the MySQL root password.
Start the mysql service

sudo service mysql start

Secure MySQL

mysql_secure_installation

Add PHP 7.2 repo and install

sudo add-apt-repository ppa:ondrej/php
sudo apt-get update
sudo apt-get install php7.2-fpm php-mysql

Configure Nginx and PHP

sudo nano /etc/nginx/sites-available/default

There are several changes to make here and they are all inside the server { ... } block. The first being to include index.php in the server block before index.html like so:

server {
    # Add index.php to the list if you are using PHP
    index index.php index.html index.htm index.nginx-debian.html;

Next ensure the following section is uncommented:

location / {
    try_files $uri $uri/ =404;
}

Finally the PHP configuration. Make sure the following is included in the server block beneath the changes above:

location ~ \.php$ {
    include snippets/fastcgi-php.conf;
    fastcgi_pass 127.0.0.1:9000;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
}

Check that the following block is uncommented and after the above sections:

location ~ /\.ht {
    deny all;
}

Exit the Nano editor by pressing ctrl/cmd + x and choose yes to save changes.
Configure php-fpm by editing the www.conf file.

sudo nano /etc/php/7.2/fpm/pool.d/www.conf

Comment out the listen line using a semicolon and add a new listen command below it. This is required because WSL does not implement unix sockets (yet!).

;listen = /run/php/php7.2-fpm.sock
listen = 127.0.0.1:9000

Exit the Nano editor by pressing ctrl/cmd + x and choose yes to save changes.
Next edit the php.ini file

sudo nano /etc/php/7.2/fpm/php.ini

Uncomment the following line and change from 1 to 0

cgi.fix_pathinfo=0

Exit the Nano editor by pressing ctrl/cmd + x and choose yes to save changes.
Restart Nginx and php-fpm:

sudo service php7.2-fpm start
sudo service nginx start

Ensure there are no errors display restarting the services.

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 directy 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

Create the smbolic link

sudo ln -s /mnt/c/dev/www /home/alison/www
sudo chown alison:www-data www

The Nginx configuration will need to be updated as well

sudo nano /etc/nginx/sites-available/default

Adjust the root location to the symbolic link.

server {

    root /home/alison/www;

(Optional) Enable directory listings in Nginx.
Add autoindex on into the location / { ... } block.

    location / {
        try_files $uri $uri/ =404;
        autoindex on;
    }

Restart Ngninx

sudo service nginx restart

Conclusion

Thats 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.

Alison Butcher

Alison Butcher

Software Engineer & Web Develper with a background in Software Development in Industrial Automation and Control. Currently studying Computer Science at Griffith University

Read More