Browsersync Proxy URL from DOTENV file
I'm working on a couple of projects where other developers will be contributing as well. The issue with this is my build process uses Laravel Mix to compile tailwind, minimize & concatenate javascript, create critical css, and various other tasks including the most important one Browsersync to reload the browser each time I make changes to the code.
Until now this has worked great as I just added in my local domain to the proxy setting in Browsersync and it worked. However the other contributors are likely to use different local urls when setting up their sites and that won't work as the webpack.mix.js file is in version control and needs to be the same for each developer except for the proxy url setting.
It took some digging, googling, as well as trial and error but I got it working despite not being able to find any documentation.
In your DOTENV file add this variable and replace https://my-site.ddev.site with the local url of your project
BROWSERSYNC_PROXY_URL="https://my-site.ddev.site"
Near the top of your webpack.mix.js file add this code - the last line is the important part.
const mix = require("laravel-mix");
// Pull the proxy url from dotenv file
let proxy_url = process.env.BROWSERSYNC_PROXY_URL;
And then in the browsersync section of your mix file use the variable created above like this:
.browserSync({
proxy: proxy_url,
ghostMode: false,
notify: {
styles: {
top: 'auto',
bottom: '1rem'
}
},
files: ["src/css/*.css","templates/*.twig", "templates/**/*.twig", "templates/*.js", "templates/**/*.js"]
});
To me this is an improvement even for projects where I am the lone developer as it is easier for me to copy/paste my mix file from project to project and just update the proxy url setting in the DOTENV file.
