I am writing this down before I forget! In a previous post I got Gulp working inside a Docker container with Magento 2. But I left out the minor detail that I was still struggling to get the Chrome LiveReload extension working. Reading all the reviews, half said “works fantastic” and other half said “does not work at all”. I finally worked out how to get it to work.

My set up:

• I am running Docker Toolbox (from Docker) on Windows.
• I am running ‘gulp watch’ with LiveReload enabled inside the Docker container.
• I am running Magento 2 inside the container.
• I am using WinSCP Ctrl-U (“Keeping remote files up to date”) with SFTP to copy local file changes into a remote container (OS X users might use lsyncd instead).

So I change a local file using my text editor, WinSCP copies the changes to the Docker container, this triggers Gulp to recompile the Less file, and notifies LiveReload of the new CSS file for the web browser to load. Easy right? But after lots of hair pulling, I just could not get it to work.

The problem was I could not get the Chrome LiveReload plugin to connect. The missing factoid was that the Chrome extension ALWAYS connects to 127.0.0.1, not the host name in the URL you are connecting to. D’oh! Once I set up a port forward from Windows to the Docker container, it started working.

That explains the mixed reactions in the reviews I suspect. If they were using a local web server, it would just work. If they were trying with a remote web server it would not work (with an error message including the remote web server host name – no hint that it was localhost that was being connected to).

So how to set up a port forward? I am running Docker inside VirtualBox on Windows (which Docker Toolbox uses under the covers). Open up the VirtualBox GUI, select the VM you are using for Docker (“default” in my case), go to “Settings”, pick “Network” from the side menu, then click the “Port Forwarding” button near the bottom of the page. By default you should see one port forward for port 22, which I think is used by Kitematic to control Docker via SSH. Add a second port (click the “+” icon to the right) and enter

• Name “LiveReload”
• Protocol “TCP”
• Host IP “127.0.0.1”
• Host Port “35729”
• Guest IP “” (leave it blank)
• Guest Port “35729”

Click OK and accept all the changes. And magic. You can now run “gulp watch” (with LiveReload enabled in your Gulpfile) and have the Chrome extension connect successfully into your Docker container (VirtualBox is doing the port forwarding for you). Touch a Less source file on Windows, it copies to the container, it recompiles, and the web browser flickers as the change reloads. Nice!

Next step – wrap it all up in a nice Docker image with some documentation to make it easier to play with Magento 2 development with minimal setup pain. Then I can get back to my book on themes, including examples using Gulp.