CODEWITHSUNDEEP
node.jsreactjsdockerdocker-composenext.js
Disuan
Disuan

Reputation: 343

Why NextJS using Docker container did not reload after changed code for dev environment?

I'm trying to run the NextJS on a Docker container using Dockerfile and running via docker-compose, after I changed my code in a JS file (such as index.js) the Next server did not reload.

But when I've tried to run outside without using Docker (by executing the "npm run dev" command directly) the Next server did reload smoothly.

I've also tried to run the server by "nodemon" command (inside a container), it did not make it either.

Dockerfile:

FROM node:10.14.2-alpine
COPY . /home/next_app
WORKDIR /home/next_app
RUN npm install

docker-compose.yml:

version: "3.6"
services:
  self_nextjs:
    container_name: self_nextjs
    build:
        context: ./app
        dockerfile: Dockerfile
    ports:
        - 3000:3000
    volumes:
        - ./app:/home/next_app
        - /home/next_app/node_modules
    networks:
        - zen_frontend
    restart: always
    command: npm run dev

networks:
  zen_frontend:
      name: zen_frontend
      driver: bridge

Any suggestions would be appreciated.

Upvotes: 12

Views: 12693

Answers (4)

hasselmann
hasselmann

Reputation: 493

TL;DR: On Windows, use WSL to host source files.

I stumbled upon this problem working on Windows 10 or 11 using VS Code devcontainers. The issue is related to the file host; if your source files are on the Windows file system and mounted into the Linux container, somehow changes won't be propagated, thus hot reloading not working.

The solution is to use WSL (version 2) and host your source files there. Source and tried it myself.

To do this, set up the following:

  1. Install your favorite available distro either from the MS Store or with
wsl --install [-d <distro>] // default is ubuntu
  1. If you're using Docker Desktop, make sure the distro has access to it by checking Settings > Resources > WSL Integration
  2. Start your distro as app, which opens a bash and put your sources there

Happy Coding!

Upvotes: 3

cinnamon.dohnut
cinnamon.dohnut

Reputation: 61

I had to change @davidatthepark solution a little bit to get it to work for me. It looks like webpackDevMiddleware is not supported any more.

module.exports = {
  webpack: (config, _) => ({
    ...config,
    watchOptions: {
      ...config.watchOptions,
      poll: 800,
      aggregateTimeout: 300,
    },
  }),
}

Upvotes: 6

davidatthepark
davidatthepark

Reputation: 1365

I had the same issue on Windows 10. I followed some of the instructions in this thread https://github.com/zeit/next.js/issues/6417. Basically, you have to add a next.config.js to poll for changes. I'm not sure if MacOS has the same problem.

module.exports = {
  webpackDevMiddleware: config => {
    config.watchOptions = {
      poll: 800,
      aggregateTimeout: 300,
    }
    return config
  },
}

Upvotes: 6

masmerino
masmerino

Reputation: 1036

Have you tested by exposing webpack default hot reload port?

add to your Dockerfile

...
EXPOSE 49153
...

and update your docker-compose.yml

version: "3.6"
services:
  self_nextjs:
    container_name: self_nextjs
    build:
        context: ./app
        dockerfile: Dockerfile
    ports:
        - 3000:3000
        - 49153:49153
    volumes:
        - ./app:/home/next_app
        - /home/next_app/node_modules
    networks:
        - zen_frontend
    restart: always
    command: npm run dev

networks:
  zen_frontend:
      name: zen_frontend
      driver: bridge

Hope this help,

Regards

Upvotes: 3

Related Questions