DDEV Drupal Template With Attached VSCode

The tools inside this repository will create a modified Drupal environment, focused on development and debugging.

DO NOT USE IN PRODUCTION - This is a local development tool!

Quick-Start

Spin up a ready-to-code Drupal 9/10 CMS DDEV based development container with preconfigured Drupal Best-Practice Dev-Modules and Visual Studio Code Settings/Extensions in three commands! 🚀

May take ~5 min - only needed once, at initialization:

git clone https://github.com/webksde/ddev-vscode-devcontainer-drupal-template.git ddev-vscode-drupal && cd ddev-vscode-drupal && ddev drowl-init

Tipps:

• "ddev-vscode-drupal" can be replaced with any project name of your liking.
  • Note, that:
    • Project names need to be valid. Valid project names are: "no-spaces-but-hyphens", "UpperAndLower", "should.work.with.dots".
    • The ddev containers will be generated based of your chosen name.
• You can also initiate:
  • A Drupal 9 environment, using ddev drowl-init -v 9
  • A Drupal 11 environment, using ddev drowl-init -v dev

---

Features

Provides a plug and play 🔌 DDEV (Docker) based development environment with attached VSCode

• VS-Code Extensions

  • Intelephense
  • PHP Debug (Using XDebug)
  • PHP Getters & Setters
  • PHP Namespace Resolver
  • PHP DocBlocker
  • PHPStan
  • PHP Sniffer & Beautifier
  • ESLint
  • Prettier
  • CSpell
  • Twig Language 2
  • GitLens
  • TODO Highlight
  • Apache Conf
  • Composer
  • Peacock

• VS-Code Launch configuration

  • Listen for XDebug

• CLI-Tooling

  • PHPUnit
  • PHPUnit Code-Coverage
  • PHPCS
  • PHPStan
  • XDebug
  • DDEV Tooling
  • ESLint

• Drupal Development Modules

  • Coder
  • Devel
  • Devel PHP
  • Admin Toolbar
  • Backup Migrate
  • Stage File Proxy
  • Config Inspector
  • Examples
  • Web Profiler

Beautifully packaged for easy project and environment switching.

Feel free to fork for other Frameworks or improve for lovely Drupal! ❤️

---

Prerequisites

1. Up to date Version of DDEV, Docker, Chrome/Firefox
2. VSCode installed on your machine locally
3. The Remote Development Extension for VSCode (extension name: ms-vscode-remote.vscode-remote-extensionpack)
4. (Optional) To debug inside the attached VS-Code instance, run ddev config global --xdebug-ide-location=container
   1. Unfortunately, this option is only available globally, so you need to adjust your xdebug ide location, when working with other ddev instances, where VSCode is not attached to the web container (e.g., when running the IDE in wsl instead of a container run ddev config global --xdebug-ide-location=wsl2).

---

How to use

1. Create a project folder and switch into it: mkdir project-folder && cd project-folder
2. Clone the repository into the just created folder: git clone git@github.com:webksde/ddev-vscode-devcontainer-drupal-template.git .
3. Use ddev drowl-init to directly start up the environment using Drupal 10 with VSCode / Drupal Best Practice Tools
   1. Alternatively you can explicitly choose the Drupal version, using ddev drowl-init -v 9 for Drupal 9, or ddev drowl-init -v 10 for Drupal 10. Running the command without a flag, will initiate a Drupal 10 environment.
4. You are ready to go! Use ddev describe to check the status & URLs of your Project and ddev code to run your prepared VSCode IDE!
   1. Note, when inside the attached VSCode go to "Extensions" and type in "@recommended" to reveal all the necessary Extensions. Installing them is recommended!

Typical Use-Cases:

• Local Drupal development / testing / evaluation instance from scratch or existing with ready-to-go IDE
• Module / Theme development or evaluation
• Contrib module issue forks / merge requests / patch creation (Git clone / commit / push / ...)
• Simple & quick Drupal 10 Sandbox for offline / local

---

Documentation

Tooling

• Use ddev code to attach VSCode to your running Container.
• Use ddev phpunit path/to/tests to Test Classes using PHPUnit.
• Use ddev phpunit-coverage path/to/cover to create a test coverage of the given file-directory.
• Use ddev phpcs path/to/sniff to check your Code using Drupal Coding Standards.
• Use ddev phpstan path/to/execute to look for deprecated and 'dirty' code.
• Use ddev eslint path/to/sniff (--fix) for linting / auto-fixing javascript code based on Drupal Coding Standards.
• Use ddev stylelint web/modules/custom/my_module for linting css files based on Drupal Coding Standards.
• Use ddev xdebug on to turn on xdebug, then in VSCode go to 'Run and Debug', 'Listen for XDebug' and open your Project in the Browser.
• Use ddev import-db --target-db=db --src=db.sql.gz to import a database file.
• Use ddev drowl-reset-db to reset the database to its state after initial startup.
• Use ddev dump-db ddev to dump your main database tablewise.
• Use ddev deploy-db ddev to import your tablewise dump.
• Note: You can additionally add remote SSH projects under .ddev/commands/web/db-targets

Delete the environment:

1. ddev delete -y deletes the container and unlists the project.
2. Delete the project folder

Further ddev Tools and add-ons

• https://github.com/drud/awesome-ddev
• https://github.com/drud/ddev-contrib

---

FAQ / Troubleshooting:

How do I install ddev?

See https://ddev.readthedocs.io/en/stable/users/install/ddev-installation We recommend to use brew for all kinds of installation, as it's easy to install and update

How do I update dddev?

See above. For brew simply use brew update && brew upgrade

I can not execute the custom "ddev drowl-init" command

Make sure you have the newest ddev and docker version and try restarting docker first. If the problem still persists, make sure you do not have two ddev projects with the same name! If there are no duplicate ddev projects, there might have been a ddev project with the same name in the past, which was not properly deleted using ddev delete. Check your Docker Container instances and delete the old Docker Cluster.

I used "ddev drowl-init-from-existing" and now my Web-Server can't reach the Database

We are currently investigating this problem. It has something todo with ddev creating a new database when importing a database dump through their db command. In the meantime you can use ddev drowl-init and import your database dump after initialisation through PHPMyAdmin (and swap the composer.json).