This project is demo for Browsersync with DDEV.
It uses 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 dependencies & packages
ddev composer install
ddev npm install- Configure Laravel environment
ddev artisan key:generate- Restart DDEV to manage settings
ddev restartBelow shows 2 different ways can use Browsersync.
Start Browsersync via the DDEV helper command.
$ ddev browsersync
Proxying browsersync on https://browsersync-demo.ddev.site:3000
[Browsersync] Proxying: http://localhost
[Browsersync] Watching files...
[Browsersync] Reloading Browsers...Older Laravel projects used Laravel Mix to compile assets. To add Browsersync to Laravel Mix, complete the following steps. This is not required if you use the DDEV helper command.
- Add Browsersync to Laravel Mix's
./webpack.mix.js- Replace
$DDEV_HOSTNAMEwith your site's hostname.
- Replace
let url = 'browsersync-demo.ddev.site';
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 required packages.
$ ddev 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- You must access the site via HTTPS
- For example
https://browsersync-demo.ddev.site:3000
- For example
- Access the site via HTTPS, and not the HTTP address shown.For example
- ❌
http://browsersync-demo.ddev.site:3000 - ✅
https://browsersync-demo.ddev.site:3000
- ❌
This is because of how DDEV router works.