Rename microfrontends.json to microfrontends-custom.jsonc

.github/workflows/ci.yml

@@ -34,11 +34,27 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-          cache: 'pnpm'
+          cache: "pnpm"
 
       - name: Install Dependencies
         id: pnpm-install
         run: pnpm install --frozen-lockfile
 
+      - name: Pull Vercel Environment Variables for nextjs-app example
+        env:
+          VERCEL_TOKEN_E2E: ${{ secrets.VERCEL_TOKEN_E2E }}
+        run: |
+          pnpm install -g vercel
+          echo "Fetching env for nextjs-app/docs..."
+          vercel link --cwd examples/nextjs-app/docs --scope microfrontends-vtest314 --project nextjs-app-docs --yes --token $VERCEL_TOKEN_E2E
+          cd examples/nextjs-app/docs
+          vercel env pull .env --token $VERCEL_TOKEN_E2E
+          cd ../../../
+          echo "Fetching env for appjs-app/marketing..."
+          vercel link --cwd examples/nextjs-app/marketing --scope microfrontends-vtest314 --project nextjs-app-marketing --yes --token $VERCEL_TOKEN_E2E
+          cd examples/nextjs-app/marketing
+          vercel env pull .env --token $VERCEL_TOKEN_E2E
+          cd ../../../
+
       - name: Run CI
         run: pnpm turbo typecheck lint test test:local-proxy-turbo-integration --continue

examples/nextjs-app/marketing/microfrontends.jsonc → examples/nextjs-app/marketing/microfrontends-custom.jsonc

@@ -1,69 +1,68 @@
-// TODO: delete this file when the build container support custom microfrontends.json naming
 {
   "$schema": "https://openapi.vercel.sh/microfrontends.json",
   "applications": {
     "nextjs-app-marketing": {
       "development": {
         "local": 3000,
-        "fallback": "nextjs-app-marketing.vercel.app",
-      },
+        "fallback": "nextjs-app-marketing.vercel.app"
+      }
     },
     "nextjs-app-docs": {
       "assetPrefix": "nextjs-app-docs",
       "development": {
-        "local": 3001,
+        "local": 3001
       },
       "routing": [
         {
           "group": "docs",
-          "paths": ["/docs", "/docs/:path*", "/nextjs-app-docs/:path*"],
+          "paths": ["/docs", "/docs/:path*", "/nextjs-app-docs/:path*"]
         },
         {
           "group": "flagged-docs-paths",
           "flag": "is-flagged-docs-path-enabled",
-          "paths": ["/flagged/docs"],
+          "paths": ["/flagged/docs"]
         },
         {
           "group": "mid-path-wildcard",
-          "paths": ["/some-:hash.js"],
+          "paths": ["/some-:hash.js"]
         },
         {
           "group": "excluding regex",
-          "paths": ["/city/:path((?!berlin|amsterdam).*)"],
+          "paths": ["/city/:path((?!berlin|amsterdam).*)"]
         },
         {
           "group": "special characters",
-          "paths": ["/foo/hello\\(world\\)"],
+          "paths": ["/foo/hello\\(world\\)"]
         },
         {
           "group": "dashes",
-          "paths": ["/foo/hello-world", "/foo/hello~world", "/foo/hello_world"],
+          "paths": ["/foo/hello-world", "/foo/hello~world", "/foo/hello_world"]
         },
         {
           "group": "regex with numbers",
-          "paths": ["/foo/:path(hello1|hello2)"],
+          "paths": ["/foo/:path(hello1|hello2)"]
         },
         {
           "group": "regex with dashes",
-          "paths": ["/foo/:path(hello-1|hello-2)"],
+          "paths": ["/foo/:path(hello-1|hello-2)"]
         },
         {
           "group": "regex with escaped characters",
-          "paths": ["/foo/:path(hello\\(1\\)|1)"],
+          "paths": ["/foo/:path(hello\\(1\\)|1)"]
         },
         {
           "group": "excluding regex with dashes",
-          "paths": ["/foo/:path((?!hello\\-3).*)"],
+          "paths": ["/foo/:path((?!hello\\-3).*)"]
         },
         {
           "group": "path with escaped characters",
-          "paths": ["/bar/hello\\(3\\)"],
+          "paths": ["/bar/hello\\(3\\)"]
         },
         {
           "group": "child rate limit",
-          "paths": ["/api/check-rate-limit"],
-        },
-      ],
-    },
-  },
+          "paths": ["/api/check-rate-limit"]
+        }
+      ]
+    }
+  }
 }

examples/nextjs-app/marketing/tests/microfrontends.test.ts

@@ -5,7 +5,7 @@ import { validateRouting } from '@vercel/microfrontends/next/testing';
 describe('microfrontends', () => {
   test('routing', () => {
     expect(() =>
-      validateRouting('./microfrontends.jsonc', {
+      validateRouting('./microfrontends-custom.jsonc', {
         'nextjs-app-marketing': ['/', '/city/amsterdam', '/flagged/docs'],
         'nextjs-app-docs': [
           '/docs',

examples/nextjs-app/marketing/tests/middleware.test.ts

@@ -13,13 +13,16 @@ jest.mock('flags/next', () => ({
 describe('middleware', () => {
   test('matches microfrontends paths', () => {
     expect(() =>
-      validateMiddlewareConfig(config, './microfrontends.jsonc'),
+      validateMiddlewareConfig(config, './microfrontends-custom.jsonc'),
     ).not.toThrow();
   });
 
   test('rewrites for flagged paths', async () => {
     await expect(
-      validateMiddlewareOnFlaggedPaths('./microfrontends.jsonc', middleware),
+      validateMiddlewareOnFlaggedPaths(
+        './microfrontends-custom.jsonc',
+        middleware,
+      ),
     ).resolves.not.toThrow();
   });
 });

examples/nextjs-app/marketing/tests/next-config.test.ts

@@ -34,7 +34,7 @@ describe('next.config.ts', () => {
 
       it('next.config.js redirects and rewrites should not match any microfrontend path', async () => {
         const mfeConfig = loadMicrofrontendConfigForEdge(
-          './microfrontends.jsonc',
+          './microfrontends-custom.jsonc',
         );
         const allPaths = [...getAllMicrofrontendPaths(mfeConfig)];
         const errors = [];

package.json

@@ -16,7 +16,7 @@
     "build:single-spa-example": "turbo build -F single-spa-root -F single-spa-web -F single-spa-shared",
     "changeset": "changeset",
     "checks": "turbo run build lint test typecheck --continue",
-    "dev:nextjs-app": "turbo dev -F nextjs-app-docs -F nextjs-app-marketing",
+    "dev:nextjs-app": "VC_MICROFRONTENDS_CONFIG_FILE_NAME=microfrontends-custom.jsonc turbo dev -F nextjs-app-docs -F nextjs-app-marketing",
     "dev:nextjs-pages": "turbo dev -F nextjs-pages-dashboard -F nextjs-pages-blog",
     "dev:react-router": "turbo dev -F react-router-web -F react-router-docs -F react-router-vite-base-path-different-than-vercel-project-name",
     "dev:single-spa": "turbo dev -F single-spa-root -F single-spa-web -F single-spa-shared",
@@ -48,7 +48,7 @@
     "lint-staged": "^15.4.3",
     "prettier": "^3.4.2",
     "syncpack": "^13.0.1",
-    "turbo": "2.5.2-canary.0",
+    "turbo": "2.6.0",
     "typescript": "5.7.3"
   },
   "packageManager": "[email protected]",

packages/internal-scripts/src/test-local-proxy-start.ts

@@ -4,15 +4,23 @@ import { join } from 'node:path';
 const WORKSPACE_ROOT = join(process.cwd(), '..', '..');
 
 const DEV_TASKS = [
-  'nextjs-app-docs#dev',
-  'nextjs-app-marketing#dev',
-  'nextjs-pages-blog#dev',
-  'nextjs-pages-dashboard#dev',
-  'react-router-docs#dev',
-  'react-router-vite-base-path-different-than-vercel-project-name#dev',
-  'react-router-web#dev',
-  'sveltekit-docs#dev',
-  'sveltekit-web#dev',
+  {
+    task: 'nextjs-app-docs#dev',
+    env: { VC_MICROFRONTENDS_CONFIG_FILE_NAME: 'microfrontends-custom.jsonc' },
+  },
+  {
+    task: 'nextjs-app-marketing#dev',
+    env: { VC_MICROFRONTENDS_CONFIG_FILE_NAME: 'microfrontends-custom.jsonc' },
+  },
+  { task: 'nextjs-pages-blog#dev' },
+  { task: 'nextjs-pages-dashboard#dev' },
+  { task: 'react-router-docs#dev' },
+  {
+    task: 'react-router-vite-base-path-different-than-vercel-project-name#dev',
+  },
+  { task: 'react-router-web#dev' },
+  { task: 'sveltekit-docs#dev' },
+  { task: 'sveltekit-web#dev' },
 ];
 
 interface DryRunOutput {
@@ -27,7 +35,7 @@ function main() {
   const missingProxyTask = [];
   const failed = [];
   for (const { devTask, hasProxyTask, errorMessage } of DEV_TASKS.map(
-    checkDevTask,
+    ({ task, env }) => checkDevTask(task, env),
   )) {
     if (errorMessage) {
       failed.push(`${devTask}: turbo dry run failed: ${errorMessage}`);
@@ -45,7 +53,10 @@ function main() {
   }
 }
 
-function checkDevTask(devTask: string): {
+function checkDevTask(
+  devTask: string,
+  env: Record<string, string> | undefined,
+): {
   devTask: string;
   hasProxyTask: boolean;
   errorMessage?: string;
@@ -54,6 +65,7 @@ function checkDevTask(devTask: string): {
     stdio: 'pipe',
     encoding: 'utf8',
     cwd: WORKSPACE_ROOT,
+    env: { ...process.env, ...env },
   });
   if (result.error) {
     return { devTask, hasProxyTask: false, errorMessage: result.error.message };

turbo.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://turborepo.org/schema.json",
-  "globalPassThroughEnv": ["MFE_DEBUG"],
+  "globalPassThroughEnv": ["MFE_DEBUG", "VC_MICROFRONTENDS_CONFIG_FILE_NAME"],
   "tasks": {
     "build": {
       "dependsOn": ["^build"],