fix: route toolbar well-known requests locally (#59)

Author: kitfoster

.changeset/route-toolbar-well-known-local-proxy.md

@@ -0,0 +1,5 @@
+---
+"@vercel/microfrontends": patch
+---
+
+Route Vercel Toolbar well-known requests through the local proxy to the locally running application that served the page. This supports `@vercel/toolbar@0.2.6+`, which uses `/.well-known/vercel-toolbar/*` for local dev server access.

packages/microfrontends/src/bin/local-proxy.test.ts

@@ -378,6 +378,48 @@ describe('class ProxyRequestRouter', () => {
       });
     });
 
+    it('redirects vercel toolbar requests to referring application', () => {
+      const config = simpleConfig();
+      const router = new ProxyRequestRouter(config, {
+        localApps: ['vercel-site', 'vercel-marketing'],
+      });
+      const url = '/.well-known/vercel-toolbar/microfrontend-config';
+      expect(
+        router.getTarget({
+          url,
+          headers: {
+            referer: 'http://localhost:3024/blog/',
+          },
+        }),
+      ).toMatchObject({
+        application: 'vercel-marketing',
+        protocol: 'http',
+        hostname: 'localhost',
+        port: 5984,
+        path: url,
+      });
+    });
+
+    it('redirects vercel toolbar requests to the single local application without a referer', () => {
+      const config = simpleConfig();
+      const router = new ProxyRequestRouter(config, {
+        localApps: ['vercel-marketing'],
+      });
+      const url = '/.well-known/vercel-toolbar/microfrontend-config?from=zero';
+      expect(
+        router.getTarget({
+          url,
+          headers: {},
+        }),
+      ).toMatchObject({
+        application: 'vercel-marketing',
+        protocol: 'http',
+        hostname: 'localhost',
+        port: 5984,
+        path: url,
+      });
+    });
+
     it('redirects next source map to locally running application', () => {
       const config = simpleConfig();
       const router = new ProxyRequestRouter(config, {

packages/microfrontends/src/bin/local-proxy.ts

@@ -39,6 +39,7 @@ const MFE_FLAG_VALUE = 'vercel-mfe-flag-value';
 // - with flag enabled middleware will route the request to the zone
 // This flag informs middleware to ignore the flag function and use this value instead.
 const MFE_FLAG_VALUE_HEADER = `x-${MFE_FLAG_VALUE}`;
+const VERCEL_TOOLBAR_PROXY_BASE_PATH = '/.well-known/vercel-toolbar';
 
 interface ProxyTarget {
   application: string;
@@ -217,6 +218,16 @@ export class ProxyRequestRouter {
     middlewareMfeZone?: string;
     mfeFlagValue?: boolean;
   }): ProxyTarget | null {
+    const toolbarTarget = this.checkVercelToolbar({
+      path,
+      url,
+      referer,
+      applications,
+    });
+    if (toolbarTarget) {
+      return toolbarTarget;
+    }
+
     for (const application of Object.values(applications)) {
       const target = this.getApplicationTarget(application);
       if (middlewareMfeZone) {
@@ -354,6 +365,59 @@ export class ProxyRequestRouter {
     };
   }
 
+  checkVercelToolbar({
+    path,
+    url,
+    referer = undefined,
+    applications,
+  }: {
+    path: string;
+    url: URL;
+    referer?: string;
+    applications: ChildApplication[];
+  }): ProxyTarget | null {
+    const isVercelToolbarRequest =
+      url.pathname === VERCEL_TOOLBAR_PROXY_BASE_PATH ||
+      url.pathname.startsWith(`${VERCEL_TOOLBAR_PROXY_BASE_PATH}/`);
+    if (!isVercelToolbarRequest) {
+      return null;
+    }
+
+    if (referer) {
+      const refererURL = new URL(referer);
+      const refererTarget =
+        this.findMatchingApplication({
+          path: `${refererURL.pathname}${refererURL.search}`,
+          url: refererURL,
+          applications,
+        }) ?? this.getDefaultHost(this.config);
+
+      if (refererTarget.isLocal) {
+        logger.debug(
+          ` ${path} - Routing Vercel Toolbar request to referring application: ${formatProxyTarget(refererTarget)}`,
+        );
+        return {
+          ...refererTarget,
+          path: `${url.pathname}${url.search}`,
+        };
+      }
+    }
+
+    const localApp = this.getSingleLocalApp();
+    if (!localApp) {
+      return null;
+    }
+
+    const target = this.getApplicationTarget(localApp);
+    logger.debug(
+      ` ${path} - Routing Vercel Toolbar request to only locally running application: ${formatProxyTarget(target)}`,
+    );
+    return {
+      ...target,
+      path: `${url.pathname}${url.search}`,
+    };
+  }
+
   checkNextSourceMap({ url }: { url: URL }): ProxyTarget | null {
     const isSourceMap = pathToRegexp('/__nextjs_source-map').test(url.pathname);
     if (!isSourceMap) {
@@ -425,21 +489,32 @@ export class ProxyRequestRouter {
 
   isDefaultAppLocal(): boolean {
     const defaultApp = this.config.getDefaultApplication();
-    return Boolean(
-      this.localApps.find(
-        (name) => name === defaultApp.name || name === defaultApp.packageName,
-      ),
-    );
+    return this.isApplicationLocal(defaultApp);
   }
 
   getArbitraryLocalApp() {
     for (const application of this.config.getAllApplications()) {
-      const name = application.name;
-      if (this.localApps.includes(name)) {
+      if (this.isApplicationLocal(application)) {
         return application;
       }
     }
   }
+
+  getSingleLocalApp(): Application | undefined {
+    const localApplications = this.config
+      .getAllApplications()
+      .filter((application) => this.isApplicationLocal(application));
+
+    return localApplications.length === 1 ? localApplications[0] : undefined;
+  }
+
+  isApplicationLocal(application: Application): boolean {
+    return Boolean(
+      this.localApps.find(
+        (name) => name === application.name || name === application.packageName,
+      ),
+    );
+  }
 }
 
 export interface ProxyRequest {