browsersync should default to HTTPS, fixes #19 (#21)

* browsersync should default to HTTPS

* update test to verify HTTPS

* additional notes about HTTPS in readme

* replace test comment

* https-support PR: Make it report the right URL, improve tests (#31)

* Improve output of ddev browsersync to show https URL

* Update tests and github setup to make work with https

* Do mkcert -install so we can trust certs

Co-authored-by: tyler36 <7234392+tyler36@users.noreply.github.com>
Co-authored-by: Randy Fay <randy@randyfay.com>

.github/workflows/tests.yml

@@ -37,11 +37,17 @@ jobs:
 
     steps:
     - uses: actions/checkout@v2
-    - run: echo "/home/linuxbrew/.linuxbrew/bin:/home/linuxbrew/.linuxbrew/sbin" >> $GITHUB_PATH
+    - name: Set up Homebrew
+      id: set-up-homebrew
+      uses: Homebrew/actions/setup-homebrew@master
+
     - name: Environment setup
       run: |
-        brew install bats-core
+        brew install bats-core mkcert
         sudo apt-get update >/dev/null && sudo apt-get install -y expect >/dev/null
+        # Without this .curlrc some linux images don't respect mkcert certs
+        echo "capath=/etc/ssl/certs/" >>~/.curlrc
+        mkcert -install
 
     - name: Use ddev stable
       if: matrix.ddev_version == 'stable'

README.md

@@ -9,7 +9,6 @@
   - [Basic usage](#basic-usage)
   - [Problems](#problems)
   - [Laravel-mix configuration](#laravel-mix-configuration)
-- [TODO](#todo)
 
 ## Introduction
 
@@ -23,8 +22,6 @@ This add-on allows you to run [Browsersync](https://browsersync.io/) through the
 
 ## Getting Started
 
-This add-on requires DDEV v1.19.3 or higher.
-
 - Install the DDEV browsersync add-on:
 
 ```shell
@@ -34,7 +31,12 @@ ddev browsersync
 ```
 
 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>".
+link to the browsersync proxy URL, something like `https://<project>.ddev.site:3000`.
+
+NOTE: The browsersync'd URL is ***HTTPS***, not HTTP. ddev-router redirects traffic to HTTPS, but browsersync does not know this.
+
+EG.
+"External: <http://d9.ddev.site:3000>" => Access on **<https://d9.ddev.site:3000>**
 
 ## What does this add-on do and add?
 
@@ -103,18 +105,14 @@ mix.js('resources/js/app.js', 'public/js')
 ```shell
 ddev exec npm run watch
 ...
-[Browsersync] Proxying: http://browsersync-demo.ddev.site
+[Browsersync] Proxying: http://localhost:3000
 [Browsersync] Access URLs:
  ---------------------------------------------------
        Local: http://localhost:3000
     External: http://browsersync-demo.ddev.site:3000
  ---------------------------------------------------
 ```
 
-- Browsersync will be running at `https://browsersync-demo.ddev.site:3000`
-
-## TODO
-
-- Browsersync proxy HTTPS version
+- Browsersync will be running on **HTTPS** at `https://browsersync-demo.ddev.site:3000`
 
 **Contributed and maintained by [tyler36](https://github.com/tyler36)**

commands/web/browsersync

@@ -6,4 +6,5 @@
 ## Example: "ddev browsersync"
 ## ExecRaw: true
 
-browser-sync start -c .ddev/browser-sync.js
+echo "Proxying browsersync on ${DDEV_PRIMARY_URL}:3000"
+browser-sync start -c /var/www/html/.ddev/browser-sync.js >/dev/null

docker-compose.browsersync.yaml

@@ -6,5 +6,5 @@ services:
     expose:
       - '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
+      - 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

tests/run-ddev-browsersync

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

tests/test.bats

@@ -1,36 +1,39 @@
 setup() {
   set -eu -o pipefail
   # Fail early if old ddev is installed
-  ddev debug capabilities | grep multiple-dockerfiles || exit 3
+  ddev debug capabilities | grep multiple-dockerfiles >/dev/null || exit 3
   export DIR="$( cd "$( dirname "$BATS_TEST_FILENAME" )" >/dev/null 2>&1 && pwd )/.."
   export TESTDIR=~/tmp/testbrowsersync
-  mkdir -p $TESTDIR
+  mkdir -p "${TESTDIR}"
   export PROJNAME=ddev-browsersync
   export DDEV_NON_INTERACTIVE=true
-  ddev delete -Oy ${PROJNAME} || true
+  ddev delete -Oy ${PROJNAME} >/dev/null || true
   cp tests/run-ddev-browsersync "${TESTDIR}"
   cd "${TESTDIR}"
-  ddev config --project-name=${PROJNAME}
+  ddev config --project-name=${PROJNAME} >/dev/null
   echo "<html><head></head><body>this is a test</body>" >index.html
   ddev start -y
+  CURLCMD="curl -s --fail"
+  # I can't currently get curl to trust mkcert CA on macOS
+  if [[ "$OSTYPE" == "darwin"* ]]; then CURLCMD="curl -s -k --fail"; fi
 }
 
 teardown() {
   set -eu -o pipefail
   cd ${TESTDIR} || ( printf "unable to cd to ${TESTDIR}\n" && exit 1 )
-  ddev delete -Oy ${PROJNAME}
+  ddev delete -Oy ${PROJNAME} >/dev/null
   [ "${TESTDIR}" != "" ] && rm -rf ${TESTDIR}
 }
 
 @test "install from directory" {
   set -eu -o pipefail
   cd ${TESTDIR}
   echo "# ddev get ${DIR} with project ${PROJNAME} in ${TESTDIR} ($(pwd))" >&3
-  ddev get ${DIR}
-  ddev restart
+  ddev get ${DIR} >/dev/null
+  ddev restart >/dev/null
   ./run-ddev-browsersync &
   sleep 5
-  curl -s --fail http://${PROJNAME}.ddev.site:3000 | grep "this is a test"
+  ${CURLCMD} https://${PROJNAME}.ddev.site:3000 | grep "this is a test"
 }
 
 @test "install from release" {
@@ -39,5 +42,8 @@ teardown() {
   echo "# ddev get drud/ddev-browsersync with project ${PROJNAME} in ${TESTDIR} ($(pwd))" >&3
   ddev get drud/ddev-browsersync
   ddev restart
-  # ddev exec "curl -s elasticsearch:9200" | grep "${PROJNAME}-elasticsearch"
+  ./run-ddev-browsersync &
+  sleep 5
+  # After https PR goes in, this should be changed to just https
+  (${CURLCMD} https://${PROJNAME}.ddev.site:3000 || ${CURLCMD} http://${PROJNAME}.ddev.site:3000) | grep "this is a test"
 }