ddev / ddev-browsersync

Auto-refresh HTTPS page on changes with DDEV

---

DDEV is an open-source tool for running local web development environments for PHP, Python and Node.js, ready in minutes. Its powerful, flexible per-project environment configurations can be extended, version controlled, and shared. DDEV allows development teams to adopt a consistent Docker workflow without the complexities of bespoke configuration.

Documentation

To check out live examples, docs, contributor live training, guides and more visit ddev.com and ddev.readthedocs.io

Questions

If you need help, our friendly community provides great support.

Wonderful Sponsors

DDEV is an Apache License 2.0 open-source project with its ongoing development made possible entirely by the support of these awesome backers. If you'd like to join them, please consider sponsoring DDEV development.

Contributing

See “How can I contribute to DDEV?” in the FAQ, and the Contributing page.

Get Started

1. Check System Requirements: macOS (Intel and Apple Silicon), Windows 10/11, WSL2, Linux, Gitpod, and GitHub Codespaces.
2. Install a Docker provider and DDEV.
3. Try a CMS Quick Start Guide.

Additionally, https://ddev.com/get-started/ provides an up-to-date getting-started guide.

Highlighted Features

• Quickly create local web development environments based on code repositories, with minimal configuration.
• Import a database to any of your local environments.
• Import upload files to match the project (e.g. Drupal sites/default/files or WordPress wp-content/uploads).
• Customizable integration with hosting platforms like Platform.sh, Pantheon, Acquia and others.
• Run commands within the Docker environment using ddev exec.
• View logs from the web and database containers.
• Use ddev ssh to explore the Linux environment inside the container.
• List running projects with ddev list.
• Snapshot databases with ddev snapshot.
• Temporarily share your development website with others using ddev share.
• Create custom commands as simple shell scripts.
• Enjoy effortless, trusted HTTPS support.
• Extend and customize environments as much (or as little!) as you need to.

Run ddev to see all the commands.

ddev-browsersync's Issues

Ability to open URL on start

Thanks for the great DDEV add-on! Is there any way to have Browsersync open a URL when it starts? The goal here is to have Browsersync auto-inject the script that it requires into the body element.

I’ve tried setting the open option to true, external, and a URL, but it always results in this error:

[Browsersync] Couldn't open browser (if you are using BrowserSync in a headless environment, you might want to set the open option to false)

No auto refresh for Laravel mix

I think I followed the docs for use with Laravel Mix but I have to reload manually to see changes applied to the html (with Tailwind CSS) when using ddev exec npm run watch. Using ddev browsersyncworks automatically, but I need the css file to be build fresh with Laravel Mix. Guess I am missing something obvious. Thanks for pointers.

reuse ENV for Laravel mix

And we can get rid of the need to add the DDEV_HOSTNAME like this in webpack.mix.js:
let url = process.env.DDEV_HOSTNAME;

update documention post-promotion

Recently, this addon was promoted. References to the old domain need to be updated.

Add 'keep-alive' workflow

Allow github to continue automated testing against the latest versions of DDEV

Unable to use either laravel-mix or gulp examples

I tried out the laravel-mix and gulp examples, but I failed. I was using a plain vanilla laravel, with browser-sync and laravel-mix added.

In laravel-mix example with the suggested change I got

$ ddev . npm run watch

> watch
> mix watch

[webpack-cli] /var/www/html/webpack.mix.js:18
    .browserSync({
    ^

SyntaxError: Unexpected token '.'
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1033:15)
    at Module._compile (node:internal/modules/cjs/loader:1069:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at module.exports (/var/www/html/node_modules/laravel-mix/setup/webpack.config.js:11:5)
    at loadConfigByPath (/var/www/html/node_modules/webpack-cli/lib/webpack-cli.js:1747:27)
Failed to execute command npm run watch: exit status 2

With the gulp example, I got

$ ddev exec gulp
[15:40:23] Using gulpfile /var/www/html/gulpfile.js
[15:40:23] Task never defined: default
[15:40:23] To list available tasks, try running: gulp --tasks

A quick web search says the gulp issue might be gulp 4 vs gulp 3? https://stackoverflow.com/questions/42368150/gulp-default-task-never-defined-default-please-check-the-documentation-for-pr

I'm obviously a novice, would love to work this through with you on discord or in a screenshare call. Thanks!

Connection refused on port 3000 (DDEV + WP + ViteJS)

I'm working on a project with DDEV + WP + ViteJS on a Linux (Ubuntu). It's running correctly and I want to add ddev-browsersync to the project, but I not be able to reach :3000 port with DDEV url.

config.yaml

...
web_extra_exposed_ports:
    - name: ViteJS
      container_port: 5173
      http_port: 5172
      https_port: 5173
...

And an extra configuration file docker-compose.vite_extra.yaml for this:

services:
  web:
    expose:
      - "5173"
    environment:
      HTTP_EXPOSE: ${DDEV_ROUTER_HTTP_PORT}:80,${DDEV_MAILHOG_PORT}:8025,5174:5173
      HTTPS_EXPOSE: ${DDEV_ROUTER_HTTPS_PORT}:80,${DDEV_MAILHOG_HTTPS_PORT}:8025,5173:5173

When VIteJS configuration files are enable I can reach port :3000 and browser indcates "ERR_CONNECTION_REFUSED".

¿Should be add an extra_exposed_ports on DDEV configuration file to achieve :3000 like I did with ViteJS?

Thanks!

Odd header output with ddev-browsersync

I happened to be trying out ddev-browsersync with a stock drupal10 umami (macOS, Chrome, DDEV v1.22.3) and saw this stuff all the time at the top. I have no idea whether that has anything to do with this add-on, but wanted to mention it.

, but this code // executes before the first paint, when is not yet present. The // classes are added to so styling immediately reflects the current // toolbar state. The classes are removed after the toolbar completes // initialization. const classesToAdd = ['toolbar-loading', 'toolbar-anti-flicker']; if (toolbarState) { const { orientation, hasActiveTab, isFixed, activeTray, activeTabId, isOriented, userButtonMinWidth } = toolbarState; classesToAdd.push( orientation ? toolbar-+ orientation + `` : 'toolbar-horizontal', ); if (hasActiveTab !== false) { classesToAdd.push('toolbar-tray-open'); } if (isFixed) { classesToAdd.push('toolbar-fixed'); } if (isOriented) { classesToAdd.push('toolbar-oriented'); } if (activeTray) { // These styles are added so the active tab/tray styles are present // immediately instead of "flickering" on as the toolbar initializes. In // instances where a tray is lazy loaded, these styles facilitate the // lazy loaded tray appearing gracefully and without reflow. const styleContent = .toolbar-loading #+ activeTabId + { background-image: linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%); } .toolbar-loading #+ activeTabId +-tray { display: block; box-shadow: -1px 0 5px 2px rgb(0 0 0 / 33%); border-right: 1px solid #aaa; background-color: #f5f5f5; z-index: 0; } .toolbar-loading.toolbar-vertical.toolbar-tray-open #+ activeTabId +-tray { width: 15rem; height: 100vh; } .toolbar-loading.toolbar-horizontal :not(#+ activeTray +) > .toolbar-lining {opacity: 0}; const style = document.createElement('style'); style.textContent = styleContent; style.setAttribute('data-toolbar-anti-flicker-loading', true); document.querySelector('head').appendChild(style); if (userButtonMinWidth) { const userButtonStyle = document.createElement('style'); userButtonStyle.textContent = #toolbar-item-user {min-width: + userButtonMinWidth +px;} document.querySelector('head').appendChild(userButtonStyle); } } } document.querySelector('html').classList.add(...classesToAdd); })();

Hot reloading

Browser-sync can hot reload (inject) files like js and css.

But hot reload did not work here until i changed docker-compose.browsersync.yaml from

#ddev-generated
# Override the web container's standard HTTP_EXPOSE and HTTPS_EXPOSE
# This is to expose the browsersync port.
services:
  web:
    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

to

# Override the web container's standard HTTP_EXPOSE and HTTPS_EXPOSE
# This is to expose the browsersync port.
services:
  web:
    expose:
      - '3000'
      - '3001'
    environment:
      - HTTPS_EXPOSE=${DDEV_ROUTER_HTTPS_PORT}:80,${DDEV_MAILHOG_HTTPS_PORT}:8025,3000:3000,3001:3001

The port 3001 also needs to be routed to browsersync:3001 because browser-sync wants to establish a connection for websockets with https://demo.ddev.site:3001/browser-sync/socket.io/?EIO=4&transport=polling&t=xxx
I guess we do not need to expose any HTTP_PORTS.

Environment variable becomes DDEV_MAILPIT_HTTP_PORT

In DDEV v1.22.2+, the required environment variable becomes DDEV_MAILPIT_HTTP_PORT instead of DDEV_MAILHOG_PORT. However, it's not reasonable to change this right away. As of DDEV v1.22.3, DDEV_MAILHOG_PORT is supported again as an alias to DDEV_MAILPIT_HTTP_PORT.

So after a few months we can update this and do a new release.

Tests failing against HEAD

I saw tests failing against HEAD today, https://github.com/tyler36/ddev-browsersync/runs/6913980565?check_suite_focus=true -

Oddly, I only got notification from my fork, even though I watch everything on this. I guess it's because I'm not an owner of the repo. Didn't know that that's how test notifications work.

The addon is not working properly even with basic projects based on the HTTP protocol

OS: Windows 10 Pro
Docker: 20.10.17
DDEV: 1.21.1
Browser-Sync: 2.27.10

Steps to reproduce this issue:

1 - Create a directory named test2 and create one file inside named index.htm (a boilerplate with some text).

2 - Install globally browser-sync with the following command npm install -g browser-sync

3 - Open a Terminal in the current directory and run browser-sync start --server --files "*". The browser opens loading the index.htm file.

4 - Edit the index.htm file, save it and take a look at the browser window. Page reloads with the new content. In Windows PowerShell window you will see this information:

As you may see BrowserSync works fine. Let's test it with this DDEV addon.

5 - Create a new directory named test1 and copy inside what is in the test2 directory (index.html).

6 - Run ddev config and choose a php for "Project Type".

7 - Run ddev get drud/ddev-browsersync. As an personal comment this message seems to be wrong "Please file issues and create pull requests there to improve it.". It should be "Please report issues ...".

8 - Run ddev start. Now we can reach the project at https://test1.ddev.site or https://127.0.0.1:53834. As you can see both links use HTTPS protocol.

9 - Run ddev browsersync and you will get this information in your Terminal window:

10 - Keep CTRL pressed and click on the External link. The browser opens loading the index.htm file. It is an HTTP connection.

11 - Edit the index.htm file, save it and take a look at the browser and Terminal window. NOTHING HAPPENS, the browser is not reloading and there are no new lines in Broswersync console. If we take a look in the file .ddev/browser-sync.js we will see that docroot is mentioned in the files option. As the file index.html is in the docroot, any changes in it should be found in the browser window.

Therefore, this addon does not work even with the basic configuration on a project that only has an HTML file. It is not an HTTP/HTTPS issue because in the browser window I can load the index.html page with both HTTP and HTTPS protocols. I hope based on this report to investigate and find a fix.

Also if this addon will not be updated ASAP for HTTPS proctol it is useless. In order to use it, maybe DDEV should have a question related to the desired protocol when creating the configuration file, otherwise in the case of this addon few know which files to modify to use the HTTP protocol only, the situation in which DDEV's purpose to provide a simple and fast interface with Docker is no longer valid. This can be discussed on the DDEV project page.

browsersync-demo does not exist

I was going to start my ride with https://github.com/tyler36/browsersync-demo, as mentioned in the README, but it doesn't exist.

Thanks!

Improve file watcher list

Currently, the watcher is set to DDEV_DOCROOT

For a Drupal project, this results in a lot of files being watch, especially things like core
FOr post projects, I've used:

    'web/modules/custom',
    'web/themes/custom',
    'web/sites/default'

For Laravel, this only includes public directory and does not include template changes, or app changes.
On past Laravel projects, I've used:

  files: [
    'web/modules/custom',
    'web/themes/custom',
    'web/sites/default'
  ],

This would also be the expectation of people who have used Laravel-mix in the past.

global command should be managed by addon

The browsersync command copied to the global ddev directory is missing #ddev-generated.
This generates a warning when installing this addon a second time.

$ ddev get drud/ddev-browsersync
...

$ ddev get drud/ddev-browsersync
...
NOT overwriting file/directory /home/user13/.ddev/commands/web/browsersync.

Yaml file needs ports declaration

Apply for "official" maintained add-on status

Hopefully, others can give it a test over the next week.
Then apply for official release.

feat: add `browsersync` helper

Add a custom command to start browsersync from the host.

Maybe ddev browsersync ?

Yaml file needs ports declaration

In an unmodified installation of ddev-browsersync the script showed the ‹Browsersync: connected› badge in the browser but changes to files did not lead to a page reload.

I had to add the last two lines of the following code to make it work:

services:
  web:    
    ports:
      - "127.0.0.1:$DDEV_HOST_WEBSERVER_PORT:8000"

The solution is taken from https://stackoverflow.com/a/60994033/2041152

I use
browser-sync 2.27.11
ddev 1.21.4
on a Macbook Air M2 with Mac OS 13.0.1

As I do not know whether these lines are valid for all use cases I, am not adding a PR.

Tests point to old domain

The tests are using the old non-official domain. This should be updated:

- ddev get tyler36/ddev-browsersync
+ ddev get drud/ddev-browsersync

Excited to see this, how can I help?

So excited to see this out there. Is there a way that I can help it in the maturing process? I see there are test failures.

🐛 CLI reports incorrect external URL

After running npm run watch from inside the DDEV web container, the CLI reports the following:

[Browsersync] Access URLs:
 ---------------------------------------------------
       Local: http://localhost:3000
    External: http://browsersync-demo.ddev.site:3000

This is incorrect;; it only works on HTTPS

❌ http://browsersync-demo.ddev.site:3000
✅ https://browsersync-demo.ddev.site:3000

There are notes in the readme, but it would be good if we could get the correct URL on the CLI.

Improving WordPress support?

Thanks for the add on, I've been replacing Livereload with this and it's been great.

I work on Drupal and WordPress websites, the Drupal projects are quite URL agnostic but the WordPress websites are constantly trying to redirect me to a URL without the :3000 port number.

I'm not sure what functionality is available to add ons, would modifying the wp-config-ddev.php file be an option?

My current work around is to add the below code snippet to the auto generated wp-config-ddev.php file.

• Commenting out the old WP_HOME and WP_SITEURL lines.
• Adding some code that allows any domain.

 /** WP_HOME URL */
  //  defined('WP_HOME') || define('WP_HOME', 'https://wbg.org.uk.ddev.site');

  /** WP_SITEURL location */
  //  defined('WP_SITEURL') || define('WP_SITEURL', WP_HOME . '/');

  /** Allow any domain/port. (For browsersync) */
  $domain = sprintf('%s://%s', $_SERVER['SERVER_PORT'] == 80 ? 'http' : 'https', $_SERVER['SERVER_NAME']);

  define('WP_SITEURL', $domain);
  define('WP_HOME', $domain);

Maybe it would be better to only allow the project URL(s) in their original form and with :3000 so it's not too loose?

Thanks,

ssl_error_rx_record_too_long when using HTTPS

Hello!

Thanks for your work on this project! It works great for http:// protocol, but for the life of me I can't get it to behave with https://

In firefox I get an
ssl_error_rx_record_too_long message when viewing the page. In chrome it just says "ssl protocol error".

Switching to http fixes this, but all of my stuff is configured for HTTPS so it's a bit inconvienent!

Some more details:

• blank WordPress project
• no config alterations to wordpress, ddev, or browsersync
• macos

Have you run into this issue before? It could be something more related to my machine, or ddev as a whole, rather than this project.

LaravelMix example: process.env.DDEV_HOSTNAME only works without additional project hostnames

Hey, just as information, thanks for providing this:

Laravel Mix example (https://github.com/drud/ddev-browsersync#laravel-mix-configuration) suggests using

let url = process.env.DDEV_HOSTNAME;

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ])
    .browserSync({
        proxy: "localhost",
        host:  url,
        open:  false,
        ui: false
    });

When there are Additional Hostnames configured in DDEV, DDEV_HOSTNAME returns a comma separated list.

For example main-site.ddev.site,subsite-1.ddev.site,subsite-2.ddev.site

We also noticed that host can be disabled all together and integration of browsersync still works? (I guess because proxy is used anyway and host is only for cli terminal output). So maybe we could leave it out of the example to avoid confusion? Not quite sure yet. 🤔

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ])
    .browserSync({
        proxy: "localhost",
        open:  false,
        ui: false
    });

https://browsersync.io/docs/options#option-host

Best regards,
Matthias
PS: I could provide a sample repo if needed for reproduction.

How to autostart browsersync and clear drupal 8-10 cache on startup

I was looking for this and then tried this out....
helpful to me... hope it helps someone else
Add the following to your ddev config.yaml file

hooks:
post-start:
- exec: "drush cache:rebuild"
- exec-host: "ddev browsersync"