Custom File Paths With Vagrant, Bedrock, Sage, Gulp, and Browser Sync

Our agency is adopting Trellis, Bedrock, and Sage for our WordPress development. Our local environment runs on Vagrant. Because we have several clients with multiple projects we were hoping to setup custom paths to each of our WordPress projects. The goal is to have the following directory structure:

/sites/client-name/project-name/

Inside “project-name” is where the “site” directory and the “ansible” directory would be held.

I am able to get the site loading properly in the browser when I go to project-name.dev, but I am unable to visit the site through localhost:3000 or localhost:3000/sites/client-name/project-name/ when running the “Gulp Watch” command and using Browser Sync. Most likely I am misconfiguring one of the following files to work with this custom path, but I have tried everything and I can’t seem to get the site to load on Browser Sync’s proxy. I am in hopes someone can help me reconfigure the appropriate files to work properly or help me correct the issue if I have messed something else up.

Here is a screenshot of the wordpress_sites.yml file:

Here is a screenshot of the vault.yml file:

Lastly in the manifest.json file the config devUrl is:

http://localhost/sites/client-name/project-name

Is it possible to use Vagrant, Bedrock, Sage, Gulp, and Browser Sync with this type of file structure?