From eb07aa8c89e996d4425abd0c0ca9149d3bdd3c9e Mon Sep 17 00:00:00 2001 From: tyler36 <7234392+tyler36@users.noreply.github.com> Date: Mon, 6 Jun 2022 12:05:23 +0900 Subject: [PATCH] Merge remote-tracking branch 'rfay/20220529_simplified_browsersync' --- .github/workflows/tests.yml | 4 +- .gitignore | 1 + README.md | 72 +++++++++++++++------------ browser-sync.js | 21 ++++++++ commands/web/browsersync | 8 +++ docker-compose.browsersync.yaml | 2 +- install.yaml | 25 ++++------ tests/run-ddev-browsersync | 9 ++++ tests/test.bats | 10 +++- web-build/Dockerfile.ddev-browsersync | 2 + 10 files changed, 102 insertions(+), 52 deletions(-) create mode 100644 .gitignore create mode 100644 browser-sync.js create mode 100755 commands/web/browsersync create mode 100755 tests/run-ddev-browsersync create mode 100644 web-build/Dockerfile.ddev-browsersync diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml index 71347e3..94074c1 100644 --- a/.github/workflows/tests.yml +++ b/.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' diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a09c56d --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +/.idea diff --git a/README.md b/README.md index 0b54d3a..2c4b7d9 100644 --- a/README.md +++ b/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: -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,8 +103,6 @@ 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` @@ -103,6 +110,5 @@ ddev exec npm run watch ## TODO - Browsersync proxy HTTPS version -- Proper tests **Contributed and maintained by [tyler36](https://github.com/tyler36)** diff --git a/browser-sync.js b/browser-sync.js new file mode 100644 index 0000000..9109cb2 --- /dev/null +++ b/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, +} diff --git a/commands/web/browsersync b/commands/web/browsersync new file mode 100755 index 0000000..2570e81 --- /dev/null +++ b/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 diff --git a/docker-compose.browsersync.yaml b/docker-compose.browsersync.yaml index 15cd67c..41d809c 100644 --- a/docker-compose.browsersync.yaml +++ b/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 diff --git a/install.yaml b/install.yaml index 0610573..9129fde 100644 --- a/install.yaml +++ b/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 + diff --git a/tests/run-ddev-browsersync b/tests/run-ddev-browsersync new file mode 100755 index 0000000..f40f3d4 --- /dev/null +++ b/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" diff --git a/tests/test.bats b/tests/test.bats index dcf63bc..434220e 100644 --- a/tests/test.bats +++ b/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 "this is a test" >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" { diff --git a/web-build/Dockerfile.ddev-browsersync b/web-build/Dockerfile.ddev-browsersync new file mode 100644 index 0000000..cab996f --- /dev/null +++ b/web-build/Dockerfile.ddev-browsersync @@ -0,0 +1,2 @@ +#ddev-generated +RUN npm install -g browser-sync