Adding Browser Sync to Laravel and Docker with Vessel
Tags: wsl, docker, laravel, php
Published: 2020-07-15 19:02:29

I recently stumbled upon [Vessel](https://vessel.shippingdocker.com/) by [Chris Fidao](https://serversforhackers.com/) which is a great way to leverage Docker in your development environment. I'm a big fan of Docker and use it extensively for home lab work, but haven't fully explored it for development yet.

Getting it going with some Laravel projects I had on hand was super smooth and will probably be my new choice for development going forward. However, I was still hoping to fix an issue I've been having developing on [WSL 2](https://docs.microsoft.com/en-us/windows/wsl/wsl2-index)--getting Browser Sync to work. It's one of the biggest annoyances when working in Window's WSL 2 versus on macOS.

After some playing around with the config files Vessel generates, I've gotten Browser Sync to work with it--which also means it works in WSL 2 thanks to Docker!

First this assumes you have a relatively new Laravel project (version 6 or 7) and have [set up Vessel](https://github.com/shipping-docker/vessel#install) without any major customizations.

First lets update our `.env` to reduce any port conflicts, changing the APP port and MYSQL port as appropriate.

```bash
# .env
APP_PORT=8080
MYSQL_PORT=33060
```

Running `./vessel start` should get your containers up and running with your defined ports--great! Next we're going to ensure you've Browser Sync included in your dependencies.

```bash
./vessel npm i browser-sync browser-sync-webpack-plugin --save-dev
```

Update your `webpack.mix.js` to leverage the new package. Here you can choose whether just to watch for files going through the webpack pipeline (CSS and JS) or also include any changes to your Blade templates or even user content.

```js
// webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .browserSync({
        proxy: 'app:80',
        open: false,
    })
```

The magic line is `app:80`--this should be equal to the container Vessel created for you. It should be called `app`. To confirm run `./vessel ps` and look for one that has `app` in the title. If you run into issues, it may also be called `yourappname_app_1`.

The port by default is `80` but change this if you've changed your `docker_compose.yml` file to something else. This should be the internal container port, not the port you used to view your site (in this case `8080` as defined earlier).

Finally, we're going to tell Docker to expose the Browser Sync ports, as well as a default command to ensure the container doesn't immediately exit and opens the ports for you.

```yml
# docker-compose.yml
...
node:
  command: npm run watch
  ports:
    - "3000:3000"
    - "3001:3001"
...
```

Finally, let's stop and start our containers, and if all went well we should see our Browser Sync connected app at `localhost:3000`!

```bash
./vessel stop && ./vessel start
```

If you don't initially see your app, you can run the below command to see any log output from the node process--sometimes it takes a bit to get everything built initially.

```bash
./vessel logs node

# If you wanna follow the logs live
# ./vessel logs -f node
```

---

This post originally appear on my personal [site](https://delport.ca/)