Experimenting with Windows Subsystem for Linux and Web Development

Written by valeryan | Published 2017/02/23
Tech Story Tags: web-development | laravel | valet | windows-10 | linux

TLDRvia the TL;DR App

As a career web developer I have been using a MacBook pro for a few years. I have found web development on windows to be very destructive to my sanity. At heart I am really a Linux guy. I built my first computer back in the late 90s and my Abit motherboard came with a CD to install Linux. I installed it and found it interesting. A few long nights, and many years later I found myself digging machines out of junk piles for something else to install Gentoo Linux on because I really just love to torture myself.

I gave you that lovely backstory to illustrate the extent to which I have avoided windows over the years. However, Microsoft has really surprised me lately with many of their business choices. Open sourcing tons of stuff like .Net Core and then deciding to integrate Linux smack dab in the middle of their baby, Windows 10. The OS so good they couldn’t bare to call it Windows 9.

As an avid Linux user by night, and OS X user by day, I have to know if the Windows Subsystem for Linux (WSL) is good enough for me. My biggest gripe about Linux has always been about the same as all of its passionate users: “I really need to run Photoshop sometimes”. The promise of having all that windows software right at my finger tips with all the power of Linux at the same time. I could rule the world!

I build web programs for a living using PHP and the Laravel framework. So I need a development platform this is tailored to Laravel. WSL needs to be able to run my most used tools:

  • Nginx — My web server of choice
  • PHP — My old friend Wodka
  • MySQL — That old grey database
  • Composer — Package Manger
  • Valet — The smooth lightweight development tool for OS X and Linux

These are the services I use on OS X daily and if I am going to do web development on Windows these tools are essential. Over the last few days I have worked to get that all up and running under WSL so that I can evaluate what web development would be like in this new Windows world. I ran into a few snags but ultimately I was able to get my “must have list above all” functioning with a few caveats:

  • I got this all running using the latest insider preview of windows 10 (15031) using Ubuntu 16.04.
  • I did not test the valet secure or valet share commands because I am pretty sure I would be disappointed.
  • Nothing starts up automatically in WSL.

The Setup Process

Below are the steps I took and information I learned while setting up my development environment. Its a long process but I was happy with my results.

Setting up Linux for Web Development

  1. Start with a fresh install of WSL
  2. The run to normal stuff sudo apt-get update && upgrade(note: you will get rc.update errors throughout this process. They can be ignored).
  3. Install some of Valet’s prerequisites sudo apt-get install libnss3-tools jq xsel.
  4. Install dnsmasq sudo apt-get install dnsmasq (note: we wont actually use this but it has to be installed)
  5. Install Nginx sudo apt-get install nginx.
  6. Install MySQL sudo apt-get install mysql-server.
  7. Secure it if you want sudo mysql_secure_installation.
  8. Install php and some extensions sudo apt-get install php-fpm php-mysql php7.0-cli php7.0-curl php7.0-mbstring php7.0-mcrypt php7.0-xml php7.0-zip php7.0-intl.
  9. Now install composer by following the Linux guide on https://getcomposer.org/
  10. Install Valet but don’t start it yet composer global require cpriego/valet-linux.
  11. Run sudo mkdir /etc/NetworkManager/dnsmasq.d/
  12. Add export PATH="$PATH:$HOME/.composer/vendor/bin" to your .bashrc and then run source .bashrc.
  13. Run valet install

Fixing things up to work with WSL

The default Nginx and php setups are going to use a unix:socket, but that’s not going to work for WSL. Also, WSL uses a lightweight init system and services are not going to start automatically for Nginx, PHP, MySQL, etc.

  1. Edit /etc/nginx/sites-available/valet.conf comment out fastcgi_pass unix:/home/{user}/.valet/valet.sock; and add fastcgi_pass 127.0.0.1:9000;

  2. Edit /etc/php/7.0/fpm/pool.d/valet.conf comment out listen = /home/{user}/.valet/valet.sock and add listen = 127.0.0.1:9000

  3. I plan to startup the services I need with a script before I start Valet and I don’t want to enter my password. This is optional: create a file called service in /etc/sudoers.d/ with permission of 700and add:

    Cmnd_Alias SERVICE = /usr/sbin/service *%sudo All=(root) NOPASSWD: SERVICE%wheel ALL=(root) NOPASSWD: SERVICE

4. Now create our startup script:

#!/bin/bash

sudo service php7.0-fpm startsudo service nginx startsudo service mysql start

5. Run your startup script and then run valet start to make sure it starts up. Open a browser and hit localhost. You will get a 502 bad gateway error from Nginx if you have succeeded.

Setup Windows to work with Valet’s DNS schema

I am pretty sure that with time I could get Windows to use dnsmasq and have it forward DNS request to my actual DNS server but thats a problem for another day. dnsmasq provides a key feature of valet though and it will have be replicated in Windows. When you park and link sites the Valet serves them using the directory name and the .dev TLD. By default we are expecting to enter something like simpletest.dev into our browser and get it to point to 127.0.0.1 to serve the test site.

Windows hosts file does not support wildcard domains like *.dev. You could edit your hosts file on windows and add 127.0.0.1 simpletest.dev for a quick test, but we want wildcard routing. To accomplish this feature I used Acrylic DNS Proxy. Its simple, open source and it has the features needed to replace dnsmasq.

After getting DNS setup, browse to simpletest.dev. If you get a 502 bad gateway message from Nginx you are almost there.

Now you can fire up your favorite IDE, and edit your web files in that sites folder we created and they will be served by your WSL server. You can also edit the files using VI in WSL but don’t put your web files in your Linux filesystem and edit them in Windows. Put files you want to share and work with using WSL under the /mnt/c some where. This is a WSL thing you can read about here if you are interested.

Setup a Test Site with Valet

  1. WSL mounts the windows C drive at /mnt/c. In your WSL Terminal cd to /mnt/c/Users/{windows user}/ and create a directory to hold our projects mkdir sites and then create a directory under sites like simpletest.
  2. Add an index.php with phpinfo() or echo hello world or echo funks your mama!
  3. Now in the simpletest directory run the commands valet park and valet link
  4. Run valet restart and then browse to simpletest.dev in your Windows browser. The output of your index.php should now be displayed.

Final Thoughts

So wow, that was a journey to get this all up and running. Its not as seamless and easy as getting a local development environment setup in OS X but maybe its worth it to some. I undertook this task out of curiosity but for the struggling Windows developer this could be a great thing. Hopefully the integration of Linux on windows will improve with time. But I feel like this system is usable for web development and I could get along with Windows as long as it has Linux installed.


Published by HackerNoon on 2017/02/23