How to configure Laravel Mix to access a site in my local network?

Question

I have a Laravel/React project that I'm running with Valet in my main computer at https://mysite.test and I followed the docs to share it in my local network.

On the same network, I can access it at https://192.168.0.10/mysite.test, and it loads the HTML, but I get a 404 error for all the assets.

It seems the issue is that it's trying to load the files like https://192.168.0.10/js/app.js instead of https://192.168.0.10/mysite.test/js/app.js.

This is how webpack.mix.js looks like:

const mix = require('laravel-mix');

mix
  .js('resources/js/app.js', 'public/js')
  .react()
  .options({ processCssUrls: false });

const host = 'mysite.test';
const homedir = require('os').homedir();

mix.browserSync({
  proxy: `https://${host}`,
  host,
  port: 8000,
  open: 'external',
  https: {
    key: `${homedir}/.config/valet/Certificates/${host}.key`,
    cert: `${homedir}/.config/valet/Certificates/${host}.crt`
  }
});

Answer 1

You need to set the publicPath() to 'public/mysite.test' and adjust the output paths of your assets accordingly.

const mix = require('laravel-mix');

mix.setPublicPath('public/mysite.test')
   .js('resources/js/app.js', 'js').react()
   .options({ processCssUrls: false });

const host = 'mysite.test';
const homedir = require('os').homedir();

mix.browserSync({
  proxy: `https://${host}`,
  host,
  port: 8000,
  open: 'external',
  https: {
    key: `${homedir}/.config/valet/Certificates/${host}.key`,
    cert: `${homedir}/.config/valet/Certificates/${host}.crt`
  }
});