feat: add support for reading build time env variables from a .env …

…file

This change will automatically load up a `.env` file, if found, and apply its
values to the current environment. An example would be to provide a specific
CLOUDFLARE_ACCOUNT_ID value.

Related to cloudflare#190

.changeset/spotty-waves-think.md

@@ -0,0 +1,11 @@
+---
+"wrangler": patch
+---
+
+feat: add support for reading build time env variables from a `.env` file
+
+This change will automatically load up a `.env` file, if found, and apply its
+values to the current environment. An example would be to provide a specific
+CLOUDFLARE_ACCOUNT_ID value.
+
+Related to cloudflare#190

examples/local-mode-tests/.env

@@ -0,0 +1 @@
+FOO="the value of foo"

examples/local-mode-tests/src/wrangler.dotenv.toml

@@ -0,0 +1,6 @@
+name = "local-mode-tests"
+compatibility_date = "2022-03-27"
+
+# This custom build command will show whether the FOO
+# environment variable was read from the `.env` file.
+build.command = "echo $FOO"

examples/local-mode-tests/tests/dotenv.test.ts

@@ -0,0 +1,18 @@
+import { isWindows, spawnWranglerDev } from "./helpers";
+
+it("should use the environment variable from the .env file", async () => {
+  // These tests break in CI for windows, so we're disabling them for now
+  if (isWindows) return;
+
+  const { wranglerProcess, fetchWhenReady, terminateProcess } =
+    spawnWranglerDev("src/module.ts", "src/wrangler.dotenv.toml", 9002);
+
+  try {
+    await fetchWhenReady("http://localhost");
+    expect(wranglerProcess.stdout?.read().toString()).toContain(
+      "the value of foo"
+    );
+  } finally {
+    await terminateProcess();
+  }
+});

examples/local-mode-tests/tests/helpers.ts

@@ -0,0 +1,77 @@
+import { spawn } from "node:child_process";
+import { fetch } from "undici";
+import type { Response } from "undici";
+
+export const isWindows = process.platform === "win32";
+
+export async function sleep(ms: number): Promise<void> {
+  await new Promise((resolvePromise) => setTimeout(resolvePromise, ms));
+}
+
+/**
+ * Spawn a child process that is running `wrangler dev`.
+ *
+ * @returns two helper functions:
+ * - `fetchWhenReady()` will run a fetch against the preview Worker, once it is up and running,
+ *   and return its response.
+ * - `terminateProcess()` send a signal to the `wrangler dev` child process to kill itself.
+ */
+export function spawnWranglerDev(
+  srcPath: string,
+  wranglerTomlPath: string,
+  port: number
+) {
+  const wranglerProcess = spawn(
+    "npx",
+    [
+      "wrangler",
+      "dev",
+      srcPath,
+      "--local",
+      "--config",
+      wranglerTomlPath,
+      "--port",
+      port.toString(),
+    ],
+    {
+      shell: isWindows,
+      stdio: "pipe",
+    }
+  );
+
+  const fetchWhenReady = async (url: string): Promise<Response> => {
+    const MAX_ATTEMPTS = 50;
+    const SLEEP_MS = 100;
+    let attempts = MAX_ATTEMPTS;
+    while (attempts-- > 0) {
+      await sleep(SLEEP_MS);
+      try {
+        return await fetch(`${url}:${port}`);
+      } catch {}
+    }
+    throw new Error(
+      `Failed to connect to "${url}:${port}" within ${
+        (MAX_ATTEMPTS * SLEEP_MS) / 1000
+      } seconds.`
+    );
+  };
+
+  const terminateProcess = () => {
+    return new Promise((resolve, reject) => {
+      wranglerProcess.once("exit", (code) => {
+        if (!code) {
+          resolve(code);
+        } else {
+          reject(code);
+        }
+      });
+      wranglerProcess.kill();
+    });
+  };
+
+  return {
+    wranglerProcess,
+    fetchWhenReady,
+    terminateProcess,
+  };
+}

examples/local-mode-tests/tests/module.test.ts

@@ -1,71 +1,19 @@
-import { spawn } from "child_process";
-import { fetch } from "undici";
-import type { ChildProcess } from "child_process";
-import type { Response } from "undici";
+import { isWindows, spawnWranglerDev } from "./helpers";
 
-const waitUntilReady = async (url: string): Promise<Response> => {
-  let response: Response | undefined = undefined;
-
-  while (response === undefined) {
-    await new Promise((resolvePromise) => setTimeout(resolvePromise, 100));
-
-    try {
-      response = await fetch(url);
-    } catch {}
-  }
-
-  return response as Response;
-};
-const isWindows = process.platform === "win32";
-
-let wranglerProcess: ChildProcess;
-
-beforeAll(async () => {
+it("renders", async () => {
   // These tests break in CI for windows, so we're disabling them for now
   if (isWindows) return;
 
-  wranglerProcess = spawn(
-    "npx",
-    [
-      "wrangler",
-      "dev",
-      "src/module.ts",
-      "--local",
-      "--config",
-      "src/wrangler.module.toml",
-      "--port",
-      "9001",
-    ],
-    {
-      shell: isWindows,
-      stdio: "inherit",
-    }
+  const { fetchWhenReady, terminateProcess } = spawnWranglerDev(
+    "src/module.ts",
+    "src/wrangler.module.toml",
+    9001
   );
-});
-
-afterAll(async () => {
-  // These tests break in CI for windows, so we're disabling them for now
-  if (isWindows) return;
 
-  await new Promise((resolve, reject) => {
-    wranglerProcess.once("exit", (code) => {
-      if (!code) {
-        resolve(code);
-      } else {
-        reject(code);
-      }
-    });
-    wranglerProcess.kill();
-  });
-});
-
-it("renders", async () => {
-  // These tests break in CI for windows, so we're disabling them for now
-  if (isWindows) return;
-
-  const response = await waitUntilReady("http://localhost:9001/");
-  const text = await response.text();
-  expect(text).toMatchInlineSnapshot(`
+  try {
+    const response = await fetchWhenReady("http://localhost");
+    const text = await response.text();
+    expect(text).toMatchInlineSnapshot(`
     "{
       \\"VAR1\\": \\"value1\\",
       \\"VAR2\\": 123,
@@ -76,4 +24,7 @@ it("renders", async () => {
       \\"data\\": \\"Here be some data\\"
     }"
   `);
+  } finally {
+    await terminateProcess();
+  }
 });

examples/local-mode-tests/tests/sw.test.ts

@@ -1,71 +1,18 @@
-import { spawn } from "child_process";
-import { fetch } from "undici";
-import type { ChildProcess } from "child_process";
-import type { Response } from "undici";
-
-const waitUntilReady = async (url: string): Promise<Response> => {
-  let response: Response | undefined = undefined;
-
-  while (response === undefined) {
-    await new Promise((resolvePromise) => setTimeout(resolvePromise, 100));
-
-    try {
-      response = await fetch(url);
-    } catch {}
-  }
-
-  return response as Response;
-};
-const isWindows = process.platform === "win32";
-
-let wranglerProcess: ChildProcess;
-
-beforeAll(async () => {
-  // These tests break in CI for windows, so we're disabling them for now
-  if (isWindows) return;
-
-  wranglerProcess = spawn(
-    "npx",
-    [
-      "wrangler",
-      "dev",
-      "src/sw.ts",
-      "--local",
-      "--config",
-      "src/wrangler.sw.toml",
-      "--port",
-      "9002",
-    ],
-    {
-      shell: isWindows,
-      stdio: "inherit",
-    }
-  );
-});
-
-afterAll(async () => {
-  // These tests break in CI for windows, so we're disabling them for now
-  if (isWindows) return;
-
-  await new Promise((resolve, reject) => {
-    wranglerProcess.once("exit", (code) => {
-      if (!code) {
-        resolve(code);
-      } else {
-        reject(code);
-      }
-    });
-    wranglerProcess.kill();
-  });
-});
+import { isWindows, spawnWranglerDev } from "./helpers";
 
 it("renders", async () => {
   // These tests break in CI for windows, so we're disabling them for now
   if (isWindows) return;
+  const { fetchWhenReady, terminateProcess } = spawnWranglerDev(
+    "src/sw.ts",
+    "src/wrangler.sw.toml",
+    9000
+  );
 
-  const response = await waitUntilReady("http://localhost:9002/");
-  const text = await response.text();
-  expect(text).toMatchInlineSnapshot(`
+  try {
+    const response = await fetchWhenReady("http://localhost");
+    const text = await response.text();
+    expect(text).toMatchInlineSnapshot(`
     "{
       \\"VAR1\\": \\"value1\\",
       \\"VAR2\\": 123,
@@ -78,4 +25,7 @@ it("renders", async () => {
       \\"DATA\\": \\"Here be some data\\"
     }"
   `);
+  } finally {
+    await terminateProcess();
+  }
 });

packages/wrangler/package.json

@@ -69,6 +69,7 @@
     "cmd-shim": "^4.1.0",
     "command-exists": "^1.2.9",
     "devtools-protocol": "^0.0.955664",
+    "dotenv": "^16.0.0",
     "execa": "^6.1.0",
     "faye-websocket": "^0.11.4",
     "finalhandler": "^1.2.0",

packages/wrangler/src/cli.ts

@@ -1,3 +1,4 @@
+import "dotenv/config"; // Grab locally specified env params from a `.env` file.
 import process from "process";
 import { hideBin } from "yargs/helpers";
 import { FatalError } from "./errors";