feat: Workers Sites support for local mode (#336)

* chore: example-sites-app An example app with a Workers Sites definition. * feat: inline text-like files into the worker bundle We were adding text-like modules (i.e. `.txt`, `.html` and `.pem` files) as separate modules in the Worker definition, but this only really 'works' with the ES module Worker format. This commit changes that to inline the text-like files into the Worker bundle directly. We still have to do something similar with `.wasm` modules, but that requires a different fix, and we'll do so in a subsequent commit. * feat: Sites support for local mode `wrangler dev` This adds support for Workers Sites in local mode when running wrangler `dev`. Further, it fixes a bug where we were sending the `__STATIC_CONTENT_MANIFEST` definition as a separate module even with service worker format, and a bug where we weren't uploading the namespace binding when other kv namespaces weren't present. * Update packages/wrangler/src/api/form_data.ts Co-authored-by: Pete Bacon Darwin <[email protected]> Co-authored-by: Pete Bacon Darwin <[email protected]>
cloudflare · Jan 29, 2022 · ce61000 · ce61000
1 parent a417cb0
commit ce61000
Show file tree

Hide file tree

Showing 21 changed files with 636 additions and 129 deletions.
diff --git a/.changeset/nervous-pugs-lay.md b/.changeset/nervous-pugs-lay.md
@@ -0,0 +1,9 @@
+---
+"wrangler": patch
+---
+
+feat: inline text-like files into the worker bundle
+
+We were adding text-like modules (i.e. `.txt`, `.html` and `.pem` files) as separate modules in the Worker definition, but this only really 'works' with the ES module Worker format. This commit changes that to inline the text-like files into the Worker bundle directly.
+
+We still have to do something similar with `.wasm` modules, but that requires a different fix, and we'll do so in a subsequent commit.
diff --git a/.changeset/red-pillows-grow.md b/.changeset/red-pillows-grow.md
@@ -0,0 +1,7 @@
+---
+"wrangler": patch
+---
+
+feat: Sites support for local mode `wrangler dev`
+
+This adds support for Workers Sites in local mode when running wrangler `dev`. Further, it fixes a bug where we were sending the `__STATIC_CONTENT_MANIFEST` definition as a separate module even with service worker format, and a bug where we weren't uploading the namespace binding when other kv namespaces weren't present.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/example-sites-app/package.json b/packages/example-sites-app/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "example-sites-app",
+  "private": true,
+  "version": "1.0.0",
+  "dependencies": {
+    "@cloudflare/kv-asset-handler": "~0.2.0"
+  }
+}
diff --git a/packages/example-sites-app/public/404.html b/packages/example-sites-app/public/404.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Pacifico&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
+      rel="stylesheet"
+    />
+    <style>
+      h1 {
+        font-family: Pacifico, sans-serif;
+        font-size: 4em;
+        color: #3eb5f1;
+        margin: 0;
+      }
+
+      h2 {
+        font-weight: 300;
+        font-family: sans-serif;
+      }
+
+      .centered {
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        text-align: center;
+      }
+
+      #ferris {
+        width: 75%;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="centered">
+      <h1>404 Not Found</h1>
+      <h2>Oh dang! We couldn't find that page.</h2>
+      <img
+        id="ferris"
+        alt="a sad crab is unable to unable to lasso a paper airplane. 404 not found."
+        src="./img/404-wrangler-ferris.gif"
+      />
+    </div>
+  </body>
+</html>
diff --git a/packages/example-sites-app/public/favicon.ico b/packages/example-sites-app/public/favicon.ico
diff --git a/packages/example-sites-app/public/img/200-wrangler-ferris.gif b/packages/example-sites-app/public/img/200-wrangler-ferris.gif
diff --git a/packages/example-sites-app/public/img/404-wrangler-ferris.gif b/packages/example-sites-app/public/img/404-wrangler-ferris.gif
diff --git a/packages/example-sites-app/public/index.html b/packages/example-sites-app/public/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Pacifico&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
+      rel="stylesheet"
+    />
+    <style>
+      h1 {
+        font-family: Pacifico, sans-serif;
+        font-size: 4em;
+        color: #3eb5f1;
+        margin: 0;
+      }
+
+      h2 {
+        font-weight: 300;
+        font-family: sans-serif;
+      }
+
+      .centered {
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        text-align: center;
+      }
+
+      #ferris {
+        width: 75%;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="centered">
+      <h1>200 Success</h1>
+      <h2>Hello World! Welcome to your Workers Site.</h2>
+      <img
+        id="ferris"
+        alt="a happy crab is wearing a cowboy hat and holding a lasso. 200 success."
+        src="./img/200-wrangler-ferris.gif"
+      />
+    </div>
+  </body>
+</html>
diff --git a/packages/example-sites-app/src/index.js b/packages/example-sites-app/src/index.js
@@ -0,0 +1,66 @@
+import {
+  getAssetFromKV,
+  mapRequestToAsset,
+} from "@cloudflare/kv-asset-handler";
+
+/**
+ * The DEBUG flag will do two things that help during development:
+ * 1. we will skip caching on the edge, which makes it easier to
+ *    debug.
+ * 2. we will return an error message on exception in your Response rather
+ *    than the default 404.html page.
+ */
+const DEBUG = false;
+
+addEventListener("fetch", (event) => {
+  event.respondWith(handleEvent(event));
+});
+
+async function handleEvent(event) {
+  let options = {};
+
+  /**
+   * You can add custom logic to how we fetch your assets
+   * by configuring the function `mapRequestToAsset`
+   */
+  // options.mapRequestToAsset = handlePrefix(/^\/docs/)
+
+  try {
+    if (DEBUG) {
+      // customize caching
+      options.cacheControl = {
+        bypassCache: true,
+      };
+    }
+
+    const page = await getAssetFromKV(event, options);
+
+    // allow headers to be altered
+    const response = new Response(page.body, page);
+
+    response.headers.set("X-XSS-Protection", "1; mode=block");
+    response.headers.set("X-Content-Type-Options", "nosniff");
+    response.headers.set("X-Frame-Options", "DENY");
+    response.headers.set("Referrer-Policy", "unsafe-url");
+    response.headers.set("Feature-Policy", "none");
+
+    return response;
+  } catch (e) {
+    // if an error is thrown try to serve the asset at 404.html
+    if (!DEBUG) {
+      try {
+        let notFoundResponse = await getAssetFromKV(event, {
+          mapRequestToAsset: (req) =>
+            new Request(`${new URL(req.url).origin}/404.html`, req),
+        });
+
+        return new Response(notFoundResponse.body, {
+          ...notFoundResponse,
+          status: 404,
+        });
+      } catch (e) {}
+    }
+
+    return new Response(e.message || e.toString(), { status: 500 });
+  }
+}
diff --git a/packages/example-sites-app/wrangler.toml b/packages/example-sites-app/wrangler.toml
@@ -0,0 +1,2 @@
+name = "example-sites-app"
+site = { bucket = "./public" }
diff --git a/packages/wrangler/src/__tests__/kv.test.ts b/packages/wrangler/src/__tests__/kv.test.ts
@@ -4,11 +4,11 @@ import {
   setMockResponse,
   setMockRawResponse,
   unsetAllMocks,
-  createFetchResult,
 } from "./mock-cfetch";
 import { runWrangler } from "./run-wrangler";
 import { runInTempDir } from "./run-in-tmp";
 import { mockConsoleMethods } from "./mock-console";
+import { mockKeyListRequest } from "./mock-kv";
 
 describe("wrangler", () => {
   runInTempDir();
@@ -1222,42 +1222,3 @@ function writeWranglerConfig() {
     "utf-8"
   );
 }
-
-export function mockKeyListRequest(
-  expectedNamespaceId: string,
-  expectedKeys: string[],
-  keysPerRequest = 1000,
-  blankCursorValue: "" | undefined | null = undefined
-) {
-  const requests = { count: 0 };
-  // See https://api.cloudflare.com/#workers-kv-namespace-list-a-namespace-s-keys
-  const expectedKeyObjects = expectedKeys.map((name) => ({
-    name,
-    expiration: 123456789,
-    metadata: {},
-  }));
-  setMockRawResponse(
-    "/accounts/:accountId/storage/kv/namespaces/:namespaceId/keys",
-    "GET",
-    ([_url, accountId, namespaceId], _init, query) => {
-      requests.count++;
-      expect(accountId).toEqual("some-account-id");
-      expect(namespaceId).toEqual(expectedNamespaceId);
-      if (expectedKeyObjects.length <= keysPerRequest) {
-        return createFetchResult(expectedKeyObjects);
-      } else {
-        const start = parseInt(query.get("cursor") ?? "0") || 0;
-        const end = start + keysPerRequest;
-        const cursor = end < expectedKeyObjects.length ? end : blankCursorValue;
-        return createFetchResult(
-          expectedKeyObjects.slice(start, end),
-          true,
-          [],
-          [],
-          { cursor }
-        );
-      }
-    }
-  );
-  return requests;
-}
diff --git a/packages/wrangler/src/__tests__/logout.test.ts b/packages/wrangler/src/__tests__/logout.test.ts
@@ -6,7 +6,7 @@ import { runWrangler } from "./run-wrangler";
 import { runInTempDir } from "./run-in-tmp";
 import { initialise } from "../user";
 import { mockConsoleMethods } from "./mock-console";
-import { writeUserConfig } from "./whoami.test";
+import { writeUserConfig } from "./mock-user";
 
 const ORIGINAL_CF_API_TOKEN = process.env.CF_API_TOKEN;
 const ORIGINAL_CF_ACCOUNT_ID = process.env.CF_ACCOUNT_ID;

diff --git a/packages/wrangler/src/__tests__/mock-kv.ts b/packages/wrangler/src/__tests__/mock-kv.ts
@@ -0,0 +1,40 @@
+import { createFetchResult, setMockRawResponse } from "./mock-cfetch";
+
+export function mockKeyListRequest(
+  expectedNamespaceId: string,
+  expectedKeys: string[],
+  keysPerRequest = 1000,
+  blankCursorValue: "" | undefined | null = undefined
+) {
+  const requests = { count: 0 };
+  // See https://api.cloudflare.com/#workers-kv-namespace-list-a-namespace-s-keys
+  const expectedKeyObjects = expectedKeys.map((name) => ({
+    name,
+    expiration: 123456789,
+    metadata: {},
+  }));
+  setMockRawResponse(
+    "/accounts/:accountId/storage/kv/namespaces/:namespaceId/keys",
+    "GET",
+    ([_url, accountId, namespaceId], _init, query) => {
+      requests.count++;
+      expect(accountId).toEqual("some-account-id");
+      expect(namespaceId).toEqual(expectedNamespaceId);
+      if (expectedKeyObjects.length <= keysPerRequest) {
+        return createFetchResult(expectedKeyObjects);
+      } else {
+        const start = parseInt(query.get("cursor") ?? "0") || 0;
+        const end = start + keysPerRequest;
+        const cursor = end < expectedKeyObjects.length ? end : blankCursorValue;
+        return createFetchResult(
+          expectedKeyObjects.slice(start, end),
+          true,
+          [],
+          [],
+          { cursor }
+        );
+      }
+    }
+  );
+  return requests;
+}