How to Launch a PHP Project in VS Code Dev Container

As a designer and frontend developer, I often find myself working on various projects. Recently, while working on one of legacy projects, I needed to make updates to a website that was built with PHP. After conducting some research, I discovered that the best option for creating a PHP development environment for my case would be to utilize the VS Code Dev Container feature.

The Dev Container feature in VS Code allows developers to define and configure a development environment using containers. You can define the runtime, tools, and dependencies required for your project, ensuring consistency and reproducibility across different development machines.

Prerequisites:

1. Visual Studio Code
2. Dev Containers extension
3. Docker

To get started with the Dev Container feature in VS Code, you need to create a .devcontainer folder in your project's root directory. Inside this folder, you can define a devcontainer.json file that specifies the Docker image, runtime settings, and any additional configurations required for your PHP project.

{
  "name": "PHP",
  "image": "mcr.microsoft.com/devcontainers/php",
  "forwardPorts": [ 8080 ]
}

So, essentially, that’s all 🙃. We can now use php -S inside the container to launch the dev server. But the container also already includes Apache, which is used in my project's production environment. Consequently, I've opted to utilize it and automate the configuration and launch of Apache as well.
In my case, I extended the default configuration by adding some scripts to the postCreateCommand field in the devcontainer.json file.

{
  "postCreateCommand": "sudo chmod a+x ./.devcontainer/postCreateCommand.sh && ./.devcontainer/postCreateCommand.sh"
}

Here is the shell script that I added:

sudo chmod a+x "$(pwd)/public_html"
sudo rm -rf /var/www/html
sudo ln -s "$(pwd)/public_html" /var/www/html
sudo a2enmod rewrite
echo 'error_reporting=0' | sudo tee /usr/local/etc/php/conf.d/no-warn.ini
sudo apache2ctl start

These scripts perform the following actions:

1. Grant execute permission to the public_html directory, where my PHP files are located.
2. Remove the default files in the /var/www/html directory.
3. Create a symbolic link from the public_html directory to the /var/www/html directory.
4. Activate the rewrite module in Apache configuration.
5. Turn off PHP error reporting by adding a configuration file no-warn.ini.
6. Start the Apache server.

Great, everything is ready. Now, to seamlessly integrate our configured development environment, run Docker and navigate to the bottom left corner of VS Code, where you’ll find the “Remote Window” button. Click on it, and choose the “Reopen in Container” option.

Selecting “Reopen in Container” triggers VS Code to rebuild the container based on the configurations we’ve set in the .devcontainer folder. Once the container rebuild is complete, you'll find yourself working inside the containerized environment, seamlessly incorporating the specified PHP runtime and the configured Apache server.

Now you can open your web browser and navigate to localhost:8080. Here, you’ll see your PHP application running within the container.

In conclusion, the VS Code Dev Container feature proves to be a convenient and efficient tool for setting up and managing PHP development environments. Its ability to streamline the development process ensures consistency across various machines, making it an excellent choice for PHP project work.

Originally posted at Medium