• Intro
• Requirements
• Setup
  • Demo 1: Host with artisan server
  • DDEV & Laravel mix
• Errors
  • '400 Bad Request: The plain HTTP request was sent to HTTPS port'

This project is designed as a demo for BrowserSync with DDEV.

It is based on Laravel 9. It runs BrowserSync through laravel-mix.

• PHP 8
• DDEV 1.19

• Clone project
• Start DDEV

ddev start

• Install depenendencies & packages

ddev composer install
ddev ssh
npm install

• Copy .env.example to .env

cp .env.example .env

• Add Laravel key

php artisan key:generate

Confirm browser sync works on host.

• Run Laravel's serer

php artisan serve

• In a seperate terminal, run laravel-mix watcher

npm run watch

• Visit http://127.0.0.1:8000 in browser
• Update ./resources/views/welcome.blade.php and confirm browser refreshed.

• Install NPM packages in DDEV

ddev exec npm install

• Add browsersync to Laravel Mix's ./webpack.mix.js
  • Replace $DDEV_HOSTNAME with your site's hostname.

let url = $DDEV_HOSTNAME;

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

• Run the watcher. Note: On the first attempt, Laravel-mix may download additional required packages.

$ ddev exec npm run watch
webpack compiled successfully
[Browsersync] Proxying: http://browsersync-demo.ddev.site
[Browsersync] Access URLs:
 ---------------------------------------------------
       Local: http://localhost:3000
    External: http://browsersync-demo.ddev.site:3000
 ---------------------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001

• Due to the the way DDEV router works you must access the site via HTTPS
  • EG. https://browsersync-demo.ddev.site:3000

• Access the site via HTTPS, and not the HTTP address shown.EG.
  • ❌ http://browsersync-demo.ddev.site:3000
  • ✅ https://browsersync-demo.ddev.site:3000

This is due to how DDEV router works.