CODEWITHSUNDEEP
node.jsdockernginxdocker-composedockerfile
cpd1
cpd1

Reputation: 789

After adding volumes to docker-compose, changes are not being picked up for frontend files

So I have this working as expected with flask where I used...

    volumes:
      - ./api:/app

And any files that I change in the api are picked up by the running session. I'd like to do the same for the frontend code.

For node/nginx, I used the below configuration. The only way for the file changes to be picked up is if I rebuild. I'd like for file changes to be picked up as they do for python but a bit stuck on why similar set up is not working for src files. Anyone know why this might be happening?

local path structure

public\
src\
Dockerfile.client
docker--compose.yml

docker file...

FROM node:16-alpine as build-step
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json ./
COPY ./src ./src
COPY ./public ./public
RUN yarn install
RUN yarn build


FROM nginx:alpine
COPY --from=build-step /app/build /usr/share/nginx/html
COPY nginx/nginx.conf /etc/nginx/nginx.conf

docker-compose

  client:
    build:
      context: .
      dockerfile: Dockerfile.client
    volumes:
      - ./src:/src
    restart: always
    ports:
      - "80:80"
    depends_on:
      - api

Upvotes: 0

Views: 274

Answers (1)

Lucas Bazetto
Lucas Bazetto

Reputation: 647

This is happening because you are building the application.

...
RUN yarn build
...

and them using your build folder:

FROM nginx:alpine
COPY --from=build-step /app/build /usr/share/nginx/html

I believe that what you are looking for is a live reload. You can find a good example here.

But basically what you need is a Dockerfile like this:

# Dockerfile
# Pull official Node.js image from Docker Hub
FROM node:12
# Create app directory
WORKDIR /usr/src/app
# Install dependencies
COPY package*.json ./
RUN npm install
# Bundle app source
COPY . .
# Expose container port 3000
EXPOSE 3000
# Run "start" script in package.json
CMD ["npm", "start"]

your npm start script:

 "start": "nodemon -L server/index.js"

and your volume:

    volumes:
      - ./api:/usr/src/app/serve

Upvotes: 2

Related Questions