Updates README to include instructions on enabling BrowserSync

aschmelyun · web-flow · commit 95dbea637b88 · 2021-05-25T03:00:50.000-04:00
diff --git a/README.md b/README.md
@@ -36,6 +36,26 @@ volumes:
   - ./mysql:/var/lib/mysql
 ```
 
+## Using BrowserSync with Laravel Mix
+
+If you want to enable the hot-reloading that comes with Laravel Mix's BrowserSync option, you'll have to follow a few small steps. First, ensure that you're using the updated `docker-compose.yml` with the `:3000` and `:3001` ports open on the npm service. Then, add the following to the end of your Laravel project's `webpack.mix.js` file:
+
+```javascript
+.browserSync({
+    proxy: 'nginx',
+    open: false,
+    port: 3000,
+});
+```
+
+From your terminal window at the project root, run the following command to start watching for changes with the npm container and its mapped ports:
+
+```bash
+docker-compose run --rm --service-ports npm run watch
+```
+
+That should keep a small info pane open in your terminal (which you can exit with Ctrl + C). Visiting [localhost:3000](http://localhost:3000) in your browser should then load up your Laravel application with BrowserSync enabled and hot-reloading active.
+
 ## MailHog
 
 The current version of Laravel (8 as of today) uses MailHog as the default application for testing email sending and general SMTP work during local development. Using the provided Docker Hub image, getting an instance set up and ready is simple and straight-forward. The service is included in the `docker-compose.yml` file, and spins up alongside the webserver and database services.
