Nginx Question posted in
The official documentation can be found here.

Is it possible to hot reload a React app after copying built files from a React container to an NGINX container?

I have the following Dockerfile which I use to deploy my React app, but I lose the hot-reloading functionality of hitting Ctrl+S to save & reload the app quickly during development. Is it possible to have hot-reloading in this set-up, or is there a suggested workaround? If not, I can remove the section that copies the files to NGINX for deployment or just deal with the extra overhead time for rebuilding my image.

# build react app
FROM node:16.1.0-alpine3.13 as build

RUN mkdir /app

WORKDIR /app

ENV PATH /app/node_modules/.bin:$PATH

COPY myui/package.json /app

RUN npm install

COPY myui /app/
RUN npm run build

# copy the react build files
FROM nginx:1.20.0-alpine

RUN rm /etc/nginx/conf.d/default.conf
RUN rm -rf /usr/share/nginx/html/*

COPY subhub_ui/nginx/nginx.conf /etc/nginx/nginx.conf
COPY myui/nginx/server.conf /etc/nginx/conf.d/default.conf.template
COPY myui/nginx/entrypoint.sh /usr/local/bin/entrypoint
RUN chmod 777 /usr/local/bin/entrypoint

COPY --from=build /app/build /usr/share/nginx/html

EXPOSE 8000
ENTRYPOINT ["entrypoint"]
CMD ["nginx", "-g", "daemon off;"]
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    In order to enable hot-reloading inside of Docker, I had to take the following steps:

    1. Make these changes to your docker-compose.yml file: 
      my_ui:
  volumes:
      - /path/to/my-ui-repo/:/home/app
  environment:
      - CHOKIDAR_USEPOLLING=true
    2. Build the docker-compose
    3. Run npm run dev to compile the front-end
    4. Run the following bash commands to converge the service's images 
      docker build -t "$DOCKER_URL/$IMAGE_NAME:$VERSION" .
if [[ $( docker service ls | grep my_ui | wc -l ) -gt 0 ]];
then
  docker service update --force --image "$DOCKER_URL/$IMAGE_NAME:$VERSION" my_ui
fi

    Any changes should be reflected in the browser now. Keep in mind that the converged service means that you should not push this development image to a place that could be used in production. One way around that issue could be to rename the image before converging the services.


  2. 0

    Hot reloading is a feature of a webpack plugin where the bundled files are stored in memory and changes are sent over a websocket using webpacks own dev server. A npm run build, builds your react app into static files you can serve. So, no it is not possible in this way.

    What you can do is reverse proxy from nginx to webpack dev server that react uses for development but this may require some tinkering with the webpack config file. But it is 100% possible as I have done it in the past.

    The easiest way to acheive this is to seperate out the nginx and react app into different containers and use docker-compose to easily put them on the same container network

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search