configure hmr port

FredKSchott · Sep 22, 2020 · 5056a69 · 5056a69
1 parent 7266ca7
commit 5056a69
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 8 deletions.
diff --git a/snowpack/src/commands/build.ts b/snowpack/src/commands/build.ts
@@ -315,7 +315,7 @@ export async function command(commandOptions: CommandOptions) {
       path.resolve(internalFilesBuildLoc, 'hmr-error-overlay.js'),
       HMR_OVERLAY_CODE,
     );
-    hmrEngine = new EsmHmrEngine();
+    hmrEngine = new EsmHmrEngine({ port: config.devOptions.hmrPort });
   }
 
   logger.info(colors.yellow('! building source…'));
@@ -431,7 +431,7 @@ export async function command(commandOptions: CommandOptions) {
 
   // "--watch --hmr" mode - Tell users about the HMR WebSocket URL
   if (hmrEngine) {
-    logger.info(`[HMR] WebSocket URL available at ${colors.cyan(`${hmrEngine.wsUrl}`)}`);
+    logger.info(`[HMR] WebSocket URL available at ${colors.cyan(`ws://localhost:${config.devOptions.hmrPort}`)}`);
   }
 
   // "--watch" mode - Start watching the file system.

diff --git a/snowpack/src/config.ts b/snowpack/src/config.ts
@@ -48,6 +48,7 @@ const DEFAULT_CONFIG: Partial<SnowpackConfig> = {
     out: 'build',
     fallback: 'index.html',
     hmrDelay: 0,
+    hmrPort: 12321,
   },
   buildOptions: {
     baseUrl: '/',
@@ -89,6 +90,8 @@ const configSchema = {
         bundle: {type: 'boolean'},
         open: {type: 'string'},
         hmr: {type: 'boolean'},
+        hmrDelay: {type: 'number'},
+        hmrPort: {type: 'number'},
       },
     },
     installOptions: {

diff --git a/snowpack/src/hmr-server-engine.ts b/snowpack/src/hmr-server-engine.ts
@@ -23,9 +23,18 @@ type HMRMessage =
       errorStackTrace?: string;
     };
 
-const DEFAULT_PORT = 12321;
 const DEFAULT_CONNECT_DELAY = 2000;
 
+interface EsmHmrEngineOptionsCommon {
+  delay?: number;
+}
+
+type EsmHmrEngineOptions = ({
+  server: http.Server | http2.Http2Server;  
+} | {
+  port: number;
+}) & EsmHmrEngineOptionsCommon;
+
 export class EsmHmrEngine {
   clients: Set<WebSocket> = new Set();
   dependencyTree = new Map<string, Dependency>();
@@ -34,16 +43,16 @@ export class EsmHmrEngine {
   private currentBatch: HMRMessage[] = [];
   private currentBatchTimeout: NodeJS.Timer | null = null;
   private cachedConnectErrors: Set<HMRMessage> = new Set();
-  wsUrl = `ws://localhost:${DEFAULT_PORT}`;
 
-  constructor(options: {server?: http.Server | http2.Http2Server; delay?: number} = {}) {
-    const wss = options.server
+  constructor(options: EsmHmrEngineOptions) {
+    const wss = 'server' in options 
       ? new WebSocket.Server({noServer: true})
-      : new WebSocket.Server({port: DEFAULT_PORT});
+      : new WebSocket.Server({port: options.port});
     if (options.delay) {
       this.delay = options.delay;
     }
-    if (options.server) {
+
+    if ('server' in options) {
       options.server.on('upgrade', (req, socket, head) => {
         // Only handle upgrades to ESM-HMR requests, ignore others.
         if (req.headers['sec-websocket-protocol'] !== 'esm-hmr') {

diff --git a/snowpack/src/types/snowpack.ts b/snowpack/src/types/snowpack.ts
@@ -129,6 +129,7 @@ export interface SnowpackConfig {
     open: string;
     hmr?: boolean;
     hmrDelay: number;
+    hmrPort: number;
   };
   installOptions: InstallOptions;
   buildOptions: {