Docker + browser extension, "Cannot download livereload.js"

[ddanielgal]

What version of Livereload are you using?

0.9.0

What OS are you using?

Windows 10 version 1803 build 17134.1246
Docker for Windows version 2.1.0.5

What web browser are you using?

Google Chrome version 79.0.3945.130
LiveReload browser extension version 2.1.0

Expected result

Livereload server connects to browser.

Actual result

An alert appears with the message "Cannot download livereload.js"

Steps to reproduce issue

Dockerfile of livereload server

FROM node:10-alpine

RUN npm i --global livereload
WORKDIR /livereload

ENTRYPOINT livereload . -w 1000 -d -u true

docker-compose.yml

version: '3'

services: 
  app:
    # ...
    # code I want livereload to watch
  livereload:
    build:
      context: livereload
    ports:
      - 35729:35729
    volumes:
      - ./src:/livereload

After launching the environtment with docker-compose up, I visit localhost:5000, where my app is located. I attempt to connect the browser extension, and this is where I get the error.

In the terminal, I get the following output:

livereload_1  | Browser connected.
livereload_1  |
livereload_1  | Client message: {"command":"hello","protocols",["http://livereload.com/protocols/connection-check-1"]}
livereload_1  |
livereload_1  | Client requested handshake...
livereload_1  |
livereload_1  | Handshaking with client using protocol 7...

Why is this important?

Using Docker with Livereload is a very powerful tool for developing browser-based apps (frontend, even backend). Some frameworks don't support hot reloading or hot module replacement, and this would be an easy way to avoid refreshing the browser all the time.

Additional context

There is another fork that works with Docker, but it's based on an older version and it doesn't support the -w option which I need: https://github.com/jsonfry/node-livereload

[brunoscopelliti]

Just came here to open the same issue; it works fine with version 0.8.2

[ddanielgal]

I tried node-livereload version 0.8.2 but I still have the same error.

[napcs]

@brunoscopelliti I've pushed 0.9.1 which addresses an issue with loading the script. Does this address your issue?

[napcs]

@danielgaldev I'm not quite following what you're trying to do with docker-compose there. Do you have a trivial app example in a repository I can play with that reproduces the issue, with a full docker-compose file?

[brunoscopelliti]

@napcs yes, 0.9.1 fixed the issue for me. thank you.

[ddanielgal]

@napcs The issue is still persistent with 0.9.1

I have prepared an example repo (check out the livereload branch)

Steps to reproduce issue:

1. docker-compose up
2. Visit localhost:5000, you should see "Awesome" text
3. Try to connect with browser extension
4. Error: Cannot download livereload.js

[napcs]

@danielgaldev Cloning your repo and switching to the livereload branch, I get an error with the flask container so I'm unable to continue.

Creating network "flask-docker-livereload_default" with the default driver
Creating flask-docker-livereload_app_1        ... error
Creating flask-docker-livereload_livereload_1 ... done

ERROR: for flask-docker-livereload_app_1  Cannot start service app: OCI runtime create failed: container_linux.go:346: starting container process caused "exec: \"./entrypoint.sh\": permission denied": unknown

ERROR: for app  Cannot start service app: OCI runtime create failed: container_linux.go:346: starting container process caused "exec: \"./entrypoint.sh\": permission denied": unknown
ERROR: Encountered errors while bringing up the project.

[ddanielgal]

I have fixed the problem on the latest version of the livereload branch, if you pull it should work now. Another solution is to chmod +x entrypoint.sh on your host machine before launching the containers.

More about this problem on this issue

[napcs]

Cloning that repo and using Chrome with the browser extension works fine for me:

The reloading worked on the first try, with no errors from the app. This doesn't sound like an issue I can resolve. It sounds like there's something else going on with how your Docker networking is running, or something else specific to your environment.

Honestly, you might want to give something like browser-sync a try for this use case, as it can do livereloading as a proxy.

[ddanielgal]

I can tell you're using a UNIX system and my host machine has Windows 10. I believe this must be the source of the problem, since there is a history of errors regarding mismatched permissions with Windows hosts.

I might look into this problem later, for now I'm going to try browser-sync as you suggested.

Thank you for your help. I believe we're done here.

[zmorris]

For anyone who reads this thread but can't find a solution:

The problem on my machine was actually caused by On specific sites being enabled in the LiveReload extension settings:

chrome://extensions/?id=jnihajbhpnppcggbcgedagnkighmdlei

I was able to load http://localhost:35729/livereload.js but was still getting the error until I removed localhost and enabled On all sites instead.

For anyone new to this, you'll also need to do these steps after installing the LiveReload Chrome plugin:

1. Open port 35729 in your app, npm, or yarn's service in docker-compose.yml or whichever webserver or containerization you're using (not sure if expose is necessary except for special Docker network modes on AWS, for example):

expose:
  - 35729
ports:
  - 35729:35729

2. Click the plugin puzzle piece icon by the browser's URL bar and click the pin icon to show the LiveReload button
3. Click the LiveReload button to turn it on for the current page

Troubleshooting:

• If see Could not connect to LiveReload server. Please make sure that LiveReload 2.3 (or later) or another compatible server is running.:
  • open port 35729 in docker-compose.yml as shown above
• If see Cannot download livereload.js:
  • don't use On specific sites in LiveReload extension settings (issue is due to a bug/feature of LiveReload where it fails if specific sites are used, even if localhost is specified)
• If live reload happens but nothing changes, disable cache while using DevTools in Chrome: https://stackoverflow.com/a/16597204
  • open site in Chrome and press command-option-I to open DevTools
  • click the gear (cog) icon
  • enable Disable cache (while DevTools is open)
  • check that live reload is now working, if so, can disable Disable cache (while DevTools is open) and hide DevTools (this seems to be a bug/feature of Chrome)

Environment:

• macOS Catalina 10.15.7 (19H2)
• Chrome Version 86.0.4240.111 (Official Build) (x86_64)
• LiveReload 2.1.0