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
git clone https://github.com/tyler36/browsersync-demo
cd browsersync-demo- Start DDEV
ddev start- Install depenendencies & packages
ddev composer install
ddev exec npm install- Configure Laravel environment
ddev exec cp .env.example .env
ddev exec php artisan key:generate- Add browsersync to Laravel Mix's
./webpack.mix.js- Replace
$DDEV_HOSTNAMEwith your site's hostname.
- Replace
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
- EG.
- 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.