Building an (ideal) Drupal development environment with Vagrant, Drupal VM and PhpStorm. Part 3

It’s been more than a week since the part 2, so let’s go ahead and finalize our ideal development setup.

This time we’ll be talking mostly about PhpStorm integration. If you’re using another IntelliJ IDEA based IDE the setup will be quite similar.

Let’s assume we’re starting from the blank page and there’s no project created yet.

Create a new project

Start the PhpStorm and click on Create New Project from Existing Files option.

On the next step choose the last option: Source files are in local directory. No Web server is yet configured.

I don’t like using setup wizards and it may not be very clear what’s going on under the hood, so we’ll deal with server config later.

On the next step specify the project root, in my case it’s ~/Dev/Vagrant/www/drupal8 and hit Continue.

After indexing is completed, PhpStorm will suggest to enable Drupal support and configure namespace roots. Do it now.

Now open Preferences menu and go to Build, Execution, Deployment >> Deployment screen. If you’ve used PhpStorm before, you should see a list of servers. We’re going to add a new one, so hit the «+» icon.

Give it any name and choose the «SFTP» type.

If you’re using Drupal VM, just copy and adjust settings from the screens below. If you’re on other Vagrant box, check with the documentation of your provider. Note the location of the private key file.

Install Vagrant plugin

Go to Plugins page in Preferences and install the plugin called «Vagrant».

Then visit the Tools >> Vagrant page of the Preferences menu and provide the path to the Drupal VM (or other) environment, where the config.yml and Vagrantfile are located.

Test if it works by going to the Tools >> Vagrant section of the main menu.

From this menu you should be able to vagrant halt, vagrant up and vagrant provision your machine without leaving the IDE. Very handy!

Connect to the machine via SSH

You may have used the built-in Terminal in PhpStorm already and the good news is that we can use it for SSH’ing to the virtual machine.

In the main menu visit Tools >> Start SSH session >> [Server name]

This trick will only work if you’ve specified proper connection details to the VM in the Deployment section of the Configuration menu (see the very first part of the post). Otherwise you will have to enter connection details each time, which is not good.

Another caveat is that it will try to pick up the connection details from the Vagrant environment, but it doesn’t work in most cases.

xDebug configuration

Sure thing, we want xDebug! Let’s do it.

Select the «Edit configurations» item in the top right dropdown menu of the main editor window.

In the right panel of the window choose «PHP Web Application».

If for whatever reason you’re having trouble locating the dropdown menu, you can open the configuration window from the Configuration menu by going to Languages & Frameworks >> PHP >> Servers page.

Most likely the list will be empty or our server will be missing.

You may be wondering why it doesn’t show here, as we’ve just configured it!

Don’t worry, we can easily Import the configuration from the deployment server by clicking on the Import icon.

Pay special attention to the path mappings, my config attached here for cross-checking:

Here we just specify the local path of the Drupal installation and the same path but on the remote machine. Pretty obvious.

Explaining how to debug your app goes beyond the scope of the tutorial, so right now you can start listening for PHP debug connections in PhpStorm, enable the debug with a proper key in your favorite browser, set a breakpoint in index.php file and reload the page.

Enjoy your new perfect setup!