Docker Community Forums

Share and learn in the Docker community.

Confusion about volumes and live-reloads

I have the following file structure:

my-app
├── docker-compose.dev.yml
├── ui (React)
│   ├── src
│   ├── .dockerignore
│   ├── Dockerfile.dev
│   ├── package.json
│   ├── package-lock.json
├── api (Node)
│   ├── src
│   ├── .dockerignore
│   ├── Dockerfile.dev
│   ├── package.json
│   ├── package-lock.json
├── server (Nginx)
│   ├── Dockerfile.dev
│   ├── nginx.dev.conf

ui/Dockerfile.dev

FROM node:lts

WORKDIR /ui

COPY package.json .
COPY package-lock.json .

RUN npm install

EXPOSE 3000

CMD ["npm", "start"]

api/Dockerfile.dev

FROM node:lts

WORKDIR /api

COPY package.json .
COPY package-lock.json .

RUN npm install

EXPOSE 8080

CMD ["npm", "run", "dev"]

.dockerignore (It’s the same for ui and api)

node_modules
build
.dockerignore
Dockerfile
Dockerfile.prod

docker-compose.dev.yml

version: "3.8"
services:
  ui:
    build:
      context: ./ui
      dockerfile: Dockerfile.dev
    image: my-app-ui
    volumes:
      - ./ui:/ui
      - ./ui/node_modules
    ports:
      - "3000:3000"
    tty: true

  api:
    build:
      context: ./api
      dockerfile: Dockerfile.dev
    image: my-app-api
    env_file:
      - ./api.env
    ports:
      - "8080"

  server:
    build:
      context: ./server
      dockerfile: Dockerfile.dev
    image: my-app-server
    ports:
      - "80:80"
    links:
      - api:api
      - ui:ui

When I run this with docker-compose -f docker-compose.dev.yml up the ui has live-reloads although an empty node_modules folder is generated at my-app/ui/ that gets populated with another .cache folder whenever the development server restarts. The order of the volumes at the ui service is the only way it works and if I don’t add ./ui/node_modules I get an error saying that the package react-scripts was not found. I don’t know why this works the way it does or even at all. As far as I understand it the short syntax for volume declaration uses the colon to separate between the source, which can be either a host path or a name for the volume, and the target, which is the container path where the volume is mounted. This makes me think that the first volume is mounting the contents of my-app/ui/ on the container’s /ui/ path. Shouldn’t this be enough to abilitate live-reloads? Why do I need to add ./ui/node_modules after that for the container to be able to run scripts dependant on packages? I don’t have a node_modules folder on my-app/ui/, I’m installing the dependencies from that Dockerfile. What is it even doing? Is it just specifying a path and letting the Engine create a volume, like the docs suggest?

There’s more: when I declare volumes for the api service like I did with ui:

api:
    build:
      context: ./api
      dockerfile: Dockerfile.dev
    image: snake-api
    env_file:
      - ./api.env
    volumes:
      - ./api:/api
      - ./api/node_modules
    ports:
      - "8080"

Both containers fail to start and these errors are thrown:

ERROR: for ui Cannot start service ui: OCI runtime create failed: container_linux.go:349: starting container process caused “process_linux.go:449: container init caused “rootfs_linux.go:58: mounting \”/var/lib/docker/volumes/1cbe57d474e441fc67073878f45647a08db5c2b774d9b93c7fa4c583ea4ab229/_data\” to rootfs \"/var/lib/docker/overlay2/0c864fb070cec3c96ed46d16219047aa5875e84fbde77415d4f1dd6590e160dd/merged\" at \"/var/lib/docker/overlay2/0c864fb070cec3c96ed46d16219047aa5875e84fbde77415d4f1dd6590e160dd/merged/ui/node_modules\" caused \“mkdir /var/lib/docker/overlay2/0c864fb070cec3c96ed46d16219047aa5875e84fbde77415d4f1dd6590e160dd/merged/ui/node_modules: file exists\”"": unknown

ERROR: for api Cannot start service api: OCI runtime create failed: container_linux.go:349: starting container process caused “process_linux.go:449: container init caused “rootfs_linux.go:58: mounting \”/var/lib/docker/volumes/9257238f321f1fc9705e3a194f99c8bd15846978645548ec7d887dd8c90f90d7/_data\” to rootfs \"/var/lib/docker/overlay2/4f48404c5f6134d8e3592576ccccd2404306b1ac1dada65691686950049beb06/merged\" at \"/var/lib/docker/overlay2/4f48404c5f6134d8e3592576ccccd2404306b1ac1dada65691686950049beb06/merged/api/node_modules\" caused \“mkdir /var/lib/docker/overlay2/4f48404c5f6134d8e3592576ccccd2404306b1ac1dada65691686950049beb06/merged/api/node_modules:
file exists\”"": unknown

UNLESS I first create an empty node_modules folder on each directory (my-app/ui/ and my-app/api/) or, at least, on the api. Doing this makes both services start and allows live-reloading. Forgetting to create that folder on the ui causes it to crash and throw the error above but forgetting to create it on the api will make it print that nodemon was not found, an error similar to the one I experience on the ui when I don’t add ./ui/node_modules. What is happening?

this is from the file dec.exs

config :hello, Hello.Endpoint,
http: [port: 4000],
debug_errors: true,
code_reloader: true,
cache_static_lookup: false,
watchers: [node: [“node_modules/brunch/bin/brunch”, “watch”, “–stdin”]]

Watch static and templates for browser reloading.

config :hello, Hello.Endpoint,
live_reload: [
patterns: [
~r{priv/static/.(js|css|png|jpeg|jpg|gif)}, ~r{web/views/.*(ex)},
~r{web/templates/.
(eex)$}
]
]
i run mix phoenix.server
then point browser to localhost:4000
There is an error here

[error] backend port not found: :inotifywait

mix phoenix.server
Compiled web/views/page_view.ex
Generated hello app
[info] Running Hello.Endpoint with Cowboy on http://localhost:4000
[warning] the :size option when configuring Hello.Repo is deprecated, please use :pool_size instead
[info] GET /
[debug] Processing by Hello.PageController.index/2
Parameters: %{“format” => “html”}
Pipelines: [:browser]
[info] Sent 200 in 650ms
[error] backend port not found: :inotifywait

09 Aug 18:49:53 - info: compiled 5 files into 2 files, copied 3 in 8021ms

then i edit web/templates/page/index.html.eex save and page is not reloading…