3

I am using DDEV as my local hosting environment, and many of my projects implement front end automation via Gulp. Browsersync is a major component to our front end set-up, and requires ports to be exposed by the DDEV container to the host machine. The problem at hand is two fold, what is the best way to expose a port to the host machine from the container, and what is the best set-up for a Browser-Sync Gulp task in a DDEV environment?

rfay
  • 6,819
  • 35
  • 62
TXChetG
  • 302
  • 2
  • 12
  • I'm using the same automation with ddev, but the key feature of browsersync doesn't work for me, the auto reload if changing files. I'm working on Mac and if I'm saving a file, the gulp watchers don't "see" the changes and so there is no reload. Do you have a solution for this problem? – emjay May 04 '21 at 13:54
  • @emjay were you able to work this out? If not my first suggestion would be to ensure you are using Polling in your watch tasks: `{ usePolling: true, interval: 1000 }` – TXChetG Aug 16 '21 at 13:17

4 Answers4

7

Exposing the Necessary Ports

Part one of this situation requires using a Docker Compose file to expose your container's port to the hose machine. Based on this Answer you need to create a docker-compose.browsersync.yaml file in your .ddev directory.

An example of that file for Browser-Sync would be as follows:

# Override the web container's standard HTTP_EXPOSE and HTTPS_EXPOSE
# This is to expose the browsersync port.
version: '3.6'
services:
  web:
    # ports are a list of exposed *container* ports
    expose:
      - '3000'
    environment:
      - HTTP_EXPOSE=${DDEV_ROUTER_HTTP_PORT}:80,${DDEV_MAILHOG_PORT}:8025,3001:3000
      - HTTPS_EXPOSE=${DDEV_ROUTER_HTTPS_PORT}:80,${DDEV_MAILHOG_HTTPS_PORT}:8025,3000:3000

We expose Port 3000 here because it is the default for Browser-Sync, but could be updated to reflect the needs of your projects.

Note: After adding this file to your .ddev directory you should restart your ddev project.

For more information on defining new services with docker compose, read the DDEV docs.

Setting-Up Browser-Sync in Gulp

This assumes you have a working gulpfile.js ready to do with your other required packages included already. If you're not fully familiar with Browser-Sync and Gulp, please refer to their docs for full details.

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

/*
* Set 'url' (the host and proxy hostnames) to match the canonical url of your ddev project.
* Do not include the http/s protocol in the url. The ddev-router will route the
* host machine's request to the appropriate protocol.
* 
* ex: yoursite.ddev.site
*/
const url = 'yoursite.ddev.site';

/*
* This function only includes the most basic browser-sync settings needed
* to get a watch server running. Please refer to the browser-sync docs for other
* available options.
*/
const startServer = function (done) {
    // Initialize BrowserSync
    browserSync.init({
        proxy: url,
        host: url,
        port: 3000,
    });
    done();
};

exports.startServer = startServer;

You can test this using gulp startServer after initial set-up. Gulp will output a http as the External URL for testing. However thanks to the ddev-router it can be accessed via http or https.

TXChetG
  • 302
  • 2
  • 12
  • 2
    I walked through this, made a couple of minor edits, and after doing it all got it working. The only problem is that I understand is that the `gulp startServer` outputs an http URL for an https site. This could be changed in the HTTP_EXPOSE and HTTPS_EXPOSE to flip the ports they expose, or you could just edit to add a warning about the URL that gulp outputs. – rfay Feb 08 '21 at 22:40
  • 1
    You're correct @rfay that was an oversight on my part. I missed it because of Firefox enforcing https everywhere. There is an option for browser-sync as well to use https. I've update the answer to reflect that option. – TXChetG Feb 09 '21 at 01:38
  • Update: after further testing. The `https` option in the `browser-sync.init()` does not seem to play nicely with the ddev-router. However excluding it allows for the browser-sync server to launch correctly, and it can be accessed on the host machine via http or https. – TXChetG Feb 09 '21 at 15:13
1

Exposing Port 3000 for HTTP & HTTPS for BrowserSync

piggy-backing on the answer from @TXChetG and the answer from @Mario Hernandez

create a file called "docker-compose.browsersync.yaml" inside your hidden /.ddev/ config folder with code below, tabbed properly (which is very important), then run the command "ddev restart"

# Override the web container standard HTTP_EXPOSE and HTTPS_EXPOSE
# This is to expose the browsersync port.
version: '3.6'
services:
  web:
    # ports are a list of exposed *container* ports
    expose:
      - '3000'
    environment:
      - HTTP_EXPOSE=${DDEV_ROUTER_HTTP_PORT}:80
      - HTTPS_EXPOSE=${DDEV_ROUTER_HTTPS_PORT}:80
Stephen Harris
  • 11
  • 2
0

If you are a mac user and browsersync still doesn't work with the above solution, you might need to update your /etc/hosts file as I had to.

You can check more details in this answer.

dcolazin
  • 543
  • 6
  • 22
drup975
  • 1
0

I was unable to run browsersync from within the container. I updated my local system and ran browsersync locally

I used Stephen's solution elsewhere on this page (https://stackoverflow.com/a/70190271/18779 for quick reference).

I am running a Mac so I also did the following:

  • Upgrade homebrew
  • Use brew to install nvm
  • Use nvm to install node 12 (I had to try a few versions to eliminate errors. 12 worked for me.
  • Use npm to rebuild node-sass. I got sass errors before I did this.
  • run browsersync. I am using Drupal and Radix subtheme so, for me, that was cd [subtheme dir] and npm run watch
zkent
  • 980
  • 1
  • 10
  • 22