0

I created this docker-compose file based on my two images (front and back-end), both are running ok when I run docker-compose up.

The problem is that I want to make hot reload work properly for my frontend which is built upon react.

I tried many things but the properties volumes and build do not seem to be able to find my directories.

So, the directory for both projects are:

  • C:\Users\pwdie\Downloads\projects\typescript-api (api)

  • C:\Users\pwdie\Downloads\projects\frontend-api-consumer (front)

being "projects" for the root for both of them, and frontend-api-consumer containing the docker-compose.yml as the image shows.

Didn't understand that part of the docker-compose system, explanations will be well received.

enter image description here

Front Dockerfile

    FROM node:17

    WORKDIR /app

    COPY package.json ./

    RUN yarn

    COPY ./ ./

    EXPOSE 3000:3000

    CMD ["yarn", "dev"]

Api Dockerfile

    FROM node:17

    WORKDIR /app

    COPY package.json ./

    RUN yarn

    COPY . .

    ENV DB_HOST=host.docker.internal

    EXPOSE 5000:5000

    CMD ["yarn", "dev"]

Docker-compose.yml

    version: "3.8"
    services:
      api:
        image: api
        build: ../typescript_api
        volumes:
          - ../typescript_api:/var/app
        environment:
          DB_USER: postgres
          DB_PASSWORD: postgres
          DB_HOST: host.docker.internal
          DB_PORT: 5432
          DB_NAME: typescript_api
          ACCESS_TOKEN_SECRET: 1c6c3296f699e051220674d329e040dee0abae986f62d62eb89f55dfa95bff1ac9b52731177e664e25bff9b6ce0eba6ec7a9b6cf7d03e94487dc03179dc31c7e
        ports:
          - "5000:5000"
      front:
        image: front
        build: .
        volumes:
          - ./:/var/app
        environment:
          REACT_APP_MAPBOX_TOKEN: pk.eyJ1Ijoic291c2FkaWVnbzExIiwiYSI6ImNrdHEwbDRrdTBycTEycXBtbXZ5eXEzMm4ifQ.U58H7S1um_WcRC2rBoEuNw
          REACT_APP_API_URL: http://localhost:5000
        depends_on:
          - api
        ports:
          - "3000:3000"
Jason Aller
  • 3,541
  • 28
  • 38
  • 38
Diego
  • 67
  • 7
  • Please clarify what exactly is not working as expected. Are the volumes not mounted as expected? Or does just hot reloading not work properly? If so this may be a duplicate of https://stackoverflow.com/questions/53938476 – acran Dec 26 '21 at 15:52
  • @acran sorry if i was'nt clear, my problem is with "build" and "volumes", i can't make docker compose to find those directories as expected, does the volumes first path is to my machine? or the second? does the build directory is for the project on the machine? or something else? this is my problem. Not a problem with webpack, a problem with my docker-compose.yml file configuration – Diego Dec 26 '21 at 16:40
  • the paths for the `volumes` and `build` properties are relative to the location of the `docker-compose.yml`, please see the [official documentation](https://docs.docker.com/compose/compose-file/compose-file-v3/) on that. So your configuration looks correct. If it does not work please provide a more precise error description, i.e. what is the error message you are receiving? – acran Dec 26 '21 at 17:23
  • I described all relative locations that are specific to my machine so it helps on people's answers. Error: unable to prepare context: path "C:\\Users\\pwdie\\Downloads\\projects\\typescript_api" not found – Diego Dec 26 '21 at 18:17
  • The second path in both `volumes:` blocks is `/var/app`; that directory doesn't seem to be mentioned in the Dockerfiles. (Consider just using plain Node for a live-development environment.) – David Maze Dec 26 '21 at 21:37
  • The whole point is to make the volumes/build work properly, should be an easy answer for someone who has the knowlege, i just dont understand the paths for it – Diego Dec 27 '21 at 01:15

0 Answers0