Docker compose with subdirectory and live reload

Question

I created an app using create-react-app and set up docker compose to set up the container and start the app. When the app is in the root directory, the app starts and the live reload works. But when I move the app to a subdirectory, I can get the app to start, but the live reload does not work.

Here's the working setup:

Dockerfile

FROM node:7.7.2

ADD . /code

WORKDIR /code

RUN npm install

EXPOSE 3000

CMD npm start

docker-compose.yml

version: "2"

services:
  client:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/code

Directory structure

app
- node_modules
- docker-compose
- Dockerfile
- package.json
- src
- public

Here's the structure that I would like:

app
- server
- client
  / node_modules
  / Dockerfile
  / package.json
  / src
  / public
- docker-compose.yml

I've tried every variation that I can think of, but the live reload will not work.

The first thing I had to do was change the build location:

version: "2"

services:
  client:
    build: ./client
    ports:
      - "3000:3000"
    volumes:
      - .:/code

Then I got an error when trying to run docker-compose up:

npm ERR! enoent ENOENT: no such file or directory, open '/code/package.json'

So I changed the volume to - .:/client/code and rebuilt and ran the command and the app started, but no live reload.

Anyway to do this when the app is in a subdirectory?

Answer 1

There's no difference to the paths inside the container when you move your local directory. So you only need to change the local references.

The volume mount should come from ./client

version: "2"

services:
  client:
    build: ./client
    ports:
      - "3000:3000"
    volumes:
      - ./client:/code