Skip to main content

Welcome to Docker docs

Dockerfile for a Vite + React App​

1. Update your vite.config.ts​

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import path from 'path';

export default defineConfig({
plugins: [react()],
server: {
watch: {
usePolling: true,
},
host: true, // needed for the Docker Container port mapping to work
strictPort: true,
port: 3000,
},
resolve: {
alias: {
'@': path.resolve(__dirname, './'),
},
},
});

note

host: true allows external access when running inside Docker.

Docker looks like this​

FROM node:20-alpine 
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN npm install -g pnpm && pnpm install
COPY . .
RUN pnpm run build
EXPOSE 3000
CMD ["pnpm", "preview"]
note

This Dockerfile assumes you are using pnpm and running the Vite app in preview mode (pnpm preview). Adjust the CMD if you're using a dev server or custom script.

Create a .dockerignore file in the root of your project to avoid copying unnecessary files into the Docker image:​

node_modules
dist
.git
.gitignore
Dockerfile
docker-compose.yml
*.log
.env
.vscode