I am trying to set up a development environment for a web dev project that is a React app served by a flask backend using Nginx/Gunicorn (to be honest I'm not 100% on what exactly these do yet, especially Gunicorn). I followed a tutorial to create an app that meets my criteria, but I would like to be able to get live updates for my python/flask backend as well as the react frontend. I am trying to use docker volumes for this, but there is an issue.
Here is my Dockerfile for the react client and my docker-compose file for the project:
# Latest version of Node, use first image to create second image
FROM node:16-alpine as build-step
# Define working directory
WORKDIR /app
# Setting path variable on image (I think)
ENV PATH /app/node_modules/.bin:$PATH
# Copy dependencies
COPY package.json yarn.lock ./
# Copy app code
COPY ./src ./src
# Copy static web data
COPY ./public ./public
# Install dependencies and build the app (I think)
RUN yarn install
RUN yarn build
FROM nginx:stable-alpine
COPY --from=build-step /app/build /usr/share/nginx/html
COPY deployment/nginx.default.conf /etc/nginx/conf.d/default.conf
version: "3.7"
services:
api:
build:
context: .
dockerfile: Dockerfile.api
image: flask-app-api
client:
build:
context: .
dockerfile: Dockerfile.client
image: react-client
ports:
- "3000:80"
volumes:
- /app/node_modules
- .:/usr/share/nginx/html # See below
environment:
- WATCHPACK_POLLING=true
So I initially tried doing what most tutorials say and having a volume map .:/app but I think the issue is that my content is being served by Nginx so the content from my react build file is being copied to /usr/share/nginx/html and the original folder is no longer referenced hence the attempt at mapping it as seen above. This does not work which is why I'm here. So, my question is: how do I get live updates to my app in this environment or should I attempt to remove nginx from the equation for development purposes and only use it in the production environment?