Docksal: BrowserSync support

Created on 12 Jul 2017  ·  30Comments  ·  Source: docksal/docksal

Hi!

I've been trying to configure BrowserSync on Docksal env but without success. Local and external BrowserSync URLs for the site are not working but URLs for BrowserSync UI are working (that's weird isn't it?!?) and I'm able to see BS dashboard.

Do I have to add something in the docksal.yml file so BrowserSync can proxy site correctly?

Values from terminal for BrowserSync:

 -----------------------------------
       Local: http://localhost:3010
    External: http://172.20.0.4:3010
 -----------------------------------
          UI: http://localhost:3001
 UI External: http://172.20.0.4:3001
 -----------------------------------
[BS] Watching files...
[BS] Couldn't open browser (if you are using BrowserSync in a headless environment, you might want to set the open option to false)
stale 🏷question
Source
picture igorlakic

Most helpful comment

Another variation of the setup can utilize docksal-vhost-proxy routing for BrowserSync itself.

  ...
  browser-sync:
    image: ustwo/browser-sync
    command: start --port 80 --proxy "${VIRTUAL_HOST}" --files "*.css" --no-open
    ports:
      - "3000:80"
      - "3001:3001"
    labels:
      - io.docksal.virtual-host=bs.${VIRTUAL_HOST}
    dns:
      - ${DOCKSAL_DNS1}
      - ${DOCKSAL_DNS2}
  ...

docksal-vhost-proxy at the moment only supports destination ports 80 and 443. So we have to tell BS to listen on port 80 instead of 3000. Then adding the io.docksal.virtual-host=bs.${VIRTUAL_HOST} label tells docksal-vhost-proxy to proxy bs.${VIRTUAL_HOST} accordingly. You can then access to site as before at example.docksal and via BS at bs.example.docksal.

The only problem here is that other devices on the same LAN won't know how to resolve *.docksal domains. You will have mess with the hosts file to let them know the IP of your host. Otherwise just use http://host_ip:3000 as in my previous example.

picture lmakarov on 20 Jul 2017
👍2

All 30 comments

Never worked with BrowserSync but I guess you need to expose port 3001 of the cli container (as I suppose you installed it there) and then access it as http://192.168.64.100:3001.

achekulaev picture achekulaev on 13 Jul 2017

Browsersync is a part of a gulp task in my theme. Can I get a little bit of help here?
I tried to put this in docksal-local.yml:

version: "2"
  services:
    cli:
      ports:
        - "3000:3000"

and this:

version: "2"
  services:
    cli:
      ports:
        - "3000"

and I get this:

ERROR: yaml.parser.ParserError: while parsing a block mapping
  in "/[destination path]/.docksal/docksal-local.yml", line 1, column 1
expected <block end>, but found '<block mapping start>'
  in "/[destination path]/.docksal/docksal-local.yml", line 2, column 3
igorlakic picture igorlakic on 14 Jul 2017

There was a problem because on this example site in which I tried to make things to work I changed domain name to my custom one (so for example, I didn't use example.docksal but dev.example.com which I added correctly in my system hosts file but still -> big mistake; difference is that when you request example.docksal in your browser, Docksal's DNS resolves it to Docksal's IP and your request hits the docksal-vhost-proxy container). And because of that, Browsersync couldn't function properly.
Lesson learned, problem solved! :)

igorlakic picture igorlakic on 14 Jul 2017

@ilakic if you described steps you took to install browsersync I could create an automation for that everyone could benefit from.

achekulaev picture achekulaev on 14 Jul 2017

Sure, I'll help whenever I can but Browsersync isn't isolated piece of software that you install like php modules, it is a Gulp task (it cames as a node package).

I'll try to explain it better this time.
So, if you insert domain.docksal (for example: _example.docksal_) in the vhosts, everything works but if you change a domain name to something like _dev.example.com_ (without docksal suffix), well that's a problem because in that case Docksal cannot resolve DNS so BrowserSync cannot work as it should.

So it's important to know that when you configure VHOSTS that you always put in *.docksal suffix and everything should work just fine.

Browsersync is just a Gulp task and you need to install everything from package.json file and then install Gulp globally, configure everything in the gulpfile.js and it should work just fine (if configured correctly and that's not hard at all).

igorlakic picture igorlakic on 14 Jul 2017

FYI to detail my setup to get this to work,

Install gulp and browsersync

cd MYPROJECT
npm install gulp browsersync --save-dev

gulpfile.js configuration

var gulp = require('gulp');

var browserSync = require('browser-sync').create();

gulp.task('browser-sync', function() {
    browserSync.init({
        proxy: "https://mycoolsite.docksal" // Set to HTTP if not serving over SSL
    });
});

Run Browsersync

gulp browser-sync

Access your docksal site via URL spit out by console

[10:02:51] Using gulpfile ~/mycoolsite/gulpfile.js
[10:02:51] Starting 'browser-sync'...
[10:02:51] Finished 'browser-sync' after 12 ms
[BS] Proxying: https://mycoolsite.docksal
[BS] Access URLs:
 ----------------------------------------
       Local: https://localhost:3000
    External: https://999.999.999.999:3000
 ----------------------------------------
          UI: http://localhost:3001
 UI External: http://999.999.999.999:3001
 ----------------------------------------

Kudos for this setup!
@achekulaev Feel free to add this to any documentation, I can assist there as well.

esteinborn picture esteinborn on 19 Jul 2017
👍1

Cross posting the discussions that happened outside of the issue queue back here.

If you are on Linux/Docker for Mac, then running BrowserSync inside project container can be done like this:

  ...
  browser-sync:
    image: ustwo/browser-sync
    command: start --proxy "${VIRTUAL_HOST}" --files "*.css" --no-open
    ports:
      - "3000:3000"
      - "3001:3001"
    dns:
      - ${DOCKSAL_DNS1}
      - ${DOCKSAL_DNS2}
  ...

By default, docksal-vhost-proxy binds to 192.168.64.100:80, 192.168.64.100:443.
This way we avoid conflicts with other web servers you may have running. This, however, also prevents anyone else on the same LAN from accessing the environment.

It is possible to tell docksal-vhost-proxy to bind to 0.0.0.0 instead and it will listen on all interfaces:

$ DOCKSAL_VHOST_PROXY_IP=0.0.0.0 fin reset proxy

That variable can be added in the global ~/.docksal/docksal.env to make it persistent.
If you have anything else listening on ports 80 and 443 (e.g. local Apache), then fin reset proxy will fail. Shut down the other server and retry.

From there use your hosts LAN IP to access BS from the host and other devices on the same networks: http://host_ip:3000

lmakarov picture lmakarov on 20 Jul 2017
👍1

Another variation of the setup can utilize docksal-vhost-proxy routing for BrowserSync itself.

  ...
  browser-sync:
    image: ustwo/browser-sync
    command: start --port 80 --proxy "${VIRTUAL_HOST}" --files "*.css" --no-open
    ports:
      - "3000:80"
      - "3001:3001"
    labels:
      - io.docksal.virtual-host=bs.${VIRTUAL_HOST}
    dns:
      - ${DOCKSAL_DNS1}
      - ${DOCKSAL_DNS2}
  ...

docksal-vhost-proxy at the moment only supports destination ports 80 and 443. So we have to tell BS to listen on port 80 instead of 3000. Then adding the io.docksal.virtual-host=bs.${VIRTUAL_HOST} label tells docksal-vhost-proxy to proxy bs.${VIRTUAL_HOST} accordingly. You can then access to site as before at example.docksal and via BS at bs.example.docksal.

The only problem here is that other devices on the same LAN won't know how to resolve *.docksal domains. You will have mess with the hosts file to let them know the IP of your host. Otherwise just use http://host_ip:3000 as in my previous example.

lmakarov picture lmakarov on 20 Jul 2017
👍2

Thanks Leonid!
I'll definitely try this out tomorrow morning and will let you know if everything went well on my end (I don't doubt in positive outcome).

Thank you once again on your time!

igorlakic picture igorlakic on 20 Jul 2017

...I couldn't wait morning to test it... :-)
It works - I can connect with various devices and see the page. I will need to test if it refreshes when css changes but I cannot see a reason why that would not work.
Awesome! :-)

1.) I added DOCKSAL_VHOST_PROXY_IP=0.0.0.0 in the ./docksal/docksal.env
2.) fin reset proxy
3.) In the docksal.yml I added this (it has to be indented properly - 2 from start of the line, in line with cli, db and web services):

  browser-sync:
    image: ustwo/browser-sync
    command: start --proxy "${VIRTUAL_HOST}" --files "*.css" --no-open
    ports:
      - "3000:3000"
      - "3001:3001"
    dns:
      - ${DOCKSAL_DNS1}
      - ${DOCKSAL_DNS2}

4.) fin restart
5.) and you only need to enter local IP and port in the browsers (example: 192.168.5.11:3000) and you can rock it out! :)

(I'm using Ubuntu Linux.)

igorlakic picture igorlakic on 21 Jul 2017

For VirtualBox users (Mac and Windows) - there will be an additional step on top of the steps outlined about for Linux.

The Docksal VM (VirtualBox) is accessible by the host only via the host-only VirtualBox network adapter. Other devices on the same LAN won't be able to access it. There are several ways around it.

Option 1

Use port mapping on the NAT interface of the VM - http://take.ms/zGING. This way you get port 3000 exposed on you host and can use that for other devices on your network (host_ip:3000). This will result in an identical to Linux and Docker for Mac experience. I'd recommend sticking with this option.

Option 2

Add a bridge network adapter - http://take.ms/xbFXQ. This way the Docksal VM will get a secondary IP address from your LAN. You can check, which IP was assigned by analyzing the output from fin vm ssh ifconfig.

Anyone on Mac or Windows please test and report back with the results.

lmakarov picture lmakarov on 21 Jul 2017

...after thoroughly testing this BrowserSync Docker image this weekend I'm still unable to make BrowserSync to work properly. Reload functionality after CSS change doesn't work. But it would be nice if more people could test this on their machines and write their feedback here...

For now, only viable solution (at least for me) to make BrowserSync to work properly is by running Gulp/Node from the local machine (outside Docksal environment).

igorlakic picture igorlakic on 24 Jul 2017

Hi

i also try to run browsersync with docksal. My setup is a bit different.

What I've tried

1.) I added DOCKSAL_VHOST_PROXY_IP=0.0.0.0 in the ./docksal/docksal.env
2.) fin reset proxy
3.) Seems Ok I can access the Site from local network also (See https://github.com/docksal/docksal/issues/310#issuecomment-321310463)
4.) Added a local docksal.yml (fin config generate) where I added ports to web service

    ports:
      - "3000:3000"
      - "3001:3001"

5.) fin init (installs wordpress, db ... )
6.) fin yarn start

[BS] [HTML Injector] Running...
[BS] Proxying: http://myproject.docksal
[BS] Access URLs:
 -----------------------------------
       Local: http://localhost:3000
    External: http://172.20.0.3:3000
 -----------------------------------
          UI: http://localhost:3001
 UI External: http://172.20.0.3:3001
 -----------------------------------
[BS] Watching files...
[BS] Couldn't open browser (if you are using BrowserSync in a headless environment, you might want to set the open option to false)

commands/yarn (example: fin yarn start)

#!/usr/bin/env bash
cd $PROJECT_ROOT_SITE/docroot/web/app/themes/mytheme
fin exec "yarn $1"

Relevant Parts of Code:

Path: docroot/web/app/themes/mytheme/package.json

{
  ...
  "scripts": {
    "start": "webpack --hide-modules --watch --config assets/build/webpack.config.js"
  }
  ...
}

https://github.com/roots/sage/blob/9.0.0-alpha.4/package.json
https://github.com/roots/sage/blob/9.0.0-alpha.4/assets/build/webpack.config.watch.js

Conclusion

```curl -sSf http://myproject.docksal:3000
curl: (7) Failed to connect to myproject.docksal port 3000:


EDIT: 

Here is some progress ... maybe

browser-sync:
image: ustwo/browser-sync
command: start --hide-modules --watch --config ./assets/build/webpack.config.js --no-open
volumes:
- project_root:/var/www/${DOCROOT:-docroot}/app/themes/mytheme:rw,nocopy
ports:
- "3000:3000"
- "3001:3001"
#labels:
# - io.docksal.virtual-host=bs.${VIRTUAL_HOST}
dns:
- ${DOCKSAL_DNS1}
- ${DOCKSAL_DNS2}


Gives me `Configuration file '/var/www/site/web/app/themes/mytheme/assets/build/webpack.config.js' not found`

If i do

browser-sync:
image: ustwo/browser-sync
command: start --hide-modules --watch --config /var/www/${DOCROOT:-docroot}/assets/build/webpack.config.js --no-open
volumes:
- project_root:/var/www/:rw,nocopy
ports:
- "3000:3000"
- "3001:3001"
#labels:
# - io.docksal.virtual-host=bs.${VIRTUAL_HOST}
dns:
- ${DOCKSAL_DNS1}
- ${DOCKSAL_DNS2}

It seems to go through but then inside webpack.config.json `process.cwd` path is `source` instead of /var/www/site/web/app/themes/mytheme

So it fails:

**Output of `fin config`:**

<details>
  <summary>fin logs | grep 'browser-sync'</summary>

browser-sync_1 | { copy: 'images//',
browser-sync_1 | proxyUrl: 'http://localhost:3000',
browser-sync_1 | cacheBusting: '[name]_[hash:8]',
browser-sync_1 | paths:
browser-sync_1 | { root: '/srv/www/wpstack3/web/app/themes/mjtheme-child',
browser-sync_1 | assets: '/srv/www/wpstack3/web/app/themes/mjtheme-child/assets',
browser-sync_1 | dist: '/srv/www/wpstack3/web/app/themes/mjtheme-child/dist' },
browser-sync_1 | enabled:
browser-sync_1 | { sourceMaps: true,
browser-sync_1 | optimize: false,
browser-sync_1 | cacheBusting: false,
browser-sync_1 | watcher: true },
browser-sync_1 | watch: [ 'template-parts//.php', 'src/*/.php' ],
browser-sync_1 | browsers: [ 'last 2 versions', 'android 4', 'opera 12' ],
browser-sync_1 | entry:
browser-sync_1 | { main: [ './scripts/main.js', './styles/main.scss' ],
browser-sync_1 | customizer: [ './scripts/customizer.js' ] },
browser-sync_1 | publicPath: '/app/themes/mjtheme-child/dist/',
browser-sync_1 | devUrl: 'http://wpstack3.docksal',
browser-sync_1 | env: { production: false, development: true },
browser-sync_1 | manifest: {} }
browser-sync_1 | module.js:471
browser-sync_1 | throw err;
browser-sync_1 | ^
browser-sync_1 |
browser-sync_1 | Error: Cannot find module '/source'
browser-sync_1 | at Function.Module._resolveFilename (module.js:469:15)
browser-sync_1 | at Function.Module._load (module.js:417:25)
browser-sync_1 | at Module.require (module.js:497:17)
browser-sync_1 | at require (internal/module.js:20:19)
browser-sync_1 | at requirePlugin (/usr/local/lib/node_modules/browser-sync/lib/plugins.js:149:43)
browser-sync_1 | at /usr/local/lib/node_modules/browser-sync/node_modules/immutable/dist/immutable.js:3018:46
browser-sync_1 | at List.__iterate (/usr/local/lib/node_modules/browser-sync/node_modules/immutable/dist/immutable.js:2208:13)
browser-sync_1 | at IndexedIterable.mappedSequence.__iterateUncached (/usr/local/lib/node_modules/browser-sync/node_modules/immutable/dist/immutable.js:3017:23)
browser-sync_1 | at seqIterate (/usr/local/lib/node_modules/browser-sync/node_modules/immutable/dist/immutable.js:606:16)
browser-sync_1 | at IndexedIterable.IndexedSeq.__iterate (/usr/local/lib/node_modules/browser-sync/node_modules/immutable/dist/immutable.js:322:14)
```

regenrek picture regenrek on 10 Aug 2017

If I understand this and this right you need:

  browser-sync:
      image: ustwo/browser-sync
      command: start --hide-modules --watch --config /source/${DOCROOT:-docroot}/assets/build/webpack.config.js --no-open
      volumes:
        - project_root:/source:rw,nocopy
      ports:
        - "3000:3000"
        - "3001:3001"
      dns:
        - ${DOCKSAL_DNS1}
        - ${DOCKSAL_DNS2}

or

  browser-sync:
      image: ustwo/browser-sync
      command: start --hide-modules --watch --config /source/webpack.config.js --no-open
      volumes:
        - ${PROJECT_ROOT}/${DOCROOT:-docroot}/assets/build:/source:rw,nocopy
      ports:
        - "3000:3000"
        - "3001:3001"
      dns:
        - ${DOCKSAL_DNS1}
        - ${DOCKSAL_DNS2}

As I dont really know how browsersync works and where will it look for files. I assume it expected them to be mapped to /source folder.

achekulaev picture achekulaev on 10 Aug 2017

@achekulaev Oh yes thank you. But after I run the thing I'll get the output like in my comment above - under "fin logs | grep 'browser-sync'".

Anyway why not exposing ports 3000 & 3001 at web service are there any problems here? 

  web:
    hostname: web
    image: docksal/web:2.0-apache2.4
    volumes:
      # Project root volume
      - project_root:/var/www:ro,nocopy
    labels:
      - io.docksal.virtual-host=${VIRTUAL_HOST},*.${VIRTUAL_HOST}
      - io.docksal.project-root=${PROJECT_ROOT}
    environment:
      - APACHE_DOCUMENTROOT=/var/www/${DOCROOT:-docroot}
      - APACHE_BASIC_AUTH_USER
      - APACHE_BASIC_AUTH_PASS
    depends_on:
      - cli
      - webpack
    dns:
      - ${DOCKSAL_DNS1}
      - ${DOCKSAL_DNS2}
    ports:
      - "3000:3000"
      - "3001:3001"

Alternative possibility: Also tried with https://github.com/jmfirth/docker-webpack to use webpackcommando instead of browsersync as starting script. Fails also. Really difficult to get this set up.

Regards

regenrek picture regenrek on 10 Aug 2017

after I run the thing I'll get the output like in my comment above

In your comment above you were not mapping your files to /source, you were mapping them to /var/www/.

Anyway why not exposing ports 3000 & 3001 at web service are there any problems here?

I don't see a reason why you would want to expose ports 3000 & 3001 of a container that only runs Apache.

achekulaev picture achekulaev on 11 Aug 2017

I'm almost there ...

First I wrote my own Webpack Dockerfile

Dockerfile

FROM node:6
MAINTAINER Kevin Regenrek <[email protected]>

RUN npm install -g webpack yarn

WORKDIR /var/www/site/web/app/themes/mytheme/

#ENTRYPOINT ["webpack"]

docksal.yml

  webpack:
    image: mj-docker-webpack:latest
    command: webpack --hide-modules --watch --config ./assets/build/webpack.config.js
    volumes:
      - project_root:/var/www:rw,nocopy
    ports:
      - "3000:3000"
      - "3001:3001"
    dns:
      - ${DOCKSAL_DNS1}
      - ${DOCKSAL_DNS2}

Test

http://mytheme.docksal [works as usual]
http://mytheme.docksal:3001 [works browsersync ui]
http://mytheme.docksal:3000 [runs endless... not working]

fin status

       Name                     Command               State                       Ports
------------------------------------------------------------------------------------------------------------
mytheme_cli_1       /opt/startup.sh supervisord      Up      22/tcp, 9000/tcp
mytheme_db_1        /entrypoint.sh mysqld            Up      0.0.0.0:32876->3306/tcp
mytheme_web_1       httpd-foreground                 Up      443/tcp, 80/tcp
mytheme_webpack_1   webpack --hide-modules --w ...   Up      0.0.0.0:3000->3000/tcp, 0.0.0.0:3001->3001/tcp

netstat -tulpn | grep:30

tcp6       0      0 :::3000                 :::*                    LISTEN      -
tcp6       0      0 :::3001                 :::*                    LISTEN      -

fin logs

webpack_1  | [BS] [HTML Injector] Running...
webpack_1  | [BS] Proxying: http://mytheme.docksal
webpack_1  | [BS] Access URLs:
webpack_1  |  -----------------------------------
webpack_1  |        Local: http://localhost:3000
webpack_1  |     External: http://172.20.0.5:3000
webpack_1  |  -----------------------------------
webpack_1  |           UI: http://localhost:3001
webpack_1  |  UI External: http://172.20.0.5:3001
webpack_1  |  -----------------------------------
webpack_1  | [BS] Watching files...
webpack_1  | [BS] Couldn't open browser (if you are using BrowserSync in a headless environment, you might want to set the open option to false)

Seems all fine to me. Just opening with :3000 Port in Browser does an endless loop without any message.

Regards

regenrek picture regenrek on 11 Aug 2017

Out of curiosity, if you change port mapping like this (map 3000 => 3001), do you get the BrowserSync UI on both ports (3000 and 3001)?

docksal.yml

  webpack:
    image: mj-docker-webpack:latest
    command: webpack --hide-modules --watch --config ./assets/build/webpack.config.js
    volumes:
      - project_root:/var/www:rw,nocopy
    ports:
      - "3000:3001"
      - "3001:3001"
    dns:
      - ${DOCKSAL_DNS1}
      - ${DOCKSAL_DNS2}

If so, there is no issue with exposing ports, but rather with BrowserSync connecting to http://mytheme.docksal.

Try entering the webpack container and pinging mytheme.docksal from there.

$ fin bash webpack (or $ fin docker exec -it mytheme_webpack_1 sh)
ping mytheme.docksal

Maybe, install lynx there (a text browser) and and try lynx http://mytheme.docksal.

Another thing to try is to tell BrowserSync to proxy http://web instead of http://mytheme.docksal (go directly to the web container, skipping vhost-proxy routing).

If all of the above works, then BrowserSync settings are to be blamed.

lmakarov picture lmakarov on 11 Aug 2017

Out of curiosity, if you change port mapping like this (map 3000 => 3001), do you get the BrowserSync UI on both ports (3000 and 3001)?

Yep!

root@5cbe6ac00969:/var/www/site/web/app/themes/mytheme# curl -sSf http://mytheme.docksal
curl: (6) Could not resolve host: mytheme.docksal

root@5cbe6ac00969:/var/www/site/web/app/themes/mytheme# ping mytheme.docksal
ping: unknown host

Btw: Browsersync works great outside the container. But this destroys the meaning of using containers. So Browsersync config looks fine. Like discussed here: https://github.com/roots/sage/issues/1660#issuecomment-243442470

regenrek picture regenrek on 11 Aug 2017

@regenrek fin config, fin sysinfo, fin docker inspect mytheme_webpack_1

Please use the wrappers to paste these here like we have in the "New issue" template.

lmakarov picture lmakarov on 11 Aug 2017

Ok here we go with a fresh project:


fin config

WARNING: No swap limit support
---------------------
COMPOSE_PROJECT_NAME_SAFE: wpstack4
COMPOSE_FILE:
/home/mj/.docksal/stacks/volumes-bind.yml
/home/mj/projects/wpstack4/.docksal/docksal.yml
ENV_FILE:
/home/mj/projects/wpstack4/.docksal/docksal.env

PROJECT_ROOT: /home/mj/projects/wpstack4
DOCROOT: site/web
VIRTUAL_HOST: wpstack4.docksal
VIRTUAL_HOST_ALIASES: *.wpstack4.docksal
IP: 192.168.64.100
MYSQL: 192.168.64.100:32884

Docker Compose configuration
---------------------
services:
  cli:
    dns:
    - 192.168.64.100
    - 208.67.222.222
    environment:
      HOST_GID: '1000'
      HOST_UID: '1000'
      XDEBUG_ENABLED: '0'
    hostname: cli
    image: docksal/cli:1.3-php7
    volumes:
    - docksal_ssh_agent:/.ssh-agent:ro
    - project_root:/var/www:rw,nocopy
  db:
    dns:
    - 192.168.64.100
    - 208.67.222.222
    environment:
      MYSQL_DATABASE: wpstack4db
      MYSQL_PASSWORD: demo
      MYSQL_ROOT_PASSWORD: demo
      MYSQL_USER: wpstack4usr
    hostname: db
    image: docksal/db:1.1-mysql-5.6
    ports:
    - 03306/tcp
  web:
    depends_on:
      cli:
        condition: service_started
    dns:
    - 192.168.64.100
    - 208.67.222.222
    environment:
      APACHE_BASIC_AUTH_PASS: null
      APACHE_BASIC_AUTH_USER: null
      APACHE_DOCUMENTROOT: /var/www/site/web
    hostname: web
    image: docksal/web:2.0-apache2.4
    labels:
      io.docksal.project-root: /home/mj/projects/wpstack4
      io.docksal.virtual-host: wpstack4.docksal,*.wpstack4.docksal
    volumes:
    - project_root:/var/www:ro,nocopy
  webpack:
    command: webpack --hide-modules --watch --config ./assets/build/webpack.config.js
    dns:
    - 192.168.64.100
    - 208.67.222.222
    image: mj-docker-webpack:latest
    ports:
    - 3000:3000/tcp
    - 3001:3001/tcp
    volumes:
    - project_root:/var/www:rw,nocopy
version: '2.1'
volumes:
  docksal_ssh_agent:
    external: true
  project_root:
    driver: local
    driver_opts:
      device: /home/mj/projects/wpstack4
      o: bind
      type: none

---------------------




fin sysinfo

WARNING: No swap limit support
███  OS & BASICS
Linux mjdev17 4.4.0-87-generic #110-Ubuntu SMP Tue Jul 18 12:55:35 UTC 2017 x86_64 x86_64 x86_64 GNU/Linux
Ubuntu 16.04
fin version: 1.22.0
Mode:  Native / Docker for Mac/Windows
███  DOCKER
DOCKER_HOST:

Docker: Client:
 Version:      17.06.0-ce
 API version:  1.30
 Go version:   go1.8.3
 Git commit:   02c1d87
 Built:        Fri Jun 23 21:23:31 2017
 OS/Arch:      linux/amd64

Server:
 Version:      17.06.0-ce
 API version:  1.30 (minimum version 1.12)
 Go version:   go1.8.3
 Git commit:   02c1d87
 Built:        Fri Jun 23 21:19:04 2017
 OS/Arch:      linux/amd64
 Experimental: false
███  DOCKER COMPOSE
Docker Compose: docker-compose version 1.14.0, build c7bdf9e
docker-py version: 2.3.0
CPython version: 2.7.13
OpenSSL version: OpenSSL 1.0.1t  3 May 2016
WARNING: No swap limit support
███  DOCKER: IMAGES
REPOSITORY            TAG                 IMAGE ID            CREATED             SIZE
mj-docker-webpack     latest              02eab8d7c034        4 hours ago         264MB
<none>                <none>              0dac8a62ea6a        4 hours ago         264MB
<none>                <none>              64dcfd1b4538        4 hours ago         264MB
<none>                <none>              1a2b634ee600        4 hours ago         705MB
<none>                <none>              e2b144eeaed5        4 hours ago         705MB
<none>                <none>              27dd278d24a2        4 hours ago         705MB
<none>                <none>              c0ed0345a7ca        4 hours ago         705MB
<none>                <none>              1ea5660074ca        5 hours ago         705MB
<none>                <none>              d5f09e28968b        5 hours ago         702MB
<none>                <none>              7251ab5a4963        5 hours ago         702MB
<none>                <none>              0bb53fdb68d1        6 hours ago         702MB
<none>                <none>              d6e31e490490        9 hours ago         702MB
<none>                <none>              55eb4902af1f        9 hours ago         705MB
<none>                <none>              bd2918648cf8        16 hours ago        705MB
<none>                <none>              41b8e560a818        16 hours ago        705MB
<none>                <none>              d7acaf3ddde3        16 hours ago        705MB
ustwo/browser-sync    latest              1e51cae12c8e        41 hours ago        262MB
node                  6-slim              e42b0ed3306c        42 hours ago        215MB
node                  6                   3d258692b9fa        42 hours ago        656MB
docksal/web           2.0-apache2.4       7f75db9a6aa7        3 days ago          87.5MB
docksal/vhost-proxy   1.1                 898fb21e7f2d        9 days ago          158MB
docksal/cli           1.3-php7            1442dc481915        2 weeks ago         752MB
docksal/db            1.1-mysql-5.6       6feb79af9597        2 weeks ago         298MB
docksal/dns           1.0                 20c7a535479d        6 months ago        61.6MB
docksal/ssh-agent     1.0                 148220cc033d        6 months ago        12.2MB
jmfirth/webpack       6                   60db7c9bbe85        9 months ago        694MB
███  DOCKER: CONTAINERS
CONTAINER ID        IMAGE                       COMMAND                  CREATED             STATUS                    PORTS                                      NAMES
66de11f0dded        mj-docker-webpack:latest    "webpack --hide-mo..."   4 minutes ago       Up 4 minutes              0.0.0.0:3000-3001->3000-3001/tcp           wpstack4_webpack_1
262a455b9a8a        docksal/web:2.0-apache2.4   "httpd-foreground"       9 minutes ago       Up 9 minutes              80/tcp, 443/tcp                            wpstack4_web_1
34566a9d3154        docksal/cli:1.3-php7        "/opt/startup.sh s..."   10 minutes ago      Up 9 minutes (healthy)    22/tcp, 9000/tcp                           wpstack4_cli_1
ccfcaa609004        docksal/db:1.1-mysql-5.6    "/entrypoint.sh my..."   10 minutes ago      Up 9 minutes              0.0.0.0:32884->3306/tcp                    wpstack4_db_1
1c0c4e16158d        docksal/web:2.0-apache2.4   "httpd-foreground"       21 minutes ago      Up 21 minutes             80/tcp, 443/tcp                            tkw_web_1
765f5d811fc8        docksal/cli:1.3-php7        "/opt/startup.sh s..."   21 minutes ago      Up 21 minutes (healthy)   22/tcp, 9000/tcp                           tkw_cli_1
655ba656d697        docksal/db:1.1-mysql-5.6    "/entrypoint.sh my..."   21 minutes ago      Up 21 minutes             0.0.0.0:32883->3306/tcp                    tkw_db_1
9d4f7054a873        docksal/dns:1.0             "/opt/entrypoint.s..."   2 hours ago         Up 2 hours                192.168.64.100:53->53/udp                  docksal-dns
496d0e69fe7b        docksal/vhost-proxy:1.1     "docker-entrypoint..."   23 hours ago        Up 23 hours               0.0.0.0:80->80/tcp, 0.0.0.0:443->443/tcp   docksal-vhost-proxy
5717a412d8ec        docksal/web:2.0-apache2.4   "httpd-foreground"       46 hours ago        Up 46 hours               80/tcp, 443/tcp                            test2_web_1
8d8e2f6a2a53        docksal/cli:1.3-php7        "/opt/startup.sh s..."   46 hours ago        Up 46 hours (healthy)     22/tcp, 9000/tcp                           test2_cli_1
1ef341f121c1        docksal/db:1.1-mysql-5.6    "/entrypoint.sh my..."   46 hours ago        Up 46 hours               0.0.0.0:32795->3306/tcp                    test2_db_1
554b9b365b97        docksal/web:2.0-apache2.4   "httpd-foreground"       46 hours ago        Up 46 hours               80/tcp, 443/tcp                            test_web_1
6408acaeb8ab        docksal/cli:1.3-php7        "/opt/startup.sh s..."   46 hours ago        Up 46 hours (healthy)     22/tcp, 9000/tcp                           test_cli_1
6750bcf92cff        docksal/db:1.1-mysql-5.6    "/entrypoint.sh my..."   46 hours ago        Up 46 hours               0.0.0.0:32794->3306/tcp                    test_db_1
8ba4bea70b99        docksal/ssh-agent:1.0       "/run.sh ssh-agent"      46 hours ago        Up 46 hours                                                          docksal-ssh-agent




fin docker inspect wpstack4_webpack_1

[
    {
        "Id": "66de11f0dded5478e59ffd293319f2654b9a9f81f94ef86bcb2bcc7890ea5e13",
        "Created": "2017-08-11T13:11:32.471544681Z",
        "Path": "webpack",
        "Args": [
            "--hide-modules",
            "--watch",
            "--config",
            "./assets/build/webpack.config.js"
        ],
        "State": {
            "Status": "running",
            "Running": true,
            "Paused": false,
            "Restarting": false,
            "OOMKilled": false,
            "Dead": false,
            "Pid": 17867,
            "ExitCode": 0,
            "Error": "",
            "StartedAt": "2017-08-11T13:11:32.930771841Z",
            "FinishedAt": "0001-01-01T00:00:00Z"
        },
        "Image": "sha256:02eab8d7c03406d07b7054efcc0ba6df3d4b0a7b79bf9ea56d1a26606e0c861f",
        "ResolvConfPath": "/var/lib/docker/containers/66de11f0dded5478e59ffd293319f2654b9a9f81f94ef86bcb2bcc7890ea5e13/resolv.conf",
        "HostnamePath": "/var/lib/docker/containers/66de11f0dded5478e59ffd293319f2654b9a9f81f94ef86bcb2bcc7890ea5e13/hostname",
        "HostsPath": "/var/lib/docker/containers/66de11f0dded5478e59ffd293319f2654b9a9f81f94ef86bcb2bcc7890ea5e13/hosts",
        "LogPath": "/var/lib/docker/containers/66de11f0dded5478e59ffd293319f2654b9a9f81f94ef86bcb2bcc7890ea5e13/66de11f0dded5478e59ffd293319f2654b9a9f81f94ef86bcb2bcc7890ea5e13-json.log",
        "Name": "/wpstack4_webpack_1",
        "RestartCount": 0,
        "Driver": "aufs",
        "MountLabel": "",
        "ProcessLabel": "",
        "AppArmorProfile": "docker-default",
        "ExecIDs": null,
        "HostConfig": {
            "Binds": [
                "wpstack4_project_root:/var/www:rw,nocopy"
            ],
            "ContainerIDFile": "",
            "LogConfig": {
                "Type": "json-file",
                "Config": {}
            },
            "NetworkMode": "wpstack4_default",
            "PortBindings": {
                "3000/tcp": [
                    {
                        "HostIp": "",
                        "HostPort": "3000"
                    }
                ],
                "3001/tcp": [
                    {
                        "HostIp": "",
                        "HostPort": "3001"
                    }
                ]
            },
            "RestartPolicy": {
                "Name": "",
                "MaximumRetryCount": 0
            },
            "AutoRemove": false,
            "VolumeDriver": "",
            "VolumesFrom": [],
            "CapAdd": null,
            "CapDrop": null,
            "Dns": [
                "192.168.64.100",
                "208.67.222.222"
            ],
            "DnsOptions": null,
            "DnsSearch": null,
            "ExtraHosts": null,
            "GroupAdd": null,
            "IpcMode": "",
            "Cgroup": "",
            "Links": null,
            "OomScoreAdj": 0,
            "PidMode": "",
            "Privileged": false,
            "PublishAllPorts": false,
            "ReadonlyRootfs": false,
            "SecurityOpt": null,
            "UTSMode": "",
            "UsernsMode": "",
            "ShmSize": 67108864,
            "Runtime": "runc",
            "ConsoleSize": [
                0,
                0
            ],
            "Isolation": "",
            "CpuShares": 0,
            "Memory": 0,
            "NanoCpus": 0,
            "CgroupParent": "",
            "BlkioWeight": 0,
            "BlkioWeightDevice": null,
            "BlkioDeviceReadBps": null,
            "BlkioDeviceWriteBps": null,
            "BlkioDeviceReadIOps": null,
            "BlkioDeviceWriteIOps": null,
            "CpuPeriod": 0,
            "CpuQuota": 0,
            "CpuRealtimePeriod": 0,
            "CpuRealtimeRuntime": 0,
            "CpusetCpus": "",
            "CpusetMems": "",
            "Devices": null,
            "DeviceCgroupRules": null,
            "DiskQuota": 0,
            "KernelMemory": 0,
            "MemoryReservation": 0,
            "MemorySwap": 0,
            "MemorySwappiness": -1,
            "OomKillDisable": false,
            "PidsLimit": 0,
            "Ulimits": null,
            "CpuCount": 0,
            "CpuPercent": 0,
            "IOMaximumIOps": 0,
            "IOMaximumBandwidth": 0
        },
        "GraphDriver": {
            "Data": null,
            "Name": "aufs"
        },
        "Mounts": [
            {
                "Type": "volume",
                "Name": "wpstack4_project_root",
                "Source": "/var/lib/docker/volumes/wpstack4_project_root/_data",
                "Destination": "/var/www",
                "Driver": "local",
                "Mode": "rw,nocopy",
                "RW": true,
                "Propagation": ""
            }
        ],
        "Config": {
            "Hostname": "66de11f0dded",
            "Domainname": "",
            "User": "",
            "AttachStdin": false,
            "AttachStdout": false,
            "AttachStderr": false,
            "ExposedPorts": {
                "3000/tcp": {},
                "3001/tcp": {}
            },
            "Tty": false,
            "OpenStdin": false,
            "StdinOnce": false,
            "Env": [
                "PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin",
                "NPM_CONFIG_LOGLEVEL=info",
                "NODE_VERSION=6.11.2",
                "YARN_VERSION=0.27.5"
            ],
            "Cmd": [
                "webpack",
                "--hide-modules",
                "--watch",
                "--config",
                "./assets/build/webpack.config.js"
            ],
            "Image": "mj-docker-webpack:latest",
            "Volumes": {
                "/var/www": {}
            },
            "WorkingDir": "/var/www/site/web/app/themes/mjtheme-child",
            "Entrypoint": null,
            "OnBuild": null,
            "Labels": {
                "com.docker.compose.config-hash": "c9187259e1acff51768ede39433b2ae0766aacb9083ab92c8148aabcc706518b",
                "com.docker.compose.container-number": "1",
                "com.docker.compose.oneoff": "False",
                "com.docker.compose.project": "wpstack4",
                "com.docker.compose.service": "webpack",
                "com.docker.compose.version": "1.14.0"
            }
        },
        "NetworkSettings": {
            "Bridge": "",
            "SandboxID": "34b881e63f7141538ca959b702f99d0d4adc351ca81c1df39d999092e881bf66",
            "HairpinMode": false,
            "LinkLocalIPv6Address": "",
            "LinkLocalIPv6PrefixLen": 0,
            "Ports": {
                "3000/tcp": [
                    {
                        "HostIp": "0.0.0.0",
                        "HostPort": "3000"
                    }
                ],
                "3001/tcp": [
                    {
                        "HostIp": "0.0.0.0",
                        "HostPort": "3001"
                    }
                ]
            },
            "SandboxKey": "/var/run/docker/netns/34b881e63f71",
            "SecondaryIPAddresses": null,
            "SecondaryIPv6Addresses": null,
            "EndpointID": "",
            "Gateway": "",
            "GlobalIPv6Address": "",
            "GlobalIPv6PrefixLen": 0,
            "IPAddress": "",
            "IPPrefixLen": 0,
            "IPv6Gateway": "",
            "MacAddress": "",
            "Networks": {
                "wpstack4_default": {
                    "IPAMConfig": null,
                    "Links": null,
                    "Aliases": [
                        "webpack",
                        "66de11f0dded"
                    ],
                    "NetworkID": "d424c9aa0ceeed3df7782cabfea053e8c72cdc8f61f032e49749084ac43caa32",
                    "EndpointID": "03b6e965214055d83052043d71e559781eafd57703c303fd854aa0c701869c60",
                    "Gateway": "172.28.0.1",
                    "IPAddress": "172.28.0.6",
                    "IPPrefixLen": 16,
                    "IPv6Gateway": "",
                    "GlobalIPv6Address": "",
                    "GlobalIPv6PrefixLen": 0,
                    "MacAddress": "02:42:ac:1c:00:06",
                    "DriverOpts": null
                }
            }
        }
    }
]

regenrek picture regenrek on 11 Aug 2017

@regenrek please run these on the host and then inside the cli and mytheme_webpack_1 containers.

ping -c1 192.168.64.100
nslookup test.docksal 192.168.64.100

Also, have you tried what this already?

Another thing to try is to tell BrowserSync to proxy http://web instead of http://mytheme.docksal (go directly to the web container, skipping vhost-proxy routing).

lmakarov picture lmakarov on 11 Aug 2017

host

ping -c1 192.168.64.100
PING 192.168.64.100 (192.168.64.100) 56(84) bytes of data.
64 bytes from 192.168.64.100: icmp_seq=1 ttl=64 time=0.061 ms

--- 192.168.64.100 ping statistics ---
1 packets transmitted, 1 received, 0% packet loss, time 0ms
rtt min/avg/max/mdev = 0.061/0.061/0.061/0.000 ms

nslookup test.docksal 192.168.64.100
Server:     192.168.64.100
Address:    192.168.64.100#53

Name:   test.docksal
Address: 192.168.64.100

ping @ wpstack4_webpack_1

fin docker exec -it wpstack4_webpack_1 ping -c1 192.168.64.100
WARNING: No swap limit support
WARNING: No swap limit support
PING 192.168.64.100 (192.168.64.100): 56 data bytes
64 bytes from 192.168.64.100: icmp_seq=0 ttl=64 time=0.075 ms
--- 192.168.64.100 ping statistics ---
1 packets transmitted, 1 packets received, 0% packet loss
round-trip min/avg/max/stddev = 0.075/0.075/0.075/0.000 ms

nslookup @ wpstack4_webpack_1

command not found #you need it?

ping @ cli

ping -c1 192.168.64.100
PING 192.168.64.100 (192.168.64.100): 56 data bytes
64 bytes from 192.168.64.100: icmp_seq=0 ttl=64 time=0.121 ms
--- 192.168.64.100 ping statistics ---
1 packets transmitted, 1 packets received, 0% packet loss
round-trip min/avg/max/stddev = 0.121/0.121/0.121/0.000 ms

nslookup @ cli

docker@cli:/var/www$ nslookup test.docksal 192.168.64.100
;; connection timed out; no servers could be reached

Also, have you tried what this already?

Another thing to try is to tell BrowserSync to proxy http://web instead of http://mytheme.docksal >(go directly to the web container, skipping vhost-proxy routing).

Yes tried it but didn't go in further because I want to keep the paths with ports.

regenrek picture regenrek on 11 Aug 2017

So here's the root of the problem:

docker@cli:/var/www$ nslookup test.docksal 192.168.64.100
;; connection timed out; no servers could be reached

That means that internal Docksal DNS is not working for containers, so they are not able to resolved *.docksal domains. Since ping works from cli to 192.168.64.100 and also since both ping and nslookup work from the host, it's pretty weird that nslookup wouldn't not work in cli.

What if you run these in cli?

nslookup test.docksal
nslookup google.com
lmakarov picture lmakarov on 11 Aug 2017

Hey here is the output:

docker@cli:/var/www$ nslookup test.docksal
Server:     127.0.0.11
Address:    127.0.0.11#53

** server can't find test.docksal: NXDOMAIN

docker@cli:/var/www$ nslookup google.com
Server:     127.0.0.11
Address:    127.0.0.11#53

Non-authoritative answer:
Name:   google.com
Address: 216.58.207.78

docker@cli:/var/www$
regenrek picture regenrek on 11 Aug 2017

Did anyone get this working successfully? We also have it displaying properly, but CSS changes don't get injected.

jsheffers picture jsheffers on 25 Jul 2018

@jsheffers since the tool seems to be working for you, just not fully, isn't the issue specific to BrowserSync then rather than Docksal?

achekulaev picture achekulaev on 26 Jul 2018

@achekulaev: @jsheffers and I work at the same company and are trying to debug this issue. We've spent a lot of time trying to get this to fully work. We are so close...

With the help of this discussion we got the :3000 and :3001 ports to load and browsersync is loading (it is injecting the JS on the page), but when we make changes to the Sass, the browser doesn't auto update without manually refreshing the browser. The gulp watch command picks up the change on the container but the page doesn't show the update (which defeats the purpose of browsersync).

Our goal is to be able to run 100% of the frontend node tools in fin bash. All of the docksal settings + config is pushed to this repo. In the readme there is a browsersync section to manually open up the 3000 port in the virtual box VM.

Can you see if there is an obvious problem with this setup? It just seems like something on the container end might be blocking something from browsersync. Based on this thread, it doesn't look like anyone was able to get this fully working where they use browsersync on the actual container. Any help would be appreciated. Thanks!

croane picture croane on 26 Jul 2018

@croane I don't see any obvious problems. Just not sure what --proxy option does, I don't see it used in the commends above.
Have you tried without it?
Do you see any related errors in fin logs browser-sync or in JS console in browser?
Have you tried another approach, this one https://github.com/docksal/docksal/issues/285#issuecomment-321769930 with mj-docker-webpack?

achekulaev picture achekulaev on 26 Jul 2018

I have played with the non proxy options. What I may end up doing is try to get this working on a basic vanilla site so it is easier to play with, and try the webpack option. It is possible this is how we have the site working.

We are thinking about just using a JS tool like Live.js and not use browsersync. So far it looks like it works fine and doesn't require node or anything (you just include the JS file your site on local and it auto works).

This might be something that works much better once we can go to the native docker option on mac.

croane picture croane on 26 Jul 2018
Was this page helpful?
0 / 5 - 0 ratings

Related issues

mikecrittenden picture mikecrittenden  ·  17Comments
loopy3025 picture loopy3025  ·  30Comments
ArtuGit picture ArtuGit  ·  19Comments
lmakarov picture lmakarov  ·  49Comments
lmakarov picture lmakarov  ·  18Comments