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?
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
.
-
1I 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 8 at 22:40 -
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 9 at 1:38
-
Update: after further testing. The
https
option in thebrowser-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 9 at 15:13