Expose urlHostname option

See #114
jgoz · May 21, 2024 · b23f695 · b23f695
1 parent 153cf75
commit b23f695
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 7 deletions.
diff --git a/.changeset/modern-eggs-visit.md b/.changeset/modern-eggs-visit.md
@@ -0,0 +1,7 @@
+---
+'@jgoz/esbuild-plugin-livereload': minor
+---
+
+Expose urlHostname option
+
+Fixes #114
diff --git a/packages/esbuild-plugin-livereload/README.md b/packages/esbuild-plugin-livereload/README.md
@@ -48,8 +48,9 @@ Note that this will have no effect for Node programs.
 | Name | Type | Default | Description |
 | ---- | ---- | ------- | ----------- |
 | fullReloadOnCssUpdates | `boolean` | `false` | Instead of hot-reloading CSS files, trigger a full page reload when CSS is updated. |
-| host | `string` | `127.0.0.1` | Host that the livereload server will run on. |
+| host | `string` | `127.0.0.1` | Host that the livereload server will run on.<br><br>Setting this value to '0.0.0.0' will allow external connections, e.g., when running the livereload server on a different system from the connecting web browser. This setup likely requires setting `urlHostname` to the either the IP address or local DNS name of the livereload system. |
 | port | `number` | `53099` | Port that the livereload server will run on. |
+| urlHostname | `string` | - | Hostname to use when connecting to the livereload server.<br><br>This option might be useful when running the livereload server on a different system from the connecting web browser.<br><br>Defaults to the value specified in `host`. |
 <!-- end -->
 <!-- prettier-ignore-end -->
 
@@ -69,7 +70,7 @@ from esbuild, the page will be sent a reload request.
 | ---- | ---- | ------- | ----------- |
 | errorSource (*) | `string` | - | Key to use when identifying these errors and warnings.                      Previous results will be overwritten for the same `errorSource`. |
 | msg (*) | `ClientMessage` | - | Object containing errors and warnings from the given source |
-| connectedClients | `Set<ServerResponse<IncomingMessage>>` | `clients` | Set of long-lived server responses representing                           clients currently connected to the livereload                           server. Only required if you are implementing your                           own livereload server.  |
+| connectedClients | `Set<ServerResponse<IncomingMessage>>` | `clients` | Set of long-lived server responses representing                           clients currently connected to the livereload                           server. Only required if you are implementing your                           own livereload server. |
 <!-- end -->
 <!-- prettier-ignore-end -->
 

diff --git a/packages/esbuild-plugin-livereload/src/livereload-plugin.ts b/packages/esbuild-plugin-livereload/src/livereload-plugin.ts
@@ -59,9 +59,25 @@ export interface LivereloadPluginOptions {
   /**
    * Host that the livereload server will run on.
    *
+   * Setting this value to '0.0.0.0' will allow external
+   * connections, e.g., when running the livereload server
+   * on a different system from the connecting web browser.
+   * This setup likely requires setting `urlHostname` to the
+   * either the IP address or local DNS name of the livereload system.
+   *
    * @default 127.0.0.1
    */
   host?: string;
+
+  /**
+   * Hostname to use when connecting to the livereload server.
+   *
+   * This option might be useful when running the livereload
+   * server on a different system from the connecting web browser.
+   *
+   * Defaults to the value specified in `host`.
+   */
+  urlHostname?: string;
 }
 
 /**
@@ -72,8 +88,8 @@ export interface LivereloadPluginOptions {
  * @returns - An esbuild plugin that enables livereload.
  */
 export function livereloadPlugin(options: LivereloadPluginOptions = {}): Plugin {
-  const { port = 53099, host = '127.0.0.1' } = options;
-  const baseUrl = `http://${host}:${port}/`;
+  const { port = 53099, host = '127.0.0.1', urlHostname = host } = options;
+  const baseUrl = `http://${urlHostname}:${port}/`;
 
   return {
     name: 'livereload-plugin',
@@ -82,7 +98,13 @@ export function livereloadPlugin(options: LivereloadPluginOptions = {}): Plugin
       const bannerTemplate = await fsp.readFile(require.resolve('../banner.js'), 'utf-8');
       const banner = bannerTemplate.replace(/{baseUrl}/g, baseUrl);
 
-      await createLivereloadServer({ basedir, host, port, onSSE: res => clients.add(res) });
+      await createLivereloadServer({
+        basedir,
+        host,
+        port,
+        urlHostname,
+        onSSE: res => clients.add(res),
+      });
 
       build.initialOptions.banner ??= {};
       if (build.initialOptions.banner.js) {

diff --git a/packages/esbuild-plugin-livereload/src/server.ts b/packages/esbuild-plugin-livereload/src/server.ts
@@ -10,6 +10,7 @@ export interface LivereloadServerOptions {
   basedir: string;
   port: number;
   host: string;
+  urlHostname?: string;
   onSSE: (res: ServerResponse) => void;
 }
 
@@ -24,13 +25,13 @@ export type LivereloadRequestHandler = (req: IncomingMessage, res: ServerRespons
 export async function createLivereloadRequestHandler(
   options: LivereloadServerOptions,
 ): Promise<LivereloadRequestHandler> {
-  const { port, host, onSSE, basedir } = options;
+  const { port, host, onSSE, basedir, urlHostname = host } = options;
 
   const distFiles = await fs.promises.readdir(__dirname);
 
   return function handleLivereloadRequest(req, res): boolean {
     if (!req.url) return false;
-    const url = new URL(req.url, `http://${host}:${port}/`);
+    const url = new URL(req.url, `http://${urlHostname}:${port}/`);
 
     if (url.pathname === '/esbuild') {
       onSSE(