Is there a way to update UI automatically with Docker Desktop?

I have installed Docker Desktop and using WSL 2 and I am practicing in a front-end project. Every time that I want to see a change in the UI (for instance, change a h2 tag or add an extra div), I have to use

docker compose down

docker rmi image_id

and then again

docker compose up

But this is taking so much of my time and I was wondering if there is something that I could do to make it so that I can instantly see any change in my code, in the UI.

I've searched and found that I can edit the docker-compose.yml and add the line

volumes:
      - .:/app

but it didn't work. I found, also, this video, used the command, no success still.

Any help would be greatly appreciated.

Solution

You want to use Docker compose watch

Without using volume mounts, it syncs files into a running container and can trigger build commands as necessary.

Nodemon also can streamline triggering a rebuild on file changes.

services:
  web:
    build: .
    command: npm start
    develop:
      watch:
      - action: sync
        path: ./
        target: /app/
        ignore:
          - node_modules/
      - action: rebuild
        path: package.json