sveltekit app running in docker shows changes only for second

user_17082361 0
Viewed 92

I have dockerized the sveltekit app and my issue is that when I am running container and when I make changes in frontend UI I am able to see them only for 1 second and then my frontend is looking like before any changes. I think that problem is about caching in sveltekit.

My Dockerfile:

FROM node:16
WORKDIR /test-app
COPY package.json package-lock.json ./
RUN npm ci
COPY . .
RUN npm run build
ENV PORT 3000
EXPOSE 3000
EXPOSE 24678 
CMD ["node", "build"]

My docker-compose.yaml file:

version: '3'
services:
  svelte-test:
    image: sveltekit-test:node
    volumes:
      - ./:/test-app/
    ports:
      - 3000:3000
      - 24678:24678
      - 5173:5173
    tty: true
    stdin_open: true

Port 3000 is for sveltekit, 5173 is for sveltekit but in Docker and 24678 is for vite. My folder structure is:

sveltekit-docker
    test-app
        -Dockerfile
        -docker-compose.yaml
        -package-lock.json
        -package.json
        -svelte.config.js
        -tsconfig.json
        -vite.config.js
        -all sveltekit folders (src, node_modules, static, tests)
sveltekit vite docker-compose docker
1 Answers

If you want to see the changes you need HMR (Hot module reloading) available in dev mode.

You also may need to rebuild esbuild. Try replacing the last line of your Dockerfile with

CMD npm rebuild esbuild && npm run dev -- --host

I created a repo if it helps.

To use it:

docker build --tag sveltekit-test .
docker-compose up
user_161264950
Related