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
...
