Additional config options for hot reloader web socket connection

Author: jaslakson

packages/next-server/server/config.js

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

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

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

packages/next/server/hot-reloader.js

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