This guide explains how to configure a Synqup project as well as PhpStorm for developing a Synqup module. For this, the synQup project is installed as an example and the Faker module is added. It then explains how to configure the module git repository and Xdebug in PhpStorm.

Step 1: Set up Synqup project

More details on setting up the synQup project are described here: "Local Setup"

The created folder structure will look like the following after completing this tutorial:

synqup
└───release  
│   └───core  
│   └───frontend  
└───modules  
    └───faker

The following steps are necessary to install the Synqup project:

  • Download the latest Synqup release
  • Unpack the downloaded archive in ~/projects/synqup
  • Run installation script (~/projects/synqup/release/core/bin/scripts/install)

The setup of the Synqup project is now complete. The following folder structure should be present:

synqup 
└───release  
    └───core
    └───frontend

Step 2: Create and configure module folder

In this step, which must be performed once per project, a folder is created for the modules and configured as a volume of the web server.
The modules are stored in a separate directory located one level above the Synqup release project.

Warning: This step recreates the Apache container by editing the volumes.

Create folder and find absolute path

  • mkdir ~/projects/synqup/modules
  • realpath ~/projects/synqup/modules

The absolute path assumed in this guide is /home/user/projects/synqup/modules.

Configure volume

Now it is necessary to configure a volume according to the following pattern: {absolute path}/:/var/www/{name of module folder}. So the docker-compose.yml is edited as follows:

web:
  container_name: "synQup-apache"
  networks:
    - ...
  depends_on:
    - ...
    build:
      ...
  volumes:
    - ...
    - /home/user/projects/synqup/modules/:/var/www/modules

Then the container must be recreated: docker-compose up -d .

Step 3: Register module

Add module

In this guide, the Faker module is used as an example. Therefore, this is cloned into the previously created module folder:
git clone git@gitlab.com:synqup-modules/faker.git /home/user/projects/synqup/modules/faker

You should now have the folder structure mentioned in step 1:

synqup
└───release  
│   └───core  
│   └───frontend  
└───modules  
	└───faker

Testing the visibility of the module

Now it is tested if the configuration is error-free up to this point: docker exec -i synQup-apache ls /var/www/modules
The faker module should be visible in the output as "faker".

Registration of the module in composer.json

Now follows the registration of a path repo for the module via Composer CLI: docker exec -i synQup-apache composer config repositories.fakerLocal path /var/www/modules/faker
This command stores the following entry in the composer.json:

{
  "repositories": {
    "fakerLocal": {
      "type": "path",
      "url": "/var/www/modules/faker"
    }
  }
}

Module installation

The following command finally installs the Faker module: docker exec -i synQup-apache composer req synqup/faker
This creates a symlink so that the module in the container updates itself whenever a local change is made.

PhpStorm setup

Three changes are made in PhpStorm:

  • Registration of the previously created module folder
  • Setup of the Git repository of the module to be developed.
  • XDebug setup

Module folder registration

In the settings of PhpStorm, a new so called "Content Root" must be added: File -> Settings -> Directories -> Add Content Root Module folder registration

As a result, both folders (release and modules) are visible in the Project Tool window:

Project Tool Window

Set up the module's Git repository

The Git repository of the module can be included as follows: File -> Settings -> Version Control -> Directory Mappings -> Add

Project Tool Window

Configure XDebug

This step is optional.

Set up Apache Container

The following commands must be executed in the synQup-apache container:

  • php -dxdebug.mode=debug -dxdebug.client_host=192.168.99.1 -dxdebug.client_port=9003 -dxdebug.start_with_request=yes bin/console
  • export PHP_IDE_CONFIG=serverName=Docker

Set up PhpStorm

First, the DBGp proxy settings must be set:

File -> Settings -> PHP -> Debug -> DBGp Proxy

Project Tool Window

As IDE key PHPSTORM is set, as port 9003.

A server is then set up and path mapping is configured:

File -> Settings -> PHP -> Servers

Project Tool Window

The entries of the left column may vary depending on the folder structure of the local system. Important:

  • The previously created module directory is mapped to the /var/www/modules folder of the container
  • The core of the Synqup project is mapped to the /var/www/html folder of the container

Finally, the "Listening for PHP Debug Connections" option must be enabled:

Project Tool Window