Storefront and Admin Watchers with ddev

This page explains the setup and use of Shopware's storefront and admin watchers.

I have tested the admin and storefront watchers up to Shopware 6.6.7.1 as well as 6.6.9.0 with ddev in apache-fpm mode successfully. Note the Storefront Watcher is broken for use with ddev in Shopware version 6.6.8.0 to 6.6.8.2.

First of all, create a file .ddev/config.watcher.yaml with the following content:

# .ddev/config.watcher.yaml
web_environment:
    - HOST=0.0.0.0
    - PORT=9997
    - DISABLE_ADMIN_COMPILATION_TYPECHECK=1
    - PROXY_URL=${DDEV_PRIMARY_URL}:9998
    - STOREFRONT_SKIP_SSL_CERT=true
web_extra_exposed_ports:
    - name: admin-proxy
      container_port: 9997
      http_port: 8887
      https_port: 9997
    - name: storefront-proxy
      container_port: 9998
      http_port: 8888
      https_port: 9998
    - name: storefront-assets
      container_port: 9999
      http_port: 8889
      https_port: 9999

These directives tell the ddev router which additional ports to route to the container for the watchers. The web_environment directive adds the extra HOST and PORT environment variables required by the admin watcher hot proxy. The PROXY_URL and STOREFRONT_SKIP_SSL_CERT directives are required by the storefront hot-reload watcher. Note that PROXY_URL requires the port to be specified explicitly.

Note: DISABLE_ADMIN_COMPILATION_TYPECHECK=1 is the default in newer Shopware versions (from about 6.6.7.0). So it's possible to omit it in this case.

Don't forget to restart your project with ddev restart.

Admin Watcher

Start the admin watcher with bin/watch-administration.sh (production template) or composer run watch:admin (contribution template).

To reach the admin watcher, point your browser to https://<my-project>.ddev.site:9997 (omit the /admin slug!).

Storefront Watcher

Start the storefront watcher with bin/watch-storefront.sh (production template) or composer run watch:storefront (contribution template).

To reach the storefront watcher point your browser to https://<my-project>.ddev.site:9998.

Media Requests with HTTP and the (blocked:mixed-content) Error

The following applies to all versions prior and including Shopware 6.6.7.1. Note that the webpack hot proxy for the storefront watcher is currently being refactored by Shopware, and a new version allowing consistent use of HTTPS can be expected shortly - watch out Shopware's release notes.

In the Storefront Watcher you will notice that all requests for media files are using the HTTP scheme instead of HTTPS. I don't know of a fix for this at the moment, but you can avoid the consequences with a workaround.

Firstly, you need to define a sales channel domain http://<my-project>.ddev.site in addition to the https domain.

Second, the media requests using HTTP instead of HTTPS will cause Chrome (and other browsers) to block them. Simply add your *.ddev.site urls to Chrome's list of sites that are allowed to display unsafe content - see screenshot below.

To do so, point your browser to chrome://settings/content/insecureContent and add a site [*.]ddev.site to be allowed to show insecure content.

Screenshot of Chrome settings to allow a site to use insecure content