How to use (Grunt) BrowserSync to serve files 1 level deeper than the root server and maintain links?

My projects are structured like this:

/root src files |_ /public |_ /html |_ index.html |_ about.html |_ contact.html |_ /css |_ /js |_ index.php

Where all the src files: html templates, Sass and raw JS scripts are in the root and published in their respective folders publicly.

I first "create" everything in plain HTML to test functionality and flow, with links in html files just equal, relative filenames (eg <a href="about.html">

). I have set up my server to serve from / public directory and without BrowserSync to go to localhost / builds / for testing.

However, when using BrowserSync, setting --server

to public

and --index

from builds/index.html

loads the index to localhost: 3000, but in fact all files should be accessible via localhost: 3000 / builds.

This means none of the links in the html files are working because they all just point to localhost: 3000, so 404. I can't install BrowserSync to serve from / html because the CSS and JS paths are wrong.

Is there a way to get around this without moving the html files to the / public root?