Stencil-cli not fully working on Docker

[HenkHui]

Expected behavior

When running Stencil-cli in Docker the following URL's should work from the host machine (in case of default port 3000): http://localhost:3000 -> BrowserSync "wrap" http://localhost:3001 -> Server URL which is proxied by BrowserSync http://localhost:3002 -> BrowserSync UI

Actual behavior

http://localhost:3001 is not available on host machine and therefore BrowserSync is not working. This is caused by the fact that the server is created with host "localhost" (instead of 0.0.0.0) and therefore not listening on all network interfaces. Within the container the URL is working fine. The other URL's are are also working, so I can access the site through http://localhost:3000 and the BrowserSync UI through http://localhost:3002.

Steps to reproduce behavior

Run Stencil start in Docker environment and check whether the URL's which are mentioned in the output are working from the host machine: [Browsersync] Proxying: http://localhost:3001 [Browsersync] Access URLs: Local: http://localhost:3000 UI: http://localhost:3002

Environment

Stencil-cli version stencil --version: 5.2.2 but also Node version node -v: v14.19.1 NPM version npm -v: 6.14.16 OS: Docker images node:14.19.1-alpine and also node:14 (Ubuntu)

[jairo-bc]

Hi @HenkHui, do you mind providing exact steps to reproduce with the commands you run into (or screenshots)? Thanks

[HenkHui]

Ok, so, I changed the way the server is initialized in the packages directory to see whether it actually fixes the "hot reloading" by changing these lines in "node_modules/@bigcommerce/stencil-cli/server/config.js

server: {  
    host: 'localhost',  
    port: 3000,  
},

to

server: {  
        host: '0.0.0.0',  
        port: 3000,  
    },

And this fixes the issue in which the proxied URL (http://localhost:3001/) cannot be reached from the host machine. However it did not fix the "hot reloading" issue in Docker. The browser still would not reload on file changes.

After some further inspection it looks like this is caused by an issue in Chokidar (which is used by BrowserSync) which doesn't seem to notice changes inside Docker mounted volumes.

See: https://github.com/paulmillr/chokidar/issues/1051

My workaround for now is to force Chokidar to use polling by setting some environment vars in my Docker Compose file:

   environment:  
      CHOKIDAR_USEPOLLING: true  
      CHOKIDAR_INTERVAL: 1000

NB: I need to set the interval as well (CHOKIDAR_INTERVAL) because the default value (300) causes some serious CPU load.

This certainly not ideal because the reloading is not "instant".

Any plans on allowing for other tooling in the Stencil CLI for "hot reloads", or at least a way to turn it off, so we can use some other tool/framework?