• Home
  • -
  • PHP Development on Windows in 2020: WSL2, PHPStorm, X410

PHP Development on Windows in 2020: WSL2, PHPStorm, X410

I'm changing my dev environment quite frequently, always looking for the current best option. While Windows with ddev was an ok option for TYPO3 development, since I'm doing Shopware including frontend development with lots of files in node-modules and corresponding file watchers, that setup has become too slow to comfortably work with. Now I finally found a setup based on Windows and WSL2 with Ubuntu that is a pleasure to work with, with all the benefits of having Linux as development environment seamlessly embedded into the Windows host system.

In this post I'm describing how to set all that up.

Goals:

  • Usable PHPStorm with fast file sync
  • Common development tools (git, ssh, tests) running
  • No restarts, no dual-boot, no weird workarounds, no file mounts or nfs
  • Running system.d, ssh agent and snap on Ubuntu
  • Seamless integration into Windows

For example consider the following screenshot:

Mixed Windows and Linux Apps

  • Firefox is running on Windows
  • Chromium is running on Linux
  • The Windows Terminal App is running an Ubuntu Bash
  • PHPStorm is running on Linux

How to get there

1. Install WSL2 with Ubuntu 2020

First of all, you need to enable WSL2 and install Ubuntu. If you already have WSL2 enabled, get Ubuntu from the Microsoft store. Otherwise, find a tutorial here: https://www.omgubuntu.co.uk/how-to-install-wsl2-on-windows-10

2. Install x410 as display manager

To be able to seamlessly integrate Windows and Linux you will need a display manager / XServer. I use (and recommend) X410 (https://x410.dev/). It's currently available for less than 10 Euro in the Microsoft store and "simply works".

After installing X410, add the following line to your .bashrc:

export DISPLAY=$(awk '/^nameserver/ {print $2; exit;}' </etc/resolv.conf):0.0

connecting your Ubuntu bash with the XServer.

If you want to get even more out of the XServer, check out the Cookbook on its website (https://x410.dev/cookbook/) - for example I added the XServer to the autostart.

3. Use keychain as ssh agent

Having an ssh agent available and loading your ssh key by default makes working with ssh or git much easier. To use your SSH key in Ubuntu, copy it to ~/.ssh/id_rsa:

cp /mnt/c/where-your-windows-key-folder-is/id_rsa(.pub) ~/.ssh/id_rsa(.pub)

Keychain

Then install keychain as SSH agent and manager:

sudo apt install keychain

To load the key automatically and start the agent, add the following line to your .bashrc:

/usr/bin/keychain --nogui $HOME/.ssh/id_rsa
source $HOME/.keychain/$HOSTNAME-sh

(of course, you can add / load other keys here, too)

More info or other ways to add SSH authentication can be found at https://medium.com/@pscheit/use-an-ssh-agent-in-wsl-with-your-ssh-setup-in-windows-10-41756755993e

4. Install Docker and enable WSL2 support

Current docker installations support WSL2 already. If you already have Docker installed, you can enable WSL2 integration, otherwise install it first. You can select the distributions where you want to use docker. After enabling, you might need to restart your WSL2 distribution to have it available.

Docker WSL Integration

5. Use "systemd" hack to use snap (optional - be careful)

I wanted to be able to use snap for installing tools like node and PHPStorm - to make that possible, I needed to get systemd functional. There is no official support for running systemd on WSL2, however there are "hacks" / "workarounds" to make it work. Take a look before you leap and use with caution:

https://github.com/DamionGans/ubuntu-wsl2-systemd-script

There may be other / updated ways to get it running at this point, keep an eye on https://github.com/microsoft/WSL/issues/5126

Once that's done, snap should be running:

Snap Version

6. Install PHPStorm with Snap

Now we are finally ready to install PHPStorm.

EAP:

sudo snap install phpstorm --classic --edge

Stable:

sudo snap install phpstorm --classic

see also https://blog.jetbrains.com/phpstorm/2017/12/install-phpstorm-with-snaps/

PHPStorm

Try starting PHPStorm by running phpstorm in your terminal. As I'm lazy, I added the following alias to .bashrc:

alias storm='phpstorm > /dev/null 2>&1 &'

7. Install inotify for PHPStorm file watchers

PHPStorm will probably complain about file sync being slow when you start it - that's because we did not install inotify yet, which PHPStorm can utilize. To do so, type:

sudo apt-get install inotify-tools

As the default amount of files a user can watch is pretty low - especially if you are doing anything frontend related ;) - you can increase that number by adding the following line in /etc/sysctl.conf:

fs.inotify.max_user_watches = 524288

and applying the change:

sudo sysctl -p

For more info see https://blog.jetbrains.com/idea/2010/04/native-file-system-watcher-for-linux/
For debugging the file watcher see https://confluence.jetbrains.com/display/~roman.shevchenko/Debugging+native+file+system+watcher+for+Linux


Success!
You now have a running Ubuntu with PHPStorm incl. fast file sync.


-- Optional --


🐵 Random Stuff 🐵
The following section contains additional things I did to customize my environment and make it more fun to use - just in case someone is interested.

8. Install PHP / Composer / Node locally

As I'm doing quite a bit of development directly based on a local PHP server and nothing else, run Cypress acceptance tests via Node in PHPStorm etc. it's important for me to have my tools 'at hand' without the need to start or run a docker container.

I additionally installed PHP7.4 via apt (apt install php7.4-*), composer via the recommended install script and node via snap install node.

9. Recommendation: Use Windows Terminal - with Emoji Support 🐱🐱🐱

As a terminal application I'm using the new Windows terminal - it's fast and has some nice features like tabs for different terminals (you can mix and mash Ubuntu and Powershell for example), colored tabs and - most important: EMOJIs!

Windows Terminal

Get it from the Windows Store: https://www.microsoft.com/de-de/p/windows-terminal-preview/9n8g5rfz9xk3

10. Customize your prompt and git environment (PS_1)

As you might have seen I'm a big fan of customizing your bash prompt and displaying git status information directly. To do that, I'm using the brew formula bash-git-prompt. To install, first install linuxbrew and then tap the formula

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
test -d ~/.linuxbrew && eval $(~/.linuxbrew/bin/brew shellenv)
test -d /home/linuxbrew/.linuxbrew && eval $(/home/linuxbrew/.linuxbrew/bin/brew shellenv)
test -r ~/.bash_profile && echo "eval \$($(brew --prefix)/bin/brew shellenv)" >>~/.bash_profile
echo "eval \$($(brew --prefix)/bin/brew shellenv)" >>~/.profile
brew install bash-git-prompt

See https://docs.brew.sh/Homebrew-on-Linux and https://formulae.brew.sh/formula/bash-git-prompt

11. Scaling issues

Depending on your system, you might have scaling issues when using Linux GUI Apps. In my case, adding the following to vars helped:

export QT_SCALE_FACTOR=2
export GDK_SCALE=2

12. Install prestissimo globally for composer

If you are using composer on the Ubuntu system, you might want to install prestissimo for faster installs:

composer global require hirak/prestissimo

13. Install ddev on Ubuntu

I'd recommend installing and using ddev on Ubuntu, too - to install (if you installed linuxbrew in step 10):

brew tap drud/ddev && brew install ddev

See https://ddev.readthedocs.io/en/stable/#installation for more in-depth instructions.

14. Setup GPG TTY for signed commits

When using Git with signed commits from Ubuntu you may need to set a TTY for GPG to allow unlocking your key.

GPG Key

Add the following line to your .bashrc:

export GPG_TTY=$(tty)

15. Bonus: Set keyboard layout to Dvorak

Some might know I'm using Dvorak as keyboard layout - to do so in Ubuntu GUI apps add the following to profile or .bashrc:

setxkbmap us dvorak-alt-intl -model pc102


That's it
I hope some of it is useful - if you have any questions or feedback let me know via Twitter (https://twitter.com/sasunegomo) or TYPO3 Slack (@susi)