Using Vite with Docker Compose
Resolve the server-lookup and WebSocket problems when running Vite through Docker Compose.
1 min read
Updated
Running the Vite dev server inside Docker Compose commonly breaks in two ways: the browser cannot resolve the host, and the HMR WebSocket connection fails. This snippet shows the environment variables and Compose configuration that fix both. The files are below.
When using Vite with Docker Compose to run a development server for a web application, you may encounter with 2 errors:
- Server lookup issue
- Web Socket communication issue
This snippet shows how to solve them.
.env
text
SERVER_PORT=3000
PUBLISHED_PORT=3001docker-compose.yaml
yaml
version: '3.3'
services:
dump-client:
image: node:lts-alpine
user: node
volumes:
- ./:/app
environment:
SERVER_PORT: ${SERVER_PORT}
PUBLISHED_PORT: ${PUBLISHED_PORT}
ports:
- ${PUBLISHED_PORT}:${SERVER_PORT}
command: npm startvite.config.js.diff
text
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
],
+ server: {
+ host: '0.0.0.0',
+ port: Number.parseInt(process.env.SERVER_PORT),
+ hmr: {
+ clientPort: Number.parseInt(process.env.PUBLISHED_PORT),
+ },
+ },
});