Next.js: Websocket with docker

[HeadFox]

Bug report

Describe the bug

We can't use nextjs v8 in dev mode with docker because it reload the DOM every 5 seconds.
He can't access to the websocket port. I can open this port in my Dockerfile but it change every time I launch next

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:
Just start next v8 with docker in dev mode

Screenshots

on-demand-entries-client.js:136 WebSocket connection to 'ws://0.0.0.0:41861/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED

System information

• OS: macOS
• Version of Next.js: 8.0.0

[ijjk]

@HeadFox you can set the port used by the WebSocket in next.config.js using the websocketPort option see here for info in the README

[timneutkens]

You can configure the websocket port: https://github.com/zeit/next.js#configuring-the-ondemandentries

Ah I had this tab open without refreshing. @ijjk already explained 😄

[HeadFox]

Perfect it works, thanks :)

[timneutkens]

@ijjk could you send me a DM on spectrum.chat/users/timneutkens, thanks!

[CosmaTrix]

Hi all,

I've been trying to put Next.js in a Docker container too, and I got the same issue that @HeadFox had. I've set the websocketProxyPort in the next.config.js file, but I still get the error.

// next.config.js
module.exports = {
  onDemandEntries: {
    websocketProxyPort: 49682,
  },
};

The issue happens even when I run the dev server without docker, by simply doing yarn dev.

Thanks!

[vizFlux]

module.exports = withLess({
  onDemandEntries: {
    websocketProxyPort: 41677,
  },
  webpack: config => {
    config.plugins = config.plugins || [];

    config.plugins = [
      ...config.plugins,

      new Dotenv({
        path: path.join(__dirname, '.env'),
        systemvars: true,
      }),
    ];

    return config;
  },
});

The issue's not going away even after having the websocketProxyPort set.

[ijjk]

@CosmaTrix @vizFlux websocketProxyPort is meant to be used together with websocketPort to allow configuring Next to run behind another server. If you are just wanting to lock down the WebSocket port for use in Docker you just need to set the websocketPort config and allow that port in your Docker config.

[CosmaTrix]

Thanks @ijjk,

I changed my next.config.js file to

module.exports = {
  onDemandEntries: {
    websocketPort: 3007,
  },
};

and, in my docker-compose file (for the next.js service), added

ports:
  - "3007:3007"

Everything is now working as expected. Thanks!!! 👍