• Intro
• Requirements
• Setup
  • Demo 1: Host with artisan server
  • DDEV & Laravel mix

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