With the help from SO community I was finally able to dockerize my Sveltekit app and access it from the browser (this was an issue initially). So far so good, but now every time I perform a code change I need to re-build and redeploy my container which obviously is not acceptable. Hot reload is not working, I've been trying multiple things I've found online but none of them have worked so far.
Here's my Dockerfile
:
FROM node:19-alpine# Set the Node environment to development to ensure all packages are installedENV NODE_ENV development# Change our current working directoryWORKDIR /app# Copy over `package.json` and lock files to optimize the build processCOPY package.json package-lock.json ./# Install Node modulesRUN npm install# Copy over rest of the project filesCOPY . .# Perhaps we need to build it for production, but apparently is not needed to run dev script.# RUN npm run build# Expose port 3000 for the SvelteKit app and 24678 for Vite's HMREXPOSE 3333EXPOSE 8080EXPOSE 24678CMD ["npm", "run", "dev"]
My docker-compose
:
version: "3.9"services: dmc-web: build: context: . dockerfile: Dockerfile container_name: dmc-web restart: always ports: - "3000:3000" - "3010:3010" - "8080:8080" - "5050:5050" - "24678:24678" volumes: - ./:/var/www/html
the scripts from my package.json
:
"scripts": {"dev": "vite dev --host 0.0.0.0","build": "vite build","preview": "vite preview","test": "playwright test","lint": "prettier --check . && eslint .","format": "prettier --write ." },
and my vite.config.js
:
import { sveltekit } from '@sveltejs/kit/vite';import {defineConfig} from "vite";export default defineConfig({ plugins: [sveltekit()], server: { watch: { usePolling: true, }, host: true, // needed for the DC port mapping to work strictPort: true, port: 8080, }});
any idea what am I missing? I can reach my app at http://localhost:8080
but cannot get to reload the app when a code change happens.
Thanks.