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 (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 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.

New Admin Watcher Ports since 6.7.0.0

In Shopware 6.7.0.0, Vite replaced Webpack as the bundler for admin components. The default watcher port for Vite is 5173. To match the previous port of 9997, you can overwrite it with the ADMIN_PORT environment variable. Therefore, your config.watcher.yaml file must be updated as follows:

# .ddev/config.watcher.yaml for 6.7.0.0-rc4 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

Please note that the admin watcher is not operational with ddev in versions 6.7.0.0-rc1 through 6.7.0.0-rc3.

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 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