docker container auto reload

[scenic crag]

I was trying to implement auto-updating (hot reloading) on my containerized Next app.
I was snooping around the with-docker-compose example available here

It mentions in the README that "The page auto-updates as you edit the file." in development mode.
This is not true.
Not only is it not auto-updating, manually refreshing the page does not reflect changes either. I need to down and then up the containers for the changes to be reflected.

I am unsure whether I'm doing something wrong or if this is a bug, but looking at the the docker configuration I don't see how the container is supposed to reflect changes on my local machine.
How do I make it so docker is able to pick up on changes to files?

[hallow brook]

Hi @scenic crag. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

It seems like you're experiencing an issue with hot reloading in a Docker environment with Next.js. This is a known issue and there are several ways to address it.

One solution is to add environment variables to your Dockerfile. This was suggested by a user in a Github issue (https://github.com/vercel/next.js/issues/36774) related to hot reloading in Docker. The user added the following environment variables to their Dockerfile:

ENV NODE_ENV=development
ENV CHOKIDAR_USEPOLLING=true
ENV WATCHPACK_POLLING=true

Another user suggested modifying the next.config.js file to enable polling:

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  webpack: (config, context) => {
    // Enable polling based on env variable being set
    if(process.env.NEXT_WEBPACK_USEPOLLING) {
      config.watchOptions = {
        poll: 500,
        aggregateTimeout: 300
      }
    }
    return config
  },
}
module.exports = nextConfig

In this case, you would need to set the NEXT_WEBPACK_USEPOLLING environment variable in your Docker environment.

Another user in the same Github issue (https://github.com/vercel/next.js/issues/36774) mentioned that the issue was not with Next.js or Docker, but with the Docker host. They suggested using inotify mount if you're using colima.

Please note that these solutions might slow down the compilation process.

If you're using NGINX with Docker, you might need to add some configuration to handle WebSocket connections, as suggested in another Github issue (https://github.com/vercel/next.js/issues/63203). The user added the following to their NGINX configuration:

location /_next/webpack-hmr {
   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   proxy_set_header Host $host;
   proxy_pass <http://frontend;>
   proxy_http_version 1.1;
   proxy_set_header Upgrade $http_upgrade;
   proxy_set_header Connection "upgrade";
 }

Please try these solutions and see if they solve your issue.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: