Fix Pages Plugins and static asset routing (#970)

cloudflare · May 12, 2022 · 35e780b · 35e780b
1 parent 0dfd95f
commit 35e780b
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 5 deletions.
diff --git a/.changeset/honest-pants-move.md b/.changeset/honest-pants-move.md
@@ -0,0 +1,7 @@
+---
+"wrangler": patch
+---
+
+fix: Fixes Pages Plugins and static asset routing.
+
+There was previously a bug where a relative pathname would be missing the leading slash which would result in routing errors.
diff --git a/examples/pages-functions-app/tests/index.test.ts b/examples/pages-functions-app/tests/index.test.ts
@@ -123,5 +123,17 @@ describe("Pages Functions", () => {
     expect(text).toContain(
       "<h1>Hello from a static asset brought from a Plugin!</h1>"
     );
+
+    response = await waitUntilReady(
+      "http://localhost:8789/mounted-plugin/static/foo"
+    );
+    text = await response.text();
+    expect(text).toContain("<h1>foo</h1>");
+
+    response = await waitUntilReady(
+      "http://localhost:8789/mounted-plugin/static/dir/bar"
+    );
+    text = await response.text();
+    expect(text).toContain("<h1>bar</h1>");
   });
 });
diff --git a/examples/pages-plugin-example/functions/static.ts b/examples/pages-plugin-example/functions/static.ts
diff --git a/examples/pages-plugin-example/functions/static/_middleware.ts b/examples/pages-plugin-example/functions/static/_middleware.ts
@@ -0,0 +1 @@
+export { onRequest } from "assets:../../public";
diff --git a/examples/pages-plugin-example/public/dir/bar.html b/examples/pages-plugin-example/public/dir/bar.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Static asset from a Plugin!</title>
+  </head>
+  <body>
+    <h1>bar</h1>
+  </body>
+</html>
diff --git a/examples/pages-plugin-example/public/foo.html b/examples/pages-plugin-example/public/foo.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Static asset from a Plugin!</title>
+  </head>
+  <body>
+    <h1>foo</h1>
+  </body>
+</html>
diff --git a/packages/wrangler/pages/functions/buildWorker.ts b/packages/wrangler/pages/functions/buildWorker.ts
@@ -122,7 +122,7 @@ export function buildWorker({
                   // TODO: Watch args.path for changes and re-copy when updated
                   contents: `export const onRequest = ({ request, env, functionPath }) => {
                     const url = new URL(request.url)
-                    const relativePathname = url.pathname.split(functionPath)[1] || "/";
+                    const relativePathname = \`/\${url.pathname.split(functionPath)[1] || ''}\`.replace(/^\\/\\//, '/');
                     url.pathname = '/cdn-cgi/pages-plugins/${identifier}' + relativePathname
                     request = new Request(url.toString(), request)
                     return env.ASSETS.fetch(request)

diff --git a/packages/wrangler/pages/functions/template-plugin.ts b/packages/wrangler/pages/functions/template-plugin.ts
@@ -103,8 +103,9 @@ export default function (pluginArgs) {
     const { env, next, data } = workerContext;
 
     const url = new URL(request.url);
-    const relativePathname =
-      url.pathname.split(workerContext.functionPath)[1] || "/";
+    const relativePathname = `/${
+      url.pathname.split(workerContext.functionPath)[1] || ""
+    }`.replace(/^\/\//, "/");
 
     const handlerIterator = executeRequest(request, relativePathname);
     const pluginNext = async (input?: RequestInfo, init?: RequestInit) => {

diff --git a/packages/wrangler/src/pages.tsx b/packages/wrangler/src/pages.tsx
@@ -1576,6 +1576,10 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
                 default: false,
                 description: "Build a plugin rather than a Worker script",
               },
+              "build-output-directory": {
+                type: "string",
+                description: "The directory to output static assets to",
+              },
             })
             .epilogue(pagesBetaWarning),
         async ({
@@ -1587,12 +1591,15 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
           fallbackService,
           watch,
           plugin,
+          "build-output-directory": buildOutputDirectory,
         }) => {
           if (!isInPagesCI) {
             // Beta message for `wrangler pages <commands>` usage
             logger.log(pagesBetaWarning);
           }
 
+          buildOutputDirectory ??= dirname(outfile);
+
           await buildFunctions({
             outfile,
             outputConfigPath,
@@ -1602,7 +1609,7 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
             fallbackService,
             watch,
             plugin,
-            buildOutputDirectory: dirname(outfile),
+            buildOutputDirectory,
           });
         }
       )