How to change Vite dev server asset base path - laravel

Question

I'm running a Vite dev server in a Docker container and trying to load assets from that Vite server in a Laravel Blade template with the #vite directive, but the #vite directive is outputting the assets at http://127.0.0.1:5173/path/to/asset or http://[::]:5173/path/to/asset. I want to test the website on a different computer from the server, on the same network. And if I do that, of course the assets won't load because they're only accessible to the server computer itself.
I see that the #vite directive gets its base path from a public/hot file generated by the Vite dev server at runtime, but I can't for the life of me figure out how the hot file gets generated or what determines its output. I'm assuming surely there must be a configuration option, but I've tried every config and environment variable I can find, and nothing ever affects the hot file, even after restarting and rebuilding the vite docker container.
docker-compose.yml
...
vite:
build:
context: .
dockerfile: vite/Dockerfile
image: me/vite
container_name: appvite
restart: unless-stopped
tty: true
ports:
- "5173:5173"
- "8000:8000"
working_dir: /app/
volumes:
- .:/app/
networks:
- app-network
...
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig(({ command }) => {
const config = { plugins: [], server: {} };
if (command === 'serve') {
// Dev specific configs
config.plugins.push(
laravel({
input: ['resources/js/app.js'],
refresh: true,
})
);
config.server.origin = "http://test1";
config.origin = "http://test2";
config.base = "http://test3";
config.server.base = "http://test4";
} else {
// Build specific configs
config.plugins.push(
laravel({
input: ['resources/js/app.js'],
refresh: false
})
);
}
return config;
});
vite/Dockerfile
FROM node:16
WORKDIR /app
COPY . /app
EXPOSE 8000
EXPOSE 5173
CMD ["npm", "run", "dev-debug"]
.env
...
ASSET_URL=http://test1
VITE_ASSET_URL=http://test2
...

Answer 1

just change .env
ASSET_URL=MACHINE_IP:VITE_PORT
like: 192.168.1.150:5173
it should work.
Based on Laravel document

Answer 2

you can set the VITE_DEV_SERVER_PROXY environment variable to proxy requests to the development server.
Here's how you can do it in
Add the following line to the .env.local file:
VITE_DEV_SERVER_PROXY=http://192.168.1.100:3000/
This will tell Vite to proxy all requests to the 192.168.1.100:3000 IP address, which should be the IP address of your development machine running the Vite dev server.
Restart the Laravel development server and the Vite dev server.
Now, when you use vite('main.css') on your development server, it should replace localhost:5173/assets/main.css with 192.168.1.100:3000/assets/main.css.