Update README

* use DDEV commands

* Fix dynamic hostname

* Tweak README

* Update usage

README.md

@@ -3,15 +3,18 @@
 - [Intro](#intro)
 - [Requirements](#requirements)
 - [Setup](#setup)
+- [Usage](#usage)
+  - [Via DDEV command](#via-ddev-command)
+  - [Via Laravel-mix](#via-laravel-mix)
 - [Errors](#errors)
   - ['400 Bad Request: The plain HTTP request was sent to HTTPS port'](#400-bad-request-the-plain-http-request-was-sent-to-https-port)
 
 ## Intro
 
-This project is designed as a demo for [BrowserSync](https://browsersync.io/) with DDEV.
+This project is demo for [Browsersync](https://browsersync.io/) with DDEV.
 
-It is based on [Laravel](https://laravel.com/) 9.
-It runs BrowserSync through [`laravel-mix`](https://laravel-mix.com/).
+It uses [Laravel](https://laravel.com/) 9.
+It runs Browsersync through [`laravel-mix`](https://laravel-mix.com/).
 
 ## Requirements
 
@@ -33,25 +36,47 @@ cd browsersync-demo
 ddev start
 ```
 
-- Install depenendencies & packages
+- Install dependencies & packages
 
 ```shell
 ddev composer install
-ddev exec npm install
+ddev npm install
 ```
 
 - Configure Laravel environment
 
 ```shell
 ddev exec cp .env.example .env
-ddev exec php artisan key:generate
+ddev artisan key:generate
 ```
 
-- Add [browsersync](https://laravel-mix.com/docs/4.0/browsersync) to Laravel Mix's `./webpack.mix.js`
+## Usage
+
+Below shows 2 different ways can use Browsersync.
+
+### Via DDEV command
+
+Start Browsersync via the DDEV helper command.
+
+```shell
+$ ddev browsersync
+Proxying browsersync on https://browsersync-demo.ddev.site:3000
+[Browsersync] Proxying: http://localhost
+[Browsersync] Watching files...
+[Browsersync] Reloading Browsers...
+```
+
+### Via Laravel-mix
+
+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](https://laravel-mix.com/docs/4.0/browsersync) to Laravel Mix's `./webpack.mix.js`
   - Replace `$DDEV_HOSTNAME` with your site's hostname.
 
 ```js
-let url = $DDEV_HOSTNAME;
+let url = 'browsersync-demo.ddev.site';
 
 mix.js('resources/js/app.js', 'public/js')
     .postCss('resources/css/app.css', 'public/css', [
@@ -64,10 +89,10 @@ mix.js('resources/js/app.js', 'public/js')
     });
 ```
 
-- Run the watcher. Note: On the first attempt, Laravel-mix may download additional required packages.
+- Run the watcher. Note: On the first attempt, Laravel-mix may download required packages.
 
 ```shell
-$ ddev exec npm run watch
+$ ddev npm run watch
 webpack compiled successfully
 [Browsersync] Proxying: http://browsersync-demo.ddev.site
 [Browsersync] Access URLs:
@@ -79,15 +104,15 @@ webpack compiled successfully
  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`
+- You must access the site via HTTPS
+  - For example `https://browsersync-demo.ddev.site:3000`
 
 ## Errors
 
 ### '400 Bad Request: The plain HTTP request was sent to HTTPS port'
 
-- Access the site via HTTPS, and **not** the HTTP address shown.EG.
+- 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 due to how DDEV router works.
+This is because of how DDEV router works.

webpack.mix.js

@@ -10,7 +10,7 @@ const mix = require('laravel-mix');
  | file for the application as well as bundling up all the JS files.
  |
  */
-let url = 'browsersync-demo.ddev.site';
+let url = process.env.DDEV_HOSTNAME;
 
 mix.js('resources/js/app.js', 'public/js')
     .postCss('resources/css/app.css', 'public/css', [