Add --open/-O option to auto-open browser on startup, closes #121

Author: mrbbot

package-lock.json

@@ -23,6 +23,8 @@ import { HTTPPlugin, RequestMeta } from "./plugin";
 export * from "./helpers";
 export * from "./plugin";
 
+export const DEFAULT_PORT = 8787;
+
 export type HTTPPluginSignatures = CorePluginSignatures & {
   HTTPPlugin: typeof HTTPPlugin;
 };
@@ -405,7 +407,7 @@ export async function startServer<Plugins extends HTTPPluginSignatures>(
 ): Promise<http.Server | https.Server> {
   const server = await createServer(mf, options);
   const plugins = await mf.getPlugins();
-  const { httpsEnabled, host, port = 8787 } = plugins.HTTPPlugin;
+  const { httpsEnabled, host, port = DEFAULT_PORT } = plugins.HTTPPlugin;
   return new Promise((resolve) => {
     server.listen(port, host, () => {
       const log = mf.log;

packages/http-server/src/index.ts

@@ -85,6 +85,7 @@ export interface RequestMeta {
 export interface HTTPOptions {
   host?: string;
   port?: number;
+  open?: boolean | string;
 
   https?: boolean | string;
   httpsKey?: string;
@@ -127,6 +128,14 @@ export class HTTPPlugin extends Plugin<HTTPOptions> implements HTTPOptions {
   })
   port?: number;
 
+  @Option({
+    type: OptionType.BOOLEAN_STRING,
+    alias: "O",
+    description: "Automatically open browser to URL",
+    fromWrangler: ({ miniflare }) => miniflare?.open,
+  })
+  open?: boolean | string;
+
   @Option({
     type: OptionType.BOOLEAN_STRING,
     description: "Enable self-signed HTTPS (with optional cert path)",

packages/http-server/src/plugin.ts

@@ -31,6 +31,7 @@ test("HTTPPlugin: parses options from argv", (t) => {
     "127.0.0.1",
     "--port",
     "3000",
+    "--open",
     "--https",
     "--https-key",
     "key.pem",
@@ -48,6 +49,7 @@ test("HTTPPlugin: parses options from argv", (t) => {
   t.deepEqual(options, {
     host: "127.0.0.1",
     port: 3000,
+    open: true,
     https: true,
     httpsKeyPath: "key.pem",
     httpsCertPath: "cert.pem",
@@ -62,6 +64,8 @@ test("HTTPPlugin: parses options from argv", (t) => {
     "127.0.0.1",
     "-p",
     "3000",
+    "-O",
+    "https://localhost:8787",
     "--https",
     "./cert",
     "--cf-fetch",
@@ -70,6 +74,7 @@ test("HTTPPlugin: parses options from argv", (t) => {
   t.deepEqual(options, {
     host: "127.0.0.1",
     port: 3000,
+    open: "https://localhost:8787",
     https: "./cert",
     cfFetch: "./cf.json",
   });
@@ -79,6 +84,7 @@ test("HTTPPlugin: parses options from wrangler config", (t) => {
     miniflare: {
       host: "127.0.0.1",
       port: 3000,
+      open: true,
       https: true,
       cf_fetch: false,
       live_reload: true,
@@ -87,6 +93,7 @@ test("HTTPPlugin: parses options from wrangler config", (t) => {
   t.like(options, {
     host: "127.0.0.1",
     port: 3000,
+    open: true,
     https: true,
     cfFetch: false,
     liveReload: true,
@@ -120,6 +127,7 @@ test("HTTPPlugin: logs options", (t) => {
   let logs = logPluginOptions(HTTPPlugin, {
     host: "127.0.0.1",
     port: 3000,
+    open: true,
     https: true,
     httpsKey: "key",
     httpsKeyPath: "key.pem",
@@ -137,6 +145,7 @@ test("HTTPPlugin: logs options", (t) => {
   t.deepEqual(logs, [
     "Host: 127.0.0.1",
     "Port: 3000",
+    "Open: true",
     "HTTPS: true",
     "HTTPS Key: key.pem",
     "HTTPS Cert: cert.pem",

packages/http-server/test/plugin.spec.ts

@@ -31,7 +31,7 @@ goals:
    [122 third-party packages](http://npm.anvaka.com/#/view/2d/miniflare) with a
    total install size of `88.3MB`. Miniflare 2 reduces this to **23 packages and
    `6.2MB`** 🤯.
-3. ✅ **Correct:** Miniflare 2 more accurately replicates the quirks and thrown
+3. ✅ **Accurate:** Miniflare 2 more accurately replicates the quirks and thrown
    errors of the real Workers runtime, so you'll know before you deploy if
    things are going to break.
 

packages/miniflare/README.md

@@ -68,7 +68,8 @@
   },
   "devDependencies": {
     "@miniflare/shared-test": "2.0.0-rc.3",
-    "@types/source-map-support": "^0.5.4"
+    "@types/source-map-support": "^0.5.4",
+    "open": "^8.4.0"
   },
   "peerDependencies": {
     "@miniflare/storage-redis": "2.0.0-rc.3",

packages/miniflare/package.json

@@ -15,7 +15,12 @@ import {
   DurableObjectsPlugin,
 } from "@miniflare/durable-objects";
 import { HTMLRewriterPlugin } from "@miniflare/html-rewriter";
-import { HTTPPlugin, createServer, startServer } from "@miniflare/http-server";
+import {
+  DEFAULT_PORT,
+  HTTPPlugin,
+  createServer,
+  startServer,
+} from "@miniflare/http-server";
 import { KVNamespace, KVPlugin } from "@miniflare/kv";
 import { VMScriptRunner } from "@miniflare/runner-vm";
 import {
@@ -134,4 +139,17 @@ export class Miniflare extends MiniflareCore<Plugins> {
   startScheduler(): Promise<CronScheduler<Plugins>> {
     return startScheduler(this);
   }
+
+  async getOpenURL(): Promise<string | undefined> {
+    const {
+      open,
+      httpsEnabled,
+      host = "localhost",
+      port = DEFAULT_PORT,
+    } = (await this.getPlugins()).HTTPPlugin;
+    if (!open) return;
+    if (typeof open === "string") return open;
+    const protocol = httpsEnabled ? "https" : "http";
+    return `${protocol}://${host}:${port}/`;
+  }
 }

packages/miniflare/src/api.ts

@@ -4,6 +4,7 @@ import path from "path";
 import type { Options } from "@miniflare/shared";
 import { red } from "kleur/colors";
 import type { MiniflareOptions } from "miniflare";
+import open from "open";
 import { updateCheck } from "./updater";
 
 function suppressWarnings() {
@@ -97,6 +98,14 @@ async function main() {
     return;
   }
 
+  // Open browser if requested
+  const openURL = await mf.getOpenURL();
+  try {
+    if (openURL) await open(openURL);
+  } catch (e: any) {
+    mf.log.warn("Unable to open browser: " + e.stack);
+  }
+
   // TODO: check how this works with next tag
   const plugins = await mf.getPlugins();
   // Check for updates, ignoring errors (it's not that important)

packages/miniflare/src/cli.ts

@@ -1,6 +1,6 @@
 import { AddressInfo } from "net";
 import { Log, LogLevel } from "@miniflare/shared";
-import { interceptConsoleLogs } from "@miniflare/shared-test";
+import { interceptConsoleLogs, useTmp } from "@miniflare/shared-test";
 import test from "ava";
 import { Miniflare, VariedStorageFactory } from "miniflare";
 import { fetch } from "undici";
@@ -173,3 +173,23 @@ test.serial("Miniflare: startScheduler: starts CRON scheduler", async (t) => {
   };
   await mf.startScheduler();
 });
+test("Miniflare: getOpenURL: returns URL to open browser at", async (t) => {
+  // Check returns undefined if open disabled
+  const mf = new Miniflare({ script: "//" });
+  t.is(await mf.getOpenURL(), undefined);
+  await mf.setOptions({ open: false });
+  t.is(await mf.getOpenURL(), undefined);
+
+  // Check returns custom string URL
+  await mf.setOptions({ open: "https://some.other.website/" });
+  t.is(await mf.getOpenURL(), "https://some.other.website/");
+
+  // Check returns http URL with default host and port
+  await mf.setOptions({ open: true });
+  t.is(await mf.getOpenURL(), "http://localhost:8787/");
+
+  // Check returns https URL with custom host and port
+  const tmp = await useTmp(t);
+  await mf.setOptions({ open: true, https: tmp, host: "test.mf", port: 3000 });
+  t.is(await mf.getOpenURL(), "https://test.mf:3000/");
+});

packages/miniflare/test/api.spec.ts

@@ -46,6 +46,7 @@ export interface WranglerEnvironmentConfig {
     env_path?: string;
     host?: string;
     port?: number;
+    open?: boolean | string;
     cf_fetch?: boolean | string;
     https?:
       | boolean