Merge pull request #8 from rfay/20220529_simplified_browsersync

Simplified browsersync with tests, fixes #3, fixes #1

.github/workflows/tests.yml

@@ -39,8 +39,8 @@ jobs:
     - uses: actions/checkout@v2
     - name: Environment setup
       run: |
-        brew install bats-core mkcert
-        mkcert -install
+        brew install bats-core
+        sudo apt-get update >/dev/null && sudo apt-get install -y expect >/dev/null
 
     - name: Use ddev stable
       if: matrix.ddev_version == 'stable'

.gitignore

@@ -0,0 +1 @@
+/.idea

README.md

@@ -16,55 +16,63 @@
 - click mirroring
 - network throttling
 
-This reciepe allows you to run [Browsersync](https://browsersync.io/) through the DDEV web service.
-
-## Requirements
-
-- DDEV >= 1.19
-- Windows or Linux
-- BrowserSync
+This add-on allows you to run [Browsersync](https://browsersync.io/) through the DDEV web service.
 
 ## Getting Started
 
-- Install DDEV service
+This add-on requires DDEV v1.19.3 or higher.
+
+- Install the DDEV browsersync add-on:
 
 ```shell
 ddev get tyler36/ddev-browsersync
 ddev restart
+ddev browsersync
 ```
 
-- Update browersync configuration
-
-This will depend on your implemenation of browsersync.
-Generally, you will need to provide 3 configured options.
+The new `ddev browsersync` global command runs browsersync inside the web container and provides a 
+link ("External") to the browsersync-update URL. Use the URL in the output that says something like "External: http://d9.ddev.site:3000".
 
-{
-      proxy: url,
-      host:  url,
-      open:  false,
-}
+## What does this add-on do and add?
 
-- `proxy` is your DDEV HOST name
-- `host` is your DDEV HOST name
-- `open` prevents the following message from being displayed
-
-```shell
-[Browsersync] Couldn't open browser (if you are using BrowserSync in a headless environment, you might want to set the open option to false)
-```
+1. Checks to make sure the DDEV version is adequate.
+2. Adds `.ddev/web-build/Dockerfile.ddev-browsersync`, which installs browsersync using npm.
+3. Adds a `browser-sync.js` to define the operation of the base setup.
+4. Adds a `.ddev/docker-compose.browsersync.yaml`, which exposes and routes the ports necessary.
+5. Adds a `ddev browsersync` shell command globally, which lets you easily start browsersync when you want it.
 
-There are many options to install and run browsersync, including:
+## Other ways to use browsersync with this add-on
+There are many other options to integrate browsersync into your project, including:
 
-- [Laravel-mix](https://laravel-mix.com/docs/4.0/browsersync)
-- [Gulp](https://browsersync.io/docs/gulp)
 - [Grunt](https://browsersync.io/docs/grunt)
+- [Laravel-mix](https://laravel-mix.com/docs/4.0/browsersync)
 
 Please see [Browsersync documentation](https://browsersync.io/docs) for more details.
 PRs for install steps for specific frameworks are welcome.
 
-### Laravel-mix example
+### Basic usage
+
+The existing example with just `ddev browsersync` should work out of the box.
+There is no need for additional configuration, but you may want to edit
+the `.ddev/browser-sync.js` file to specify exactly what files and directories
+should be watched. If you watch less things it's easier on your computer.
+
+### Problems
+
+* If you get `Error: ENOSPC: System limit for number of file watchers reached, watch '/var/www/html/web/core/themes/classy/images/icons/video-x-generic.png'` it means you either have to increase the file watcher limit or decrease the number of files you're watching.
+  * To decrease the number of files you're watching, edit the `ignore` section in `browser-sync.js` (or another config file if you have a more complex setup).
+  * On colima, `colima ssh` and `sudo sysctl fs.inotify.max_user_watches` to see how many watches you have. To increase it, use something like `sudo sysctl -w fs.inotify.max_user_watches=2048576`. Unfortunately, this has to be done on every colima restart.
+  * On Docker Desktop for Mac, `docker run -it --privileged --pid=host justincormack/nsenter1` and `sysctl -w fs.inotify.max_user_watches=1048576`. Unfortunately, this has to be done again on every Docker restart.
+  * On Docker Desktop for Windows, add or edit `~/.wslconfig` with these contents:
+    ```
+    [wsl2]
+    kernelCommandLine = "fs.inotify.max_user_watches=1048576"
+    ```
+  * On Linux, you can change `fs.inotify.max_user_watches` on the host in /etc/sysctl.d/local.conf or elsewhere.
+
+### Laravel-mix configuration
 
 Demo: <https://github.com/tyler36/browsersync-demo>
-Assumes your DDEV HOST is `browsersync-demo.ddev.site`
 
 - Update `webpack.mix.js`
 
@@ -77,9 +85,10 @@ mix.js('resources/js/app.js', 'public/js')
         //
     ])
     .browserSync({
-        proxy: url,
+        proxy: "localhost",
         host:  url,
         open:  false,
+        ui: false
     });
 ```
 
@@ -94,15 +103,12 @@ ddev exec npm run watch
        Local: http://localhost:3000
     External: http://browsersync-demo.ddev.site:3000
  ---------------------------------------------------
-          UI: http://localhost:3001
- UI External: http://localhost:3001
 ```
 
 - Browsersync will be running at `https://browsersync-demo.ddev.site:3000`
 
 ## TODO
 
 - Browsersync proxy HTTPS version
-- Proper tests
 
 **Contributed and maintained by [tyler36](https://github.com/tyler36)**

browser-sync.js

@@ -0,0 +1,21 @@
+// #ddev-generated
+let docroot = process.env.DDEV_DOCROOT;
+let filesdir = process.env.DDEV_FILES_DIR;
+let url = process.env.DDEV_HOSTNAME;
+
+if (filesdir === "") {
+    filesdir = null
+}
+
+module.exports = {
+
+    files: [docroot],
+    ignore: ["node_modules", filesdir, "vendor"],
+    open: false,
+    ui: false,
+    server: false,
+    proxy: {
+        target: "localhost"
+    },
+    host: url,
+}

commands/web/browsersync

@@ -0,0 +1,8 @@
+#!/bin/bash
+
+## Description: Run browser-sync in the web container
+## Usage: browsersync
+## Example: "ddev browsersync"
+## ExecRaw: true
+
+browser-sync start -c .ddev/browser-sync.js

docker-compose.browsersync.yaml

@@ -7,4 +7,4 @@ services:
       - '3000'
     environment:
       - HTTP_EXPOSE=${DDEV_ROUTER_HTTP_PORT}:80,${DDEV_MAILHOG_PORT}:8025,3000:3000
-      - HTTPS_EXPOSE=${DDEV_ROUTER_HTTPS_PORT}:80,${DDEV_MAILHOG_HTTPS_PORT}:8025,3001:3000
+      - HTTPS_EXPOSE=${DDEV_ROUTER_HTTPS_PORT}:80,${DDEV_MAILHOG_HTTPS_PORT}:8025

install.yaml

@@ -1,23 +1,20 @@
 name: ddev-browsersync
 
-# pre_install_actions - list of actions to run before installing the addon.
-# Examples would be removing an extraneous docker volume,
-# or doing a sanity check for requirements.
 pre_install_actions:
-# - 'if [ "$(arch)" = "arm64" -o "$(arch)" = "aarch64" ]; then echo "This package does not work on arm64 machines"; exit 1; fi'
-# - "docker volume rm ddev-${DDEV_PROJECT}_solr 2>/dev/null || true"
+- | 
+  if ! ( ddev debug capabilities 2>/dev/null | grep multiple-dockerfiles >/dev/null 2>&1 ) ; then
+    echo "This add-on requires DDEV v1.19.3 or higher, please upgrade." && exit 2
+  fi
 
-# list of files and directories listed that are copied into project .ddev directory
 project_files:
-- docker-compose.browsersync.yaml
-# - extra_files/
-# - somefile.sh
+  - docker-compose.browsersync.yaml
+  - web-build
+  - browser-sync.js
+
 
-# List of files and directories that are copied into the global .ddev directory
 global_files:
-# - commands
-# - homeadditions
+  - commands
+
 
 post_install_actions:
-# - chmod +x ~/.ddev/commands/web/somecommand
-# - perl -pi -e 's/oldstring/newstring/g' docker-compose.addon-template.yaml
+

tests/run-ddev-browsersync

@@ -0,0 +1,9 @@
+#!/usr/bin/expect -f
+
+set PROJNAME $::env(PROJNAME)
+set timeout -1
+
+spawn ddev browsersync
+expect "http://${PROJNAME}.ddev.site:3000"
+
+expect "wait forever"

tests/test.bats

@@ -1,15 +1,18 @@
 setup() {
   set -eu -o pipefail
-
+  # Fail early if old ddev is installed
+  ddev debug capabilities | grep multiple-dockerfiles || exit 3
   export DIR="$( cd "$( dirname "$BATS_TEST_FILENAME" )" >/dev/null 2>&1 && pwd )/.."
   export TESTDIR=~/tmp/testbrowsersync
   mkdir -p $TESTDIR
   export PROJNAME=ddev-browsersync
   export DDEV_NON_INTERACTIVE=true
   ddev delete -Oy ${PROJNAME} || true
+  cp tests/run-ddev-browsersync "${TESTDIR}"
   cd "${TESTDIR}"
   ddev config --project-name=${PROJNAME}
-  ddev start
+  echo "<html><head></head><body>this is a test</body>" >index.html
+  ddev start -y
 }
 
 teardown() {
@@ -25,6 +28,9 @@ teardown() {
   echo "# ddev get ${DIR} with project ${PROJNAME} in ${TESTDIR} ($(pwd))" >&3
   ddev get ${DIR}
   ddev restart
+  ./run-ddev-browsersync &
+  sleep 5
+  curl -s --fail http://${PROJNAME}.ddev.site:3000 | grep "this is a test"
 }
 
 @test "install from release" {

web-build/Dockerfile.ddev-browsersync

@@ -0,0 +1,2 @@
+#ddev-generated
+RUN npm install -g browser-sync