How to use gulp browser-sync with 2 different docker containers?

Question

I am trying to setup a local development environment with docker.

Those things are already working with my setup below:

container 1: node is running gulp, copy files if any file is changed on the host-system to the container 2 with volumes this works

container 2: apache with php is running, so I am able to see anything in the browser. this works too

Those things do not work yet and I need your help:

if I save any file on the host-system the browser-sync-autoreload should refresh the page on my localhost
I would like to specify the localhost-domain. for example: I would like to use www.dev.fancyprojectonlocalhost.com

How to do those things?

This is my setup:

Dockerfile

FROM node:8.15.0-slim
WORKDIR /usr/src/html/
COPY . /usr/src/html
RUN cd /usr/src/html
RUN npm install --global gulp-cli
RUN npm install
EXPOSE 3000
CMD ["gulp"]

docker-compose.yml

#docker-compose-up -d 
version: '3'
services:
  gulp:
    stdin_open: true
    tty: true
    container_name: docker-gulp
    build: .
    volumes:
      - ".:/usr/src/html"
    ports:
      - "3000:3000"  
      - "3001:3001" 


  web:
    image: php:7.2.2-apache
    container_name: php_web
    volumes: 
      - ./web/:/var/www/html/
    ports:
      - "8888:80"

    stdin_open: true 
    tty: true

Browser-Sync.js from my gulp

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

export function init(callback) {
    browserSync.init({
        //proxy: pkg.urls.dev,
        //proxy: "localhost:8888",  I did try a lot here but nothing did work.
        //port: 8888,
        //notify: false,
        // Do not open browser on start
        //open: false 


    });
    callback();
}

export function reload(callback) {
    browserSync.reload();
    callback();
}

Anybody got an idea how to get a custom domain and autorefresh working? I did try a lot of things but nothing works. For example I did try to use proxy/ports inside the gulpfile, changed the ports from the apache and the node-server etc. but the best result I came up with is the running apache with the working gulp. Without autorefresh and also no special localhost-domain.

Thanks a lot in advance

The problem seems to be that the docker container logically has no access to the host system (browser running here). This means that the docker container cannot tell the browser to refresh the page after something has happened inside the container. With a solution like Mamp, for example, this is different. I tried to play around with the Network command in the Docker containers but still didn't succeed. Does anyone have a solution? — Burg, Jan 27 '19 at 14:13

score 2 · Answer 1 · answered Feb 04 '19 at 15:17

Somebody did help me to find a solution!

Get browser-sync to work:

First of all my browser-sync had some problems:

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

export function init(callback) {
    browserSync.init({
        proxy: 'http://web',
        open: false
    });
    callback();
}

export function reload(callback) {
    browserSync.reload();
    callback();
}

We do need http://web because docker creates a default link between docker containers.

In this case http is important.

web is coming from my Docker-Compose.yml

version: '3'
services:
  gulp:
    stdin_open: true 
    tty: true
    container_name: docker-gulp
    build: . 
    volumes:
      - ".:/usr/src/html"

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

  web:

    restart: always
    image: php:7.2.2-apache
    container_name: php_web
    volumes: 
      - ./web/:/var/www/html/
    ports:
      - "80:80"
    stdin_open: true 
    tty: true

I were able to debug the problem with "curl" from the CLI. docker-compose exec gulp curl http://web is going into my "gulp"-container and checks if it is able to reach the "web"-container. If it is not the case it will not work. Also make sure to open port 3000:3000 for your gulp.

Possible solution to configure different VHOST-Urls without changing the VHOST-Config on your local host

This one seems to be the best and easiest solution: https://hub.docker.com/r/jwilder/nginx-proxy

I haven't had time to find a solution yet, but it's good to know it exists.

How to use gulp browser-sync with 2 different docker containers?

1 Answers1