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.10.4 and 6.7.0.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 (note this is for 6.7.0.0, see below for a slightly different file for 6.5 and 6.6).

# .ddev/config.watcher.yaml for 6.7.0.0 and above
web_environment:
    - HOST=0.0.0.0
    - ADMIN_PORT=9997
    - 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

For 6.5 and 6.6, your .ddev/config.watcher.yaml should look like this:

# .ddev/config.watcher.yaml (Shopware 6.5 and 6.6)
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 ADMIN_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!). You must use your primary ddev url - using localhost or a docker IP address (like 172.19.0.2) will not work.

If you have any custom or third party plugins that supply admin components (like SwagPayPal), you will note, in your browser's console, a number of "mixed content" errors, as the watcher attemps to load plugin assets via http and native IPs. To avoid these errors, you need to configure your browser to allow to show insecure content. If you use the Chrome browser or a similar one, point your browser to chrome://settings/content/insecureContent and add your ddev sites [*.]ddev.site to the list of allowed sites.

Screenshot of Chrome settings to allow insecure content for selected sites

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 only. Please note that Shopware has refactored the Webpack hot proxy for the storefront watcher for newer versions to ensure consistent use of the HTTPS protocol with the storefront watcher.

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