Additional config options for hot reloader web socket connection (#6083)

* Additional config options for hot reloader web socket connection

* Apply suggestions from code review

Accepting suggested code changes

Co-Authored-By: jaslakson <jason.aslakson@americastestkitchen.com>

* updated README with websocket proxy options

* Fix test / cleanup port setting

* Always set proxy_path

packages/next-server/server/config.js

@@ -18,7 +18,9 @@ const defaultConfig = {
   onDemandEntries: {
     maxInactiveAge: 60 * 1000,
     pagesBufferLength: 2,
-    websocketPort: 0
+    websocketPort: 0,
+    websocketProxyPath: '/',
+    websocketProxyPort: null
   }
 }
 

packages/next/README.md

@@ -1297,6 +1297,10 @@ module.exports = {
     pagesBufferLength: 2,
     // optionally configure a port for the onDemandEntries WebSocket, not needed by default
     websocketPort: 3001,
+    // optionally configure a proxy path for the onDemandEntries WebSocket, not need by default
+    websocketProxyPath: '/hmr',
+    // optionally configure a proxy port for the onDemandEntries WebSocket, not need by default
+    websocketProxyPort: 7002,
   },
 }
 ```

packages/next/client/on-demand-entries-client.js

@@ -3,7 +3,8 @@
 import Router from 'next/router'
 import fetch from 'unfetch'
 
-const { hostname } = location
+const { hostname, protocol } = location
+const wsProtocol = protocol.includes('https') ? 'wss' : 'ws'
 const retryTime = 5000
 let ws = null
 let lastHref = null
@@ -19,7 +20,7 @@ export default async ({ assetPrefix }) => {
     }
 
     return new Promise(resolve => {
-      ws = new WebSocket(`ws://${hostname}:${process.env.NEXT_WS_PORT}`)
+      ws = new WebSocket(`${wsProtocol}://${hostname}:${process.env.NEXT_WS_PORT}${process.env.NEXT_WS_PROXY_PATH}`)
       ws.onopen = () => resolve()
       ws.onclose = () => {
         setTimeout(async () => {

packages/next/server/hot-reloader.js

@@ -164,10 +164,13 @@ export default class HotReloader {
     return del(join(this.dir, this.config.distDir), { force: true })
   }
 
-  addWsPort (configs) {
-    configs[0].plugins.push(new webpack.DefinePlugin({
-      'process.env.NEXT_WS_PORT': this.wsPort
-    }))
+  addWsConfig (configs) {
+    const { websocketProxyPath, websocketProxyPort } = this.config.onDemandEntries
+    const opts = {
+      'process.env.NEXT_WS_PORT': websocketProxyPort || this.wsPort,
+      'process.env.NEXT_WS_PROXY_PATH': JSON.stringify(websocketProxyPath)
+    }
+    configs[0].plugins.push(new webpack.DefinePlugin(opts))
   }
 
   async getWebpackConfig () {
@@ -200,7 +203,7 @@ export default class HotReloader {
     })
 
     const configs = await this.getWebpackConfig()
-    this.addWsPort(configs)
+    this.addWsConfig(configs)
 
     const multiCompiler = webpack(configs)
 
@@ -229,7 +232,7 @@ export default class HotReloader {
     await this.clean()
 
     const configs = await this.getWebpackConfig()
-    this.addWsPort(configs)
+    this.addWsConfig(configs)
 
     const compiler = webpack(configs)