Share volume across multiple containers

I have a situation in which container runs a npm run dev so this is just rollup -cw, so we're waiting for frontend file changes and creating a bundle. Now the problem is that I have two containers, one is for frontend and the other is for backend. And when I use docker-compose to mix all containers together, these two doesn't share the same volume. So backend doesn't know when the bundle has been created or updated. Also I must ensure that when any changes happen (in fronted) the bundle also must be updated in the host files? And if I'm getting everything right, if I would use named volume then the host files will not be effected. What's the other choice?

This is my root dir:

- frontend
- backend
- docker-compose.yml

The bundle is being created to backend static files dir. And the backend doesn't know that the bundle is updated or etc. All containers are isolated, right?

frontend:
    tty: true
    restart: unless-stopped
    stdin_open: true
    build: ./frontend
    container_name: frontend
    volumes:
      - ./frontend:/frontend # Ensure that npm run dev would catch new changes
  django:
    build: ./web
    ports:
      - 5050:5050
    restart: always
    container_name: django
    command: [django, runserver, 0.0.0.0:5050]
    tty: true
    stdin_open: true
    depends_on:
      - frontend
    volumes:
      - .:/werent # Update the container with local changes

This is the rollup.config.js:

   input: "./main.ts",
    output: {
      format: "iife", // Immediately Invoked Function Expression
      file: "../web/static/dist/bundle.js",
    },

How should I make this work? What's the best practice for connecting these two and also updating local files?

You clarify that the frontend container is just building the static assets for the django application. It doesn't actually need a running container for this. A better approach is to use a multi-stage build; this uses a node image to compile the front-end, and then COPY --from that into the actual Django image.

This would roughly look like:

FROM node:lts AS frontend
WORKDIR /frontend
COPY frontend/package*.json ./
RUN npm ci
COPY frontend/ ./
RUN npm build

FROM python:3.11
WORKDIR /werent
COPY web/requirements.txt ./
...
COPY --from=frontend /frontend/dist/ static/dist/
...
CMD ["django", "runserver", "0.0.0.0:5050"]

One detail to note here is that you're accessing files from both the frontend and web directories. This means the Docker build context directory needs to be a parent of these directories, and the left-hand side of COPY needs to mention which subdirectory to use.

In the Compose file, then, it's important that you do not have volumes: that hide the application directory. Since the frontend is only injected in the Dockerfile and isn't necessarily built on your host, a bind mount would hide the copy of the frontend application that the image builds. You also don't need most of the other options you show in the Compose file. It should be enough to say

version: '3.8'
services:
  # no frontend: container
  django:
    build: ./web
    ports:
      - 5050:5050
    restart: always
    # no container_name:, command:, tty:, stdin_open:, volumes:

The other important detail is that you can still use this Docker-based setup even if you normally use host tools for development. You can for example launch this container but then use a Webpack dev server without Docker for live development on the frontend; or you could work on the Python source code locally in a non-Docker virtual environment, run pytest locally, and run docker-compose up --build only when you're ready to do final integration testing.