Setup a PHP Dev Enviroment with Laravel Valet and WSL 1 (Works with Ubuntu 20.04)
Tags: laravel, php, ubuntu
Published: 2019-12-22 18:33:23

`DISCLAIMER: This proccess only works with WSL 1, if you try doing it with WSL 2 this won't work because AcrylicUI blocks the port 53, which is needed by WSL 2 and Hyper-V`


If you are a PHP developer using Windows as your OS of preference, with the time you my find some limitations when using some features that are only available in a Linux Enviroment, long time ago I had those problems.

Microsoft since Windows 10 they did the impossible, adding Linux support through Windows Subsystems of Linux (WSL)(If you are interested, you can check this link: https://docs.microsoft.com/en-us/windows/wsl/install-win10). Having this posibility you can setup a barely similar Linux Dev Enviroment without adding a secondary OS into your PC system, through this tutorial I whill guide you on how you can have Ubuntu as your PHP Dev Enviroment using WSL.

## Installing WSL #

Go and press Win + R and execute: Control, this will open the old known Panel Control.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/7lfb0lc5q24vx1zp0edz.png)

After that go to **Programs**, inside the next window select: **Turn Windows features on or off**

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ibkmrr0e3fmejusdwy6b.png)

Within in the new window popup, search until the end of the list and check: Windows Subsystems for Linux, press OK and wait until the feature is ready.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/oklh4aa6b3y77cpcdqbl.png)

When is done, Windows will ask to restart the machine, do it.


## Installing Ubuntu #

After your Windows PC has been restarted, go and search in your Windows Store: 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/8ruvnbbq7vj6q3sr5ms3.png)

Or go into this link https://www.microsoft.com/en-us/p/ubuntu/9nblggh4msv6?activetab=pivot:overviewtab and click **Get**, it will send you in the Store to install Ubuntu, and wait until it's done.

After the download is done open it and wait until the install process is complete and follow the steps indicated to finish the the Ubuntu Setup.


## WSL and PHP Setup #

After your new Ubuntu Installation is up n running, follow the next steps:

1.- Run `sudo visudo`
2.- Go and set at the end of the file `ALL ALL = (root) NOPASSWD: /usr/sbin/service` and `<your_username> ALL=(ALL) NOPASSWD: ALL` and save. This will make you don't have to give your sudo password every time you use a `sudo` command.
3.- Run `sudo add-apt-repository ppa:ondrej/php` <- This will prepare the setup to install PHP
4.- Run `sudo apt-get update && sudo apt-get upgrade` <- Let's update the packages available
5.- Run `sudo apt-get install network-manager libnss3-tools jq xsel build-essential libssl-dev zip unzip dnsmasq nginx mysql-server php-fpm php-cli php-mysql php-sqlite3 php-intl php-zip php-xml php-curl php-mbstring redis-server php-redis php-pear php-dev pkg-config libz-dev libzip-dev libmemcached-dev libmemcached11 libmemcachedutil2 libmagickwand-dev imagemagick memcached` <- This will install php, git, curl, mysql and more useful tools needed. Be patience with this one, it will take a while.

## MySQL Setup #

After the long previous step is done, lets prepare our MySQL setup so we can use our root user in this new dev enviroment.

1.- Run `sudo usermod -d /var/lib/mysql/ mysql`
2.- Run `sudo service mysql start` <- Enable the mysql service
3.- Run `sudo mysql` <- Run mysql
4.- Run `ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '<your_password_here>';`
5.- Run `FLUSH PRIVILEGES;`
6.- Run `exit`
7.- Run `sudo service mysql restart`

Now you can use your root user in your .env.dev.

## Node Setup #

Since we can need doing some JavaScript development, we shall install Node into our system. If you visit the Node page, the new LTS version is 12.x, so we are going to install this one (this can be different in the future)

1.- `curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -`
2.- `sudo apt-get install nodejs -y`

To check if we did it well, run `node -v` and `npm -v`, this will show your current version from your system:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/325k19xbm9s085f5fyyx.png)


At this you may be wondering that we are doing any normal setup, but as Anakin Skywalker said: *This is where the fun begins*. We just prepared our WSL into the installation of Laravel Valet. So, let proceed:

## Laravel Valet Setup #

Let's install `composer`, is needed same as npm with JS. Let's say is the NPM of PHP: 

### Composer #

1.- cd ~ <- I recommend doing this in our home path of your normal user, normally `/home/<your_username>`
2.- Run `wget https://getcomposer.org/installer`
3.- Run `php installer`
4.- Run `sudo mv composer.phar /usr/local/bin/composer`

### Bash #
1.- Run `nano ~/.bash_aliases` and put `export PATH=~/.config/composer/vendor/bin:$PATH` <- This will move any composer config to be useful globally in your system.
2.- And restart your bash with `source ~/.bashrc`

### Valet #
1.- Firstly, run and install with `composer global require valeryan/valet-wsl` <- This can take a while

2.- After that, we need to install a new app in the Windows side, i'm talking about [Acrylic DNS Proxy](https://mayakron.altervista.org/wikibase/show.php?id=AcrylicHome). What this app does is to establish a proxy communication between Windows and Laravel Valet to make this localhost works in your Windows side. Download it and install it.

3.- Once is installed just open it, this will make the local DNS service start running in the backgroud. And we need to set up the domain **.test** pointed into 127.0.0.1 DNS.

Go to File > Open Acrylic Host

And at the end of the file set: `127.0.0.1 *.test` then save it with `Ctrl + S`. Press Yes to restart the DNS service.

4.- Next step we need to set the DNS to our main Internet port on our PC, to this go to this icon and right click over it, select **Open Network & Internet Settings**:
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/pfi2quzhuz6b2878xbdo.png)

Next, select **Change adapter options**
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/3er14vmkmywstzdbg4ir.png)

Selecting this option will pop up a new window with a list of every network adapter in your PC, select the one you are using to the get access into the Internet. Then right click over it and select **Properties**, in my case I only have one adapter:
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/u5l0v0tbt8ovjtzxpsl2.png)

Double click in **Internet Protocol Version 4 (TCP/IPv4)**
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/tdxfrp3v3yc2angw8vd6.png)

With the new window pop up, we set in the DNS section: *Use the following DNS server addresses* and set this primary to point to our localhost: 127.0.0.1, just like in hte following image.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/a83wmjuqf566hk1wyf51.png)
Then select OK and OK to close any floating window.

And final step in this one, open CMD or Powerline and run: **ipconfig /flushdns** We need to reset any previous DNS cached config.

**Note:** With the installation of Acrylic DNS, this will set any subdomain finished as **.test** to be localhost only, so be aware that any normal website with the **.test** will no work as intended.

5.- In the WSL side (Ubuntu), run `valet install`. Allow any access requested (both: Private and Public).

6.- This is a important step, wherever you have your PHP main folder switch in console through it and run `valet park`. This will make as the default valet folder, so any project you have in there will be visible in your browser.In my case is: `/mnt/d/Desarrollo/php`
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/90dxg8fjn7l5m5b8pmmu.png)

At this point we are ready to do any php development through WSL, to make the test, at your current directory let's make a test folder, create one with any name your want, I'll use **testing** and inside create an **index.php** file and put anything you want
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/hab62avfbyclqcucmspd.png)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/diy81avlxtl6kwlefxgv.png)

If you go in your browser into testing.test, it will work and will show:
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/cvhtpciobnw3g1zzhozs.png)

And that's it! We have our PHP running in a Ubuntu server with Windows Subsystem for Linux.

## Bonus #

### PhpMyAdmin #
I use PhpMyAdmin as a visual administrator in my dev env, so I'll guide you on how to have it with these new PHP setup.

To do this run: `sudo apt install phpmyadmin php-mbstring php-gettext`

Select **apache2**
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/4t61s25vzdfeaw99ix5c.png)

Select **Yes**
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/94w93ewh9g2smnoizs9w.png)

Then we add our own password to PhpMyAdmin can create any schema needed in the installation.

### Auto Valet Start #
As a bonus, we need to add into our .bashrc these next lines:

`if ! ps -C nginx >/dev/null; then`
`    sudo service mysql start`
`    valet start`
`fi`
`cd /mnt/d/Desarrollo/php`

The **if** checks if valet is running in the background, in case is not running starts valet, so, anytime you open your WSL will automatically start the valet service and mostly important, you can have any amount of WSL running and this won't restart valet any time you open a new WSL window.


References:
https://laravel.com/docs/6.x/valet
https://github.com/nodesource/distributions/blob/master/README.md
https://www.digitalocean.com/community/tutorials/how-to-install-and-secure-phpmyadmin-on-ubuntu-18-04