test(nextjs): E2E tests for middleware file placement

.changeset/selfish-news-invent.md

@@ -0,0 +1,2 @@
+---
+---

integration/models/application.ts

@@ -20,6 +20,7 @@ export const application = (
  const stdoutFilePath = path.resolve(appDirPath, `e2e.${now}.log`);
  const stderrFilePath = path.resolve(appDirPath, `e2e.${now}.err.log`);
  let buildOutput = '';
+ let serveOutput = '';
 
  const self = {
  name,
@@ -93,7 +94,11 @@ export const application = (
  get buildOutput() {
  return buildOutput;
  },
+ get serveOutput() {
+ return serveOutput;
+ },
  serve: async (opts: { port?: number; manualStart?: boolean } = {}) => {
+ const log = logger.child({ prefix: 'serve' }).info;
  const port = opts.port || (await getPort());
  // TODO: get serverUrl as in dev()
  const serverUrl = `http://localhost:${port}`;
@@ -102,6 +107,10 @@ export const application = (
  const proc = run(scripts.serve, {
  cwd: appDirPath,
  env: { PORT: port.toString() },
+ log: (msg: string) => {
+ serveOutput += `\n${msg}`;
+ log(msg);
+ },
  });
  cleanupFns.push(() => awaitableTreekill(proc.pid, 'SIGKILL'));
  await waitForIdleProcess(proc);

integration/models/applicationConfig.ts

@@ -13,7 +13,7 @@ type Scripts = { dev: string; build: string; setup: string; serve: string };
 export const applicationConfig = () => {
  let name = '';
  let serverUrl = '';
-const templates: string[] = [];
+let template: string;
  const files = new Map<string, string>();
  const scripts: Scripts = { dev: 'pnpm dev', serve: 'pnpm serve', build: 'pnpm build', setup: 'pnpm install' };
  const envFormatters = { public: (key: string) => key, private: (key: string) => key };
@@ -26,7 +26,9 @@ export const applicationConfig = () => {
  clone.setName(name);
  clone.setEnvFormatter('public', envFormatters.public);
  clone.setEnvFormatter('private', envFormatters.private);
- templates.forEach(t => clone.useTemplate(t));
+ if (template) {
+ clone.useTemplate(template);
+ }
  dependencies.forEach((v, k) => clone.addDependency(k, v));
  Object.entries(scripts).forEach(([k, v]) => clone.addScript(k as keyof typeof scripts, v));
  files.forEach((v, k) => clone.addFile(k, () => v));
@@ -44,8 +46,12 @@ export const applicationConfig = () => {
  files.set(filePath, cbOrPath(helpers));
  return self;
  },
+ removeFile: (filePath: string) => {
+ files.set(filePath, '');
+ return self;
+ },
  useTemplate: (path: string) => {
-templates.push(path);
+template = path;
  return self;
  },
  setEnvFormatter: (type: keyof typeof envFormatters, formatter: typeof envFormatters.public) => {
@@ -76,20 +82,32 @@ export const applicationConfig = () => {
  const appDirPath = path.resolve(constants.TMP_DIR, appDirName);
 
  // Copy template files
-for (const template of templates) {
+if (template) {
  logger.info(`Copying template "${path.basename(template)}" -> ${appDirPath}`);
  await fs.ensureDir(appDirPath);
  await fs.copy(template, appDirPath, { overwrite: true, filter: (p: string) => !p.includes('node_modules') });
  }
 
+ await Promise.all(
+ [...files]
+ .filter(([, contents]) => !contents)
+ .map(async ([pathname]) => {
+ const dest = path.resolve(appDirPath, pathname);
+ logger.info(`Deleting file ${dest}`);
+ await fs.remove(dest);
+ }),
+ );
+
  // Create individual files
  await Promise.all(
- [...files].map(async ([pathname, contents]) => {
- const dest = path.resolve(appDirPath, pathname);
- logger.info(`Copying file "${pathname}" -> ${dest}`);
- await fs.ensureFile(dest);
- await fs.writeFile(dest, contents);
- }),
+ [...files]
+ .filter(([, contents]) => contents)
+ .map(async ([pathname, contents]) => {
+ const dest = path.resolve(appDirPath, pathname);
+ logger.info(`Copying file "${pathname}" -> ${dest}`);
+ await fs.ensureFile(dest);
+ await fs.writeFile(dest, contents);
+ }),
  );
 
  // Adjust package.json dependencies

integration/tests/middleware-placement.test.ts

@@ -0,0 +1,99 @@
+import { expect, test } from '@playwright/test';
+
+import type { Application } from '../models/application';
+import { appConfigs } from '../presets';
+import { createTestUtils } from '../testUtils';
+
+const middlewareFileContents = `
+import { clerkMiddleware } from '@clerk/nextjs/server';
+export default clerkMiddleware();
+
+export const config = {
+ matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
+};
+`;
+
+const commonSetup = appConfigs.next.appRouterQuickstart.clone().removeFile('src/middleware.ts');
+
+test.describe('next start - missing middleware @quickstart', () => {
+ test.describe.configure({ mode: 'parallel' });
+ let app: Application;
+
+ test.beforeAll(async () => {
+ app = await commonSetup.commit();
+ await app.setup();
+ await app.withEnv(appConfigs.envs.withEmailCodesQuickstart);
+ await app.build();
+ await app.serve();
+ });
+
+ test.afterAll(async () => {
+ await app.teardown();
+ });
+
+ test('Display error for missing middleware', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goToAppHome();
+
+ expect(app.serveOutput).toContain('Your Middleware exists at ./src/middleware.(ts|js)');
+ });
+});
+
+test.describe('next start - invalid middleware at root on src/ @quickstart', () => {
+ test.describe.configure({ mode: 'parallel' });
+ let app: Application;
+
+ test.beforeAll(async () => {
+ app = await commonSetup.addFile('middleware.ts', () => middlewareFileContents).commit();
+ await app.setup();
+ await app.withEnv(appConfigs.envs.withEmailCodesQuickstart);
+ await app.build();
+ await app.serve();
+ });
+
+ test.afterAll(async () => {
+ await app.teardown();
+ });
+
+ test('Display suggestion for moving middleware to from `./middleware.ts` to `./src/middleware.ts`', async ({
+ page,
+ context,
+ }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goToAppHome();
+
+ expect(app.serveOutput).not.toContain('Your Middleware exists at ./src/middleware.(ts|js)');
+ expect(app.serveOutput).toContain(
+ 'Clerk: clerkMiddleware() was not run, your middleware file might be misplaced. Move your middleware file to ./src/middleware.ts. Currently located at ./middleware.ts',
+ );
+ });
+});
+
+test.describe('next start - invalid middleware inside app on src/ @quickstart', () => {
+ test.describe.configure({ mode: 'parallel' });
+ let app: Application;
+
+ test.beforeAll(async () => {
+ app = await commonSetup.addFile('src/app/middleware.ts', () => middlewareFileContents).commit();
+ await app.setup();
+ await app.withEnv(appConfigs.envs.withEmailCodesQuickstart);
+ await app.build();
+ await app.serve();
+ });
+
+ test.afterAll(async () => {
+ await app.teardown();
+ });
+
+ test('Display suggestion for moving middleware to from `./src/app/middleware.ts` to `./src/middleware.ts`', async ({
+ page,
+ context,
+ }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goToAppHome();
+ expect(app.serveOutput).not.toContain('Your Middleware exists at ./src/middleware.(ts|js)');
+ expect(app.serveOutput).toContain(
+ 'Clerk: clerkMiddleware() was not run, your middleware file might be misplaced. Move your middleware file to ./src/middleware.ts. Currently located at ./src/app/middleware.ts',
+ );
+ });
+});

.changeset/selfish-news-invent.md

@@ -0,0 +1,2 @@
+---
+---

integration/models/application.ts

@@ -20,6 +20,7 @@ export const application = (
  const stdoutFilePath = path.resolve(appDirPath, `e2e.${now}.log`);
  const stderrFilePath = path.resolve(appDirPath, `e2e.${now}.err.log`);
  let buildOutput = '';
+ let serveOutput = '';
 
  const self = {
  name,
@@ -93,7 +94,11 @@ export const application = (
  get buildOutput() {
  return buildOutput;
  },
+ get serveOutput() {
+ return serveOutput;
+ },
  serve: async (opts: { port?: number; manualStart?: boolean } = {}) => {
+ const log = logger.child({ prefix: 'serve' }).info;
  const port = opts.port || (await getPort());
  // TODO: get serverUrl as in dev()
  const serverUrl = `http://localhost:${port}`;
@@ -102,6 +107,10 @@ export const application = (
  const proc = run(scripts.serve, {
  cwd: appDirPath,
  env: { PORT: port.toString() },
+ log: (msg: string) => {
+ serveOutput += `\n${msg}`;
+ log(msg);
+ },
  });
  cleanupFns.push(() => awaitableTreekill(proc.pid, 'SIGKILL'));
  await waitForIdleProcess(proc);

integration/models/applicationConfig.ts

@@ -13,7 +13,7 @@ type Scripts = { dev: string; build: string; setup: string; serve: string };
 export const applicationConfig = () => {
  let name = '';
  let serverUrl = '';
-const templates: string[] = [];
+let template: string;
  const files = new Map<string, string>();
  const scripts: Scripts = { dev: 'pnpm dev', serve: 'pnpm serve', build: 'pnpm build', setup: 'pnpm install' };
  const envFormatters = { public: (key: string) => key, private: (key: string) => key };
@@ -26,7 +26,9 @@ export const applicationConfig = () => {
  clone.setName(name);
  clone.setEnvFormatter('public', envFormatters.public);
  clone.setEnvFormatter('private', envFormatters.private);
- templates.forEach(t => clone.useTemplate(t));
+ if (template) {
+ clone.useTemplate(template);
+ }
  dependencies.forEach((v, k) => clone.addDependency(k, v));
  Object.entries(scripts).forEach(([k, v]) => clone.addScript(k as keyof typeof scripts, v));
  files.forEach((v, k) => clone.addFile(k, () => v));
@@ -44,8 +46,12 @@ export const applicationConfig = () => {
  files.set(filePath, cbOrPath(helpers));
  return self;
  },
+ removeFile: (filePath: string) => {
+ files.set(filePath, '');
+ return self;
+ },
  useTemplate: (path: string) => {
-templates.push(path);
+template = path;
  return self;
  },
  setEnvFormatter: (type: keyof typeof envFormatters, formatter: typeof envFormatters.public) => {
@@ -76,20 +82,32 @@ export const applicationConfig = () => {
  const appDirPath = path.resolve(constants.TMP_DIR, appDirName);
 
  // Copy template files
-for (const template of templates) {
+if (template) {
  logger.info(`Copying template "${path.basename(template)}" -> ${appDirPath}`);
  await fs.ensureDir(appDirPath);
  await fs.copy(template, appDirPath, { overwrite: true, filter: (p: string) => !p.includes('node_modules') });
  }
 
+ await Promise.all(
+ [...files]
+ .filter(([, contents]) => !contents)
+ .map(async ([pathname]) => {
+ const dest = path.resolve(appDirPath, pathname);
+ logger.info(`Deleting file ${dest}`);
+ await fs.remove(dest);
+ }),
+ );
+
  // Create individual files
  await Promise.all(
- [...files].map(async ([pathname, contents]) => {
- const dest = path.resolve(appDirPath, pathname);
- logger.info(`Copying file "${pathname}" -> ${dest}`);
- await fs.ensureFile(dest);
- await fs.writeFile(dest, contents);
- }),
+ [...files]
+ .filter(([, contents]) => contents)
+ .map(async ([pathname, contents]) => {
+ const dest = path.resolve(appDirPath, pathname);
+ logger.info(`Copying file "${pathname}" -> ${dest}`);
+ await fs.ensureFile(dest);
+ await fs.writeFile(dest, contents);
+ }),
  );
 
  // Adjust package.json dependencies

integration/tests/middleware-placement.test.ts

@@ -0,0 +1,99 @@
+import { expect, test } from '@playwright/test';
+
+import type { Application } from '../models/application';
+import { appConfigs } from '../presets';
+import { createTestUtils } from '../testUtils';
+
+const middlewareFileContents = `
+import { clerkMiddleware } from '@clerk/nextjs/server';
+export default clerkMiddleware();
+
+export const config = {
+ matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
+};
+`;
+
+const commonSetup = appConfigs.next.appRouterQuickstart.clone().removeFile('src/middleware.ts');
+
+test.describe('next start - missing middleware @quickstart', () => {
+ test.describe.configure({ mode: 'parallel' });
+ let app: Application;
+
+ test.beforeAll(async () => {
+ app = await commonSetup.commit();
+ await app.setup();
+ await app.withEnv(appConfigs.envs.withEmailCodesQuickstart);
+ await app.build();
+ await app.serve();
+ });
+
+ test.afterAll(async () => {
+ await app.teardown();
+ });
+
+ test('Display error for missing middleware', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goToAppHome();
+
+ expect(app.serveOutput).toContain('Your Middleware exists at ./src/middleware.(ts|js)');
+ });
+});
+
+test.describe('next start - invalid middleware at root on src/ @quickstart', () => {
+ test.describe.configure({ mode: 'parallel' });
+ let app: Application;
+
+ test.beforeAll(async () => {
+ app = await commonSetup.addFile('middleware.ts', () => middlewareFileContents).commit();
+ await app.setup();
+ await app.withEnv(appConfigs.envs.withEmailCodesQuickstart);
+ await app.build();
+ await app.serve();
+ });
+
+ test.afterAll(async () => {
+ await app.teardown();
+ });
+
+ test('Display suggestion for moving middleware to from `./middleware.ts` to `./src/middleware.ts`', async ({
+ page,
+ context,
+ }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goToAppHome();
+
+ expect(app.serveOutput).not.toContain('Your Middleware exists at ./src/middleware.(ts|js)');
+ expect(app.serveOutput).toContain(
+ 'Clerk: clerkMiddleware() was not run, your middleware file might be misplaced. Move your middleware file to ./src/middleware.ts. Currently located at ./middleware.ts',
+ );
+ });
+});
+
+test.describe('next start - invalid middleware inside app on src/ @quickstart', () => {
+ test.describe.configure({ mode: 'parallel' });
+ let app: Application;
+
+ test.beforeAll(async () => {
+ app = await commonSetup.addFile('src/app/middleware.ts', () => middlewareFileContents).commit();
+ await app.setup();
+ await app.withEnv(appConfigs.envs.withEmailCodesQuickstart);
+ await app.build();
+ await app.serve();
+ });
+
+ test.afterAll(async () => {
+ await app.teardown();
+ });
+
+ test('Display suggestion for moving middleware to from `./src/app/middleware.ts` to `./src/middleware.ts`', async ({
+ page,
+ context,
+ }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goToAppHome();
+ expect(app.serveOutput).not.toContain('Your Middleware exists at ./src/middleware.(ts|js)');
+ expect(app.serveOutput).toContain(
+ 'Clerk: clerkMiddleware() was not run, your middleware file might be misplaced. Move your middleware file to ./src/middleware.ts. Currently located at ./src/app/middleware.ts',
+ );
+ });
+});

.changeset/selfish-news-invent.md

@@ -0,0 +1,2 @@
+---
+---

integration/models/application.ts

@@ -20,6 +20,7 @@ export const application = (
  const stdoutFilePath = path.resolve(appDirPath, `e2e.${now}.log`);
  const stderrFilePath = path.resolve(appDirPath, `e2e.${now}.err.log`);
  let buildOutput = '';
+ let serveOutput = '';
 
  const self = {
  name,
@@ -93,7 +94,11 @@ export const application = (
  get buildOutput() {
  return buildOutput;
  },
+ get serveOutput() {
+ return serveOutput;
+ },
  serve: async (opts: { port?: number; manualStart?: boolean } = {}) => {
+ const log = logger.child({ prefix: 'serve' }).info;
  const port = opts.port || (await getPort());
  // TODO: get serverUrl as in dev()
  const serverUrl = `http://localhost:${port}`;
@@ -102,6 +107,10 @@ export const application = (
  const proc = run(scripts.serve, {
  cwd: appDirPath,
  env: { PORT: port.toString() },
+ log: (msg: string) => {
+ serveOutput += `\n${msg}`;
+ log(msg);
+ },
  });
  cleanupFns.push(() => awaitableTreekill(proc.pid, 'SIGKILL'));
  await waitForIdleProcess(proc);

integration/models/applicationConfig.ts

@@ -13,7 +13,7 @@ type Scripts = { dev: string; build: string; setup: string; serve: string };
 export const applicationConfig = () => {
  let name = '';
  let serverUrl = '';
-const templates: string[] = [];
+let template: string;
  const files = new Map<string, string>();
  const scripts: Scripts = { dev: 'pnpm dev', serve: 'pnpm serve', build: 'pnpm build', setup: 'pnpm install' };
  const envFormatters = { public: (key: string) => key, private: (key: string) => key };
@@ -26,7 +26,9 @@ export const applicationConfig = () => {
  clone.setName(name);
  clone.setEnvFormatter('public', envFormatters.public);
  clone.setEnvFormatter('private', envFormatters.private);
- templates.forEach(t => clone.useTemplate(t));
+ if (template) {
+ clone.useTemplate(template);
+ }
  dependencies.forEach((v, k) => clone.addDependency(k, v));
  Object.entries(scripts).forEach(([k, v]) => clone.addScript(k as keyof typeof scripts, v));
  files.forEach((v, k) => clone.addFile(k, () => v));
@@ -44,8 +46,12 @@ export const applicationConfig = () => {
  files.set(filePath, cbOrPath(helpers));
  return self;
  },
+ removeFile: (filePath: string) => {
+ files.set(filePath, '');
+ return self;
+ },
  useTemplate: (path: string) => {
-templates.push(path);
+template = path;
  return self;
  },
  setEnvFormatter: (type: keyof typeof envFormatters, formatter: typeof envFormatters.public) => {
@@ -76,20 +82,32 @@ export const applicationConfig = () => {
  const appDirPath = path.resolve(constants.TMP_DIR, appDirName);
 
  // Copy template files
-for (const template of templates) {
+if (template) {
  logger.info(`Copying template "${path.basename(template)}" -> ${appDirPath}`);
  await fs.ensureDir(appDirPath);
  await fs.copy(template, appDirPath, { overwrite: true, filter: (p: string) => !p.includes('node_modules') });
  }
 
+ await Promise.all(
+ [...files]
+ .filter(([, contents]) => !contents)
+ .map(async ([pathname]) => {
+ const dest = path.resolve(appDirPath, pathname);
+ logger.info(`Deleting file ${dest}`);
+ await fs.remove(dest);
+ }),
+ );
+
  // Create individual files
  await Promise.all(
- [...files].map(async ([pathname, contents]) => {
- const dest = path.resolve(appDirPath, pathname);
- logger.info(`Copying file "${pathname}" -> ${dest}`);
- await fs.ensureFile(dest);
- await fs.writeFile(dest, contents);
- }),
+ [...files]
+ .filter(([, contents]) => contents)
+ .map(async ([pathname, contents]) => {
+ const dest = path.resolve(appDirPath, pathname);
+ logger.info(`Copying file "${pathname}" -> ${dest}`);
+ await fs.ensureFile(dest);
+ await fs.writeFile(dest, contents);
+ }),
  );
 
  // Adjust package.json dependencies

integration/tests/middleware-placement.test.ts

@@ -0,0 +1,99 @@
+import { expect, test } from '@playwright/test';
+
+import type { Application } from '../models/application';
+import { appConfigs } from '../presets';
+import { createTestUtils } from '../testUtils';
+
+const middlewareFileContents = `
+import { clerkMiddleware } from '@clerk/nextjs/server';
+export default clerkMiddleware();
+
+export const config = {
+ matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
+};
+`;
+
+const commonSetup = appConfigs.next.appRouterQuickstart.clone().removeFile('src/middleware.ts');
+
+test.describe('next start - missing middleware @quickstart', () => {
+ test.describe.configure({ mode: 'parallel' });
+ let app: Application;
+
+ test.beforeAll(async () => {
+ app = await commonSetup.commit();
+ await app.setup();
+ await app.withEnv(appConfigs.envs.withEmailCodesQuickstart);
+ await app.build();
+ await app.serve();
+ });
+
+ test.afterAll(async () => {
+ await app.teardown();
+ });
+
+ test('Display error for missing middleware', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goToAppHome();
+
+ expect(app.serveOutput).toContain('Your Middleware exists at ./src/middleware.(ts|js)');
+ });
+});
+
+test.describe('next start - invalid middleware at root on src/ @quickstart', () => {
+ test.describe.configure({ mode: 'parallel' });
+ let app: Application;
+
+ test.beforeAll(async () => {
+ app = await commonSetup.addFile('middleware.ts', () => middlewareFileContents).commit();
+ await app.setup();
+ await app.withEnv(appConfigs.envs.withEmailCodesQuickstart);
+ await app.build();
+ await app.serve();
+ });
+
+ test.afterAll(async () => {
+ await app.teardown();
+ });
+
+ test('Display suggestion for moving middleware to from `./middleware.ts` to `./src/middleware.ts`', async ({
+ page,
+ context,
+ }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goToAppHome();
+
+ expect(app.serveOutput).not.toContain('Your Middleware exists at ./src/middleware.(ts|js)');
+ expect(app.serveOutput).toContain(
+ 'Clerk: clerkMiddleware() was not run, your middleware file might be misplaced. Move your middleware file to ./src/middleware.ts. Currently located at ./middleware.ts',
+ );
+ });
+});
+
+test.describe('next start - invalid middleware inside app on src/ @quickstart', () => {
+ test.describe.configure({ mode: 'parallel' });
+ let app: Application;
+
+ test.beforeAll(async () => {
+ app = await commonSetup.addFile('src/app/middleware.ts', () => middlewareFileContents).commit();
+ await app.setup();
+ await app.withEnv(appConfigs.envs.withEmailCodesQuickstart);
+ await app.build();
+ await app.serve();
+ });
+
+ test.afterAll(async () => {
+ await app.teardown();
+ });
+
+ test('Display suggestion for moving middleware to from `./src/app/middleware.ts` to `./src/middleware.ts`', async ({
+ page,
+ context,
+ }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goToAppHome();
+ expect(app.serveOutput).not.toContain('Your Middleware exists at ./src/middleware.(ts|js)');
+ expect(app.serveOutput).toContain(
+ 'Clerk: clerkMiddleware() was not run, your middleware file might be misplaced. Move your middleware file to ./src/middleware.ts. Currently located at ./src/app/middleware.ts',
+ );
+ });
+});

.changeset/selfish-news-invent.md

@@ -0,0 +1,2 @@
+---
+---

integration/models/application.ts

@@ -20,6 +20,7 @@ export const application = (
  const stdoutFilePath = path.resolve(appDirPath, `e2e.${now}.log`);
  const stderrFilePath = path.resolve(appDirPath, `e2e.${now}.err.log`);
  let buildOutput = '';
+ let serveOutput = '';
 
  const self = {
  name,
@@ -93,7 +94,11 @@ export const application = (
  get buildOutput() {
  return buildOutput;
  },
+ get serveOutput() {
+ return serveOutput;
+ },
  serve: async (opts: { port?: number; manualStart?: boolean } = {}) => {
+ const log = logger.child({ prefix: 'serve' }).info;
  const port = opts.port || (await getPort());
  // TODO: get serverUrl as in dev()
  const serverUrl = `http://localhost:${port}`;
@@ -102,6 +107,10 @@ export const application = (
  const proc = run(scripts.serve, {
  cwd: appDirPath,
  env: { PORT: port.toString() },
+ log: (msg: string) => {
+ serveOutput += `\n${msg}`;
+ log(msg);
+ },
  });
  cleanupFns.push(() => awaitableTreekill(proc.pid, 'SIGKILL'));
  await waitForIdleProcess(proc);

integration/models/applicationConfig.ts

@@ -13,7 +13,7 @@ type Scripts = { dev: string; build: string; setup: string; serve: string };
 export const applicationConfig = () => {
  let name = '';
  let serverUrl = '';
-const templates: string[] = [];
+let template: string;
  const files = new Map<string, string>();
  const scripts: Scripts = { dev: 'pnpm dev', serve: 'pnpm serve', build: 'pnpm build', setup: 'pnpm install' };
  const envFormatters = { public: (key: string) => key, private: (key: string) => key };
@@ -26,7 +26,9 @@ export const applicationConfig = () => {
  clone.setName(name);
  clone.setEnvFormatter('public', envFormatters.public);
  clone.setEnvFormatter('private', envFormatters.private);
- templates.forEach(t => clone.useTemplate(t));
+ if (template) {
+ clone.useTemplate(template);
+ }
  dependencies.forEach((v, k) => clone.addDependency(k, v));
  Object.entries(scripts).forEach(([k, v]) => clone.addScript(k as keyof typeof scripts, v));
  files.forEach((v, k) => clone.addFile(k, () => v));
@@ -44,8 +46,12 @@ export const applicationConfig = () => {
  files.set(filePath, cbOrPath(helpers));
  return self;
  },
+ removeFile: (filePath: string) => {
+ files.set(filePath, '');
+ return self;
+ },
  useTemplate: (path: string) => {
-templates.push(path);
+template = path;
  return self;
  },
  setEnvFormatter: (type: keyof typeof envFormatters, formatter: typeof envFormatters.public) => {
@@ -76,20 +82,32 @@ export const applicationConfig = () => {
  const appDirPath = path.resolve(constants.TMP_DIR, appDirName);
 
  // Copy template files
-for (const template of templates) {
+if (template) {
  logger.info(`Copying template "${path.basename(template)}" -> ${appDirPath}`);
  await fs.ensureDir(appDirPath);
  await fs.copy(template, appDirPath, { overwrite: true, filter: (p: string) => !p.includes('node_modules') });
  }
 
+ await Promise.all(
+ [...files]
+ .filter(([, contents]) => !contents)
+ .map(async ([pathname]) => {
+ const dest = path.resolve(appDirPath, pathname);
+ logger.info(`Deleting file ${dest}`);
+ await fs.remove(dest);
+ }),
+ );
+
  // Create individual files
  await Promise.all(
- [...files].map(async ([pathname, contents]) => {
- const dest = path.resolve(appDirPath, pathname);
- logger.info(`Copying file "${pathname}" -> ${dest}`);
- await fs.ensureFile(dest);
- await fs.writeFile(dest, contents);
- }),
+ [...files]
+ .filter(([, contents]) => contents)
+ .map(async ([pathname, contents]) => {
+ const dest = path.resolve(appDirPath, pathname);
+ logger.info(`Copying file "${pathname}" -> ${dest}`);
+ await fs.ensureFile(dest);
+ await fs.writeFile(dest, contents);
+ }),
  );
 
  // Adjust package.json dependencies

integration/tests/middleware-placement.test.ts

@@ -0,0 +1,99 @@
+import { expect, test } from '@playwright/test';
+
+import type { Application } from '../models/application';
+import { appConfigs } from '../presets';
+import { createTestUtils } from '../testUtils';
+
+const middlewareFileContents = `
+import { clerkMiddleware } from '@clerk/nextjs/server';
+export default clerkMiddleware();
+
+export const config = {
+ matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
+};
+`;
+
+const commonSetup = appConfigs.next.appRouterQuickstart.clone().removeFile('src/middleware.ts');
+
+test.describe('next start - missing middleware @quickstart', () => {
+ test.describe.configure({ mode: 'parallel' });
+ let app: Application;
+
+ test.beforeAll(async () => {
+ app = await commonSetup.commit();
+ await app.setup();
+ await app.withEnv(appConfigs.envs.withEmailCodesQuickstart);
+ await app.build();
+ await app.serve();
+ });
+
+ test.afterAll(async () => {
+ await app.teardown();
+ });
+
+ test('Display error for missing middleware', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goToAppHome();
+
+ expect(app.serveOutput).toContain('Your Middleware exists at ./src/middleware.(ts|js)');
+ });
+});
+
+test.describe('next start - invalid middleware at root on src/ @quickstart', () => {
+ test.describe.configure({ mode: 'parallel' });
+ let app: Application;
+
+ test.beforeAll(async () => {
+ app = await commonSetup.addFile('middleware.ts', () => middlewareFileContents).commit();
+ await app.setup();
+ await app.withEnv(appConfigs.envs.withEmailCodesQuickstart);
+ await app.build();
+ await app.serve();
+ });
+
+ test.afterAll(async () => {
+ await app.teardown();
+ });
+
+ test('Display suggestion for moving middleware to from `./middleware.ts` to `./src/middleware.ts`', async ({
+ page,
+ context,
+ }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goToAppHome();
+
+ expect(app.serveOutput).not.toContain('Your Middleware exists at ./src/middleware.(ts|js)');
+ expect(app.serveOutput).toContain(
+ 'Clerk: clerkMiddleware() was not run, your middleware file might be misplaced. Move your middleware file to ./src/middleware.ts. Currently located at ./middleware.ts',
+ );
+ });
+});
+
+test.describe('next start - invalid middleware inside app on src/ @quickstart', () => {
+ test.describe.configure({ mode: 'parallel' });
+ let app: Application;
+
+ test.beforeAll(async () => {
+ app = await commonSetup.addFile('src/app/middleware.ts', () => middlewareFileContents).commit();
+ await app.setup();
+ await app.withEnv(appConfigs.envs.withEmailCodesQuickstart);
+ await app.build();
+ await app.serve();
+ });
+
+ test.afterAll(async () => {
+ await app.teardown();
+ });
+
+ test('Display suggestion for moving middleware to from `./src/app/middleware.ts` to `./src/middleware.ts`', async ({
+ page,
+ context,
+ }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goToAppHome();
+ expect(app.serveOutput).not.toContain('Your Middleware exists at ./src/middleware.(ts|js)');
+ expect(app.serveOutput).toContain(
+ 'Clerk: clerkMiddleware() was not run, your middleware file might be misplaced. Move your middleware file to ./src/middleware.ts. Currently located at ./src/app/middleware.ts',
+ );
+ });
+});

.changeset/selfish-news-invent.md

@@ -0,0 +1,2 @@
+---
+---

integration/models/application.ts

@@ -20,6 +20,7 @@ export const application = (
  const stdoutFilePath = path.resolve(appDirPath, `e2e.${now}.log`);
  const stderrFilePath = path.resolve(appDirPath, `e2e.${now}.err.log`);
  let buildOutput = '';
+ let serveOutput = '';
 
  const self = {
  name,
@@ -93,7 +94,11 @@ export const application = (
  get buildOutput() {
  return buildOutput;
  },
+ get serveOutput() {
+ return serveOutput;
+ },
  serve: async (opts: { port?: number; manualStart?: boolean } = {}) => {
+ const log = logger.child({ prefix: 'serve' }).info;
  const port = opts.port || (await getPort());
  // TODO: get serverUrl as in dev()
  const serverUrl = `http://localhost:${port}`;
@@ -102,6 +107,10 @@ export const application = (
  const proc = run(scripts.serve, {
  cwd: appDirPath,
  env: { PORT: port.toString() },
+ log: (msg: string) => {
+ serveOutput += `\n${msg}`;
+ log(msg);
+ },
  });
  cleanupFns.push(() => awaitableTreekill(proc.pid, 'SIGKILL'));
  await waitForIdleProcess(proc);

integration/models/applicationConfig.ts

@@ -13,7 +13,7 @@ type Scripts = { dev: string; build: string; setup: string; serve: string };
 export const applicationConfig = () => {
  let name = '';
  let serverUrl = '';
-const templates: string[] = [];
+let template: string;
  const files = new Map<string, string>();
  const scripts: Scripts = { dev: 'pnpm dev', serve: 'pnpm serve', build: 'pnpm build', setup: 'pnpm install' };
  const envFormatters = { public: (key: string) => key, private: (key: string) => key };
@@ -26,7 +26,9 @@ export const applicationConfig = () => {
  clone.setName(name);
  clone.setEnvFormatter('public', envFormatters.public);
  clone.setEnvFormatter('private', envFormatters.private);
- templates.forEach(t => clone.useTemplate(t));
+ if (template) {
+ clone.useTemplate(template);
+ }
  dependencies.forEach((v, k) => clone.addDependency(k, v));
  Object.entries(scripts).forEach(([k, v]) => clone.addScript(k as keyof typeof scripts, v));
  files.forEach((v, k) => clone.addFile(k, () => v));
@@ -44,8 +46,12 @@ export const applicationConfig = () => {
  files.set(filePath, cbOrPath(helpers));
  return self;
  },
+ removeFile: (filePath: string) => {
+ files.set(filePath, '');
+ return self;
+ },
  useTemplate: (path: string) => {
-templates.push(path);
+template = path;
  return self;
  },
  setEnvFormatter: (type: keyof typeof envFormatters, formatter: typeof envFormatters.public) => {
@@ -76,20 +82,32 @@ export const applicationConfig = () => {
  const appDirPath = path.resolve(constants.TMP_DIR, appDirName);
 
  // Copy template files
-for (const template of templates) {
+if (template) {
  logger.info(`Copying template "${path.basename(template)}" -> ${appDirPath}`);
  await fs.ensureDir(appDirPath);
  await fs.copy(template, appDirPath, { overwrite: true, filter: (p: string) => !p.includes('node_modules') });
  }
 
+ await Promise.all(
+ [...files]
+ .filter(([, contents]) => !contents)
+ .map(async ([pathname]) => {
+ const dest = path.resolve(appDirPath, pathname);
+ logger.info(`Deleting file ${dest}`);
+ await fs.remove(dest);
+ }),
+ );
+
  // Create individual files
  await Promise.all(
- [...files].map(async ([pathname, contents]) => {
- const dest = path.resolve(appDirPath, pathname);
- logger.info(`Copying file "${pathname}" -> ${dest}`);
- await fs.ensureFile(dest);
- await fs.writeFile(dest, contents);
- }),
+ [...files]
+ .filter(([, contents]) => contents)
+ .map(async ([pathname, contents]) => {
+ const dest = path.resolve(appDirPath, pathname);
+ logger.info(`Copying file "${pathname}" -> ${dest}`);
+ await fs.ensureFile(dest);
+ await fs.writeFile(dest, contents);
+ }),
  );
 
  // Adjust package.json dependencies

integration/tests/middleware-placement.test.ts

@@ -0,0 +1,99 @@
+import { expect, test } from '@playwright/test';
+
+import type { Application } from '../models/application';
+import { appConfigs } from '../presets';
+import { createTestUtils } from '../testUtils';
+
+const middlewareFileContents = `
+import { clerkMiddleware } from '@clerk/nextjs/server';
+export default clerkMiddleware();
+
+export const config = {
+ matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
+};
+`;
+
+const commonSetup = appConfigs.next.appRouterQuickstart.clone().removeFile('src/middleware.ts');
+
+test.describe('next start - missing middleware @quickstart', () => {
+ test.describe.configure({ mode: 'parallel' });
+ let app: Application;
+
+ test.beforeAll(async () => {
+ app = await commonSetup.commit();
+ await app.setup();
+ await app.withEnv(appConfigs.envs.withEmailCodesQuickstart);
+ await app.build();
+ await app.serve();
+ });
+
+ test.afterAll(async () => {
+ await app.teardown();
+ });
+
+ test('Display error for missing middleware', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goToAppHome();
+
+ expect(app.serveOutput).toContain('Your Middleware exists at ./src/middleware.(ts|js)');
+ });
+});
+
+test.describe('next start - invalid middleware at root on src/ @quickstart', () => {
+ test.describe.configure({ mode: 'parallel' });
+ let app: Application;
+
+ test.beforeAll(async () => {
+ app = await commonSetup.addFile('middleware.ts', () => middlewareFileContents).commit();
+ await app.setup();
+ await app.withEnv(appConfigs.envs.withEmailCodesQuickstart);
+ await app.build();
+ await app.serve();
+ });
+
+ test.afterAll(async () => {
+ await app.teardown();
+ });
+
+ test('Display suggestion for moving middleware to from `./middleware.ts` to `./src/middleware.ts`', async ({
+ page,
+ context,
+ }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goToAppHome();
+
+ expect(app.serveOutput).not.toContain('Your Middleware exists at ./src/middleware.(ts|js)');
+ expect(app.serveOutput).toContain(
+ 'Clerk: clerkMiddleware() was not run, your middleware file might be misplaced. Move your middleware file to ./src/middleware.ts. Currently located at ./middleware.ts',
+ );
+ });
+});
+
+test.describe('next start - invalid middleware inside app on src/ @quickstart', () => {
+ test.describe.configure({ mode: 'parallel' });
+ let app: Application;
+
+ test.beforeAll(async () => {
+ app = await commonSetup.addFile('src/app/middleware.ts', () => middlewareFileContents).commit();
+ await app.setup();
+ await app.withEnv(appConfigs.envs.withEmailCodesQuickstart);
+ await app.build();
+ await app.serve();
+ });
+
+ test.afterAll(async () => {
+ await app.teardown();
+ });
+
+ test('Display suggestion for moving middleware to from `./src/app/middleware.ts` to `./src/middleware.ts`', async ({
+ page,
+ context,
+ }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goToAppHome();
+ expect(app.serveOutput).not.toContain('Your Middleware exists at ./src/middleware.(ts|js)');
+ expect(app.serveOutput).toContain(
+ 'Clerk: clerkMiddleware() was not run, your middleware file might be misplaced. Move your middleware file to ./src/middleware.ts. Currently located at ./src/app/middleware.ts',
+ );
+ });
+});

.changeset/selfish-news-invent.md

@@ -0,0 +1,2 @@
+---
+---

integration/models/application.ts

@@ -20,6 +20,7 @@ export const application = (
  const stdoutFilePath = path.resolve(appDirPath, `e2e.${now}.log`);
  const stderrFilePath = path.resolve(appDirPath, `e2e.${now}.err.log`);
  let buildOutput = '';
+ let serveOutput = '';
 
  const self = {
  name,
@@ -93,7 +94,11 @@ export const application = (
  get buildOutput() {
  return buildOutput;
  },
+ get serveOutput() {
+ return serveOutput;
+ },
  serve: async (opts: { port?: number; manualStart?: boolean } = {}) => {
+ const log = logger.child({ prefix: 'serve' }).info;
  const port = opts.port || (await getPort());
  // TODO: get serverUrl as in dev()
  const serverUrl = `http://localhost:${port}`;
@@ -102,6 +107,10 @@ export const application = (
  const proc = run(scripts.serve, {
  cwd: appDirPath,
  env: { PORT: port.toString() },
+ log: (msg: string) => {
+ serveOutput += `\n${msg}`;
+ log(msg);
+ },
  });
  cleanupFns.push(() => awaitableTreekill(proc.pid, 'SIGKILL'));
  await waitForIdleProcess(proc);

integration/models/applicationConfig.ts

@@ -13,7 +13,7 @@ type Scripts = { dev: string; build: string; setup: string; serve: string };
 export const applicationConfig = () => {
  let name = '';
  let serverUrl = '';
-const templates: string[] = [];
+let template: string;
  const files = new Map<string, string>();
  const scripts: Scripts = { dev: 'pnpm dev', serve: 'pnpm serve', build: 'pnpm build', setup: 'pnpm install' };
  const envFormatters = { public: (key: string) => key, private: (key: string) => key };
@@ -26,7 +26,9 @@ export const applicationConfig = () => {
  clone.setName(name);
  clone.setEnvFormatter('public', envFormatters.public);
  clone.setEnvFormatter('private', envFormatters.private);
- templates.forEach(t => clone.useTemplate(t));
+ if (template) {
+ clone.useTemplate(template);
+ }
  dependencies.forEach((v, k) => clone.addDependency(k, v));
  Object.entries(scripts).forEach(([k, v]) => clone.addScript(k as keyof typeof scripts, v));
  files.forEach((v, k) => clone.addFile(k, () => v));
@@ -44,8 +46,12 @@ export const applicationConfig = () => {
  files.set(filePath, cbOrPath(helpers));
  return self;
  },
+ removeFile: (filePath: string) => {
+ files.set(filePath, '');
+ return self;
+ },
  useTemplate: (path: string) => {
-templates.push(path);
+template = path;
  return self;
  },
  setEnvFormatter: (type: keyof typeof envFormatters, formatter: typeof envFormatters.public) => {
@@ -76,20 +82,32 @@ export const applicationConfig = () => {
  const appDirPath = path.resolve(constants.TMP_DIR, appDirName);
 
  // Copy template files
-for (const template of templates) {
+if (template) {
  logger.info(`Copying template "${path.basename(template)}" -> ${appDirPath}`);
  await fs.ensureDir(appDirPath);
  await fs.copy(template, appDirPath, { overwrite: true, filter: (p: string) => !p.includes('node_modules') });
  }
 
+ await Promise.all(
+ [...files]
+ .filter(([, contents]) => !contents)
+ .map(async ([pathname]) => {
+ const dest = path.resolve(appDirPath, pathname);
+ logger.info(`Deleting file ${dest}`);
+ await fs.remove(dest);
+ }),
+ );
+
  // Create individual files
  await Promise.all(
- [...files].map(async ([pathname, contents]) => {
- const dest = path.resolve(appDirPath, pathname);
- logger.info(`Copying file "${pathname}" -> ${dest}`);
- await fs.ensureFile(dest);
- await fs.writeFile(dest, contents);
- }),
+ [...files]
+ .filter(([, contents]) => contents)
+ .map(async ([pathname, contents]) => {
+ const dest = path.resolve(appDirPath, pathname);
+ logger.info(`Copying file "${pathname}" -> ${dest}`);
+ await fs.ensureFile(dest);
+ await fs.writeFile(dest, contents);
+ }),
  );
 
  // Adjust package.json dependencies

integration/tests/middleware-placement.test.ts

@@ -0,0 +1,99 @@
+import { expect, test } from '@playwright/test';
+
+import type { Application } from '../models/application';
+import { appConfigs } from '../presets';
+import { createTestUtils } from '../testUtils';
+
+const middlewareFileContents = `
+import { clerkMiddleware } from '@clerk/nextjs/server';
+export default clerkMiddleware();
+
+export const config = {
+ matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
+};
+`;
+
+const commonSetup = appConfigs.next.appRouterQuickstart.clone().removeFile('src/middleware.ts');
+
+test.describe('next start - missing middleware @quickstart', () => {
+ test.describe.configure({ mode: 'parallel' });
+ let app: Application;
+
+ test.beforeAll(async () => {
+ app = await commonSetup.commit();
+ await app.setup();
+ await app.withEnv(appConfigs.envs.withEmailCodesQuickstart);
+ await app.build();
+ await app.serve();
+ });
+
+ test.afterAll(async () => {
+ await app.teardown();
+ });
+
+ test('Display error for missing middleware', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goToAppHome();
+
+ expect(app.serveOutput).toContain('Your Middleware exists at ./src/middleware.(ts|js)');
+ });
+});
+
+test.describe('next start - invalid middleware at root on src/ @quickstart', () => {
+ test.describe.configure({ mode: 'parallel' });
+ let app: Application;
+
+ test.beforeAll(async () => {
+ app = await commonSetup.addFile('middleware.ts', () => middlewareFileContents).commit();
+ await app.setup();
+ await app.withEnv(appConfigs.envs.withEmailCodesQuickstart);
+ await app.build();
+ await app.serve();
+ });
+
+ test.afterAll(async () => {
+ await app.teardown();
+ });
+
+ test('Display suggestion for moving middleware to from `./middleware.ts` to `./src/middleware.ts`', async ({
+ page,
+ context,
+ }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goToAppHome();
+
+ expect(app.serveOutput).not.toContain('Your Middleware exists at ./src/middleware.(ts|js)');
+ expect(app.serveOutput).toContain(
+ 'Clerk: clerkMiddleware() was not run, your middleware file might be misplaced. Move your middleware file to ./src/middleware.ts. Currently located at ./middleware.ts',
+ );
+ });
+});
+
+test.describe('next start - invalid middleware inside app on src/ @quickstart', () => {
+ test.describe.configure({ mode: 'parallel' });
+ let app: Application;
+
+ test.beforeAll(async () => {
+ app = await commonSetup.addFile('src/app/middleware.ts', () => middlewareFileContents).commit();
+ await app.setup();
+ await app.withEnv(appConfigs.envs.withEmailCodesQuickstart);
+ await app.build();
+ await app.serve();
+ });
+
+ test.afterAll(async () => {
+ await app.teardown();
+ });
+
+ test('Display suggestion for moving middleware to from `./src/app/middleware.ts` to `./src/middleware.ts`', async ({
+ page,
+ context,
+ }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goToAppHome();
+ expect(app.serveOutput).not.toContain('Your Middleware exists at ./src/middleware.(ts|js)');
+ expect(app.serveOutput).toContain(
+ 'Clerk: clerkMiddleware() was not run, your middleware file might be misplaced. Move your middleware file to ./src/middleware.ts. Currently located at ./src/app/middleware.ts',
+ );
+ });
+});

.changeset/selfish-news-invent.md

@@ -0,0 +1,2 @@
+---
+---

integration/models/application.ts

@@ -20,6 +20,7 @@ export const application = (
  const stdoutFilePath = path.resolve(appDirPath, `e2e.${now}.log`);
  const stderrFilePath = path.resolve(appDirPath, `e2e.${now}.err.log`);
  let buildOutput = '';
+ let serveOutput = '';
 
  const self = {
  name,
@@ -93,7 +94,11 @@ export const application = (
  get buildOutput() {
  return buildOutput;
  },
+ get serveOutput() {
+ return serveOutput;
+ },
  serve: async (opts: { port?: number; manualStart?: boolean } = {}) => {
+ const log = logger.child({ prefix: 'serve' }).info;
  const port = opts.port || (await getPort());
  // TODO: get serverUrl as in dev()
  const serverUrl = `http://localhost:${port}`;
@@ -102,6 +107,10 @@ export const application = (
  const proc = run(scripts.serve, {
  cwd: appDirPath,
  env: { PORT: port.toString() },
+ log: (msg: string) => {
+ serveOutput += `\n${msg}`;
+ log(msg);
+ },
  });
  cleanupFns.push(() => awaitableTreekill(proc.pid, 'SIGKILL'));
  await waitForIdleProcess(proc);

integration/models/applicationConfig.ts

@@ -13,7 +13,7 @@ type Scripts = { dev: string; build: string; setup: string; serve: string };
 export const applicationConfig = () => {
  let name = '';
  let serverUrl = '';
-const templates: string[] = [];
+let template: string;
  const files = new Map<string, string>();
  const scripts: Scripts = { dev: 'pnpm dev', serve: 'pnpm serve', build: 'pnpm build', setup: 'pnpm install' };
  const envFormatters = { public: (key: string) => key, private: (key: string) => key };
@@ -26,7 +26,9 @@ export const applicationConfig = () => {
  clone.setName(name);
  clone.setEnvFormatter('public', envFormatters.public);
  clone.setEnvFormatter('private', envFormatters.private);
- templates.forEach(t => clone.useTemplate(t));
+ if (template) {
+ clone.useTemplate(template);
+ }
  dependencies.forEach((v, k) => clone.addDependency(k, v));
  Object.entries(scripts).forEach(([k, v]) => clone.addScript(k as keyof typeof scripts, v));
  files.forEach((v, k) => clone.addFile(k, () => v));
@@ -44,8 +46,12 @@ export const applicationConfig = () => {
  files.set(filePath, cbOrPath(helpers));
  return self;
  },
+ removeFile: (filePath: string) => {
+ files.set(filePath, '');
+ return self;
+ },
  useTemplate: (path: string) => {
-templates.push(path);
+template = path;
  return self;
  },
  setEnvFormatter: (type: keyof typeof envFormatters, formatter: typeof envFormatters.public) => {
@@ -76,20 +82,32 @@ export const applicationConfig = () => {
  const appDirPath = path.resolve(constants.TMP_DIR, appDirName);
 
  // Copy template files
-for (const template of templates) {
+if (template) {
  logger.info(`Copying template "${path.basename(template)}" -> ${appDirPath}`);
  await fs.ensureDir(appDirPath);
  await fs.copy(template, appDirPath, { overwrite: true, filter: (p: string) => !p.includes('node_modules') });
  }
 
+ await Promise.all(
+ [...files]
+ .filter(([, contents]) => !contents)
+ .map(async ([pathname]) => {
+ const dest = path.resolve(appDirPath, pathname);
+ logger.info(`Deleting file ${dest}`);
+ await fs.remove(dest);
+ }),
+ );
+
  // Create individual files
  await Promise.all(
- [...files].map(async ([pathname, contents]) => {
- const dest = path.resolve(appDirPath, pathname);
- logger.info(`Copying file "${pathname}" -> ${dest}`);
- await fs.ensureFile(dest);
- await fs.writeFile(dest, contents);
- }),
+ [...files]
+ .filter(([, contents]) => contents)
+ .map(async ([pathname, contents]) => {
+ const dest = path.resolve(appDirPath, pathname);
+ logger.info(`Copying file "${pathname}" -> ${dest}`);
+ await fs.ensureFile(dest);
+ await fs.writeFile(dest, contents);
+ }),
  );
 
  // Adjust package.json dependencies

integration/tests/middleware-placement.test.ts

@@ -0,0 +1,99 @@
+import { expect, test } from '@playwright/test';
+
+import type { Application } from '../models/application';
+import { appConfigs } from '../presets';
+import { createTestUtils } from '../testUtils';
+
+const middlewareFileContents = `
+import { clerkMiddleware } from '@clerk/nextjs/server';
+export default clerkMiddleware();
+
+export const config = {
+ matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
+};
+`;
+
+const commonSetup = appConfigs.next.appRouterQuickstart.clone().removeFile('src/middleware.ts');
+
+test.describe('next start - missing middleware @quickstart', () => {
+ test.describe.configure({ mode: 'parallel' });
+ let app: Application;
+
+ test.beforeAll(async () => {
+ app = await commonSetup.commit();
+ await app.setup();
+ await app.withEnv(appConfigs.envs.withEmailCodesQuickstart);
+ await app.build();
+ await app.serve();
+ });
+
+ test.afterAll(async () => {
+ await app.teardown();
+ });
+
+ test('Display error for missing middleware', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goToAppHome();
+
+ expect(app.serveOutput).toContain('Your Middleware exists at ./src/middleware.(ts|js)');
+ });
+});
+
+test.describe('next start - invalid middleware at root on src/ @quickstart', () => {
+ test.describe.configure({ mode: 'parallel' });
+ let app: Application;
+
+ test.beforeAll(async () => {
+ app = await commonSetup.addFile('middleware.ts', () => middlewareFileContents).commit();
+ await app.setup();
+ await app.withEnv(appConfigs.envs.withEmailCodesQuickstart);
+ await app.build();
+ await app.serve();
+ });
+
+ test.afterAll(async () => {
+ await app.teardown();
+ });
+
+ test('Display suggestion for moving middleware to from `./middleware.ts` to `./src/middleware.ts`', async ({
+ page,
+ context,
+ }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goToAppHome();
+
+ expect(app.serveOutput).not.toContain('Your Middleware exists at ./src/middleware.(ts|js)');
+ expect(app.serveOutput).toContain(
+ 'Clerk: clerkMiddleware() was not run, your middleware file might be misplaced. Move your middleware file to ./src/middleware.ts. Currently located at ./middleware.ts',
+ );
+ });
+});
+
+test.describe('next start - invalid middleware inside app on src/ @quickstart', () => {
+ test.describe.configure({ mode: 'parallel' });
+ let app: Application;
+
+ test.beforeAll(async () => {
+ app = await commonSetup.addFile('src/app/middleware.ts', () => middlewareFileContents).commit();
+ await app.setup();
+ await app.withEnv(appConfigs.envs.withEmailCodesQuickstart);
+ await app.build();
+ await app.serve();
+ });
+
+ test.afterAll(async () => {
+ await app.teardown();
+ });
+
+ test('Display suggestion for moving middleware to from `./src/app/middleware.ts` to `./src/middleware.ts`', async ({
+ page,
+ context,
+ }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goToAppHome();
+ expect(app.serveOutput).not.toContain('Your Middleware exists at ./src/middleware.(ts|js)');
+ expect(app.serveOutput).toContain(
+ 'Clerk: clerkMiddleware() was not run, your middleware file might be misplaced. Move your middleware file to ./src/middleware.ts. Currently located at ./src/app/middleware.ts',
+ );
+ });
+});

.changeset/selfish-news-invent.md

@@ -0,0 +1,2 @@
+---
+---

integration/models/application.ts

@@ -20,6 +20,7 @@ export const application = (
  const stdoutFilePath = path.resolve(appDirPath, `e2e.${now}.log`);
  const stderrFilePath = path.resolve(appDirPath, `e2e.${now}.err.log`);
  let buildOutput = '';
+ let serveOutput = '';
 
  const self = {
  name,
@@ -93,7 +94,11 @@ export const application = (
  get buildOutput() {
  return buildOutput;
  },
+ get serveOutput() {
+ return serveOutput;
+ },
  serve: async (opts: { port?: number; manualStart?: boolean } = {}) => {
+ const log = logger.child({ prefix: 'serve' }).info;
  const port = opts.port || (await getPort());
  // TODO: get serverUrl as in dev()
  const serverUrl = `http://localhost:${port}`;
@@ -102,6 +107,10 @@ export const application = (
  const proc = run(scripts.serve, {
  cwd: appDirPath,
  env: { PORT: port.toString() },
+ log: (msg: string) => {
+ serveOutput += `\n${msg}`;
+ log(msg);
+ },
  });
  cleanupFns.push(() => awaitableTreekill(proc.pid, 'SIGKILL'));
  await waitForIdleProcess(proc);

integration/models/applicationConfig.ts

@@ -13,7 +13,7 @@ type Scripts = { dev: string; build: string; setup: string; serve: string };
 export const applicationConfig = () => {
  let name = '';
  let serverUrl = '';
-const templates: string[] = [];
+let template: string;
  const files = new Map<string, string>();
  const scripts: Scripts = { dev: 'pnpm dev', serve: 'pnpm serve', build: 'pnpm build', setup: 'pnpm install' };
  const envFormatters = { public: (key: string) => key, private: (key: string) => key };
@@ -26,7 +26,9 @@ export const applicationConfig = () => {
  clone.setName(name);
  clone.setEnvFormatter('public', envFormatters.public);
  clone.setEnvFormatter('private', envFormatters.private);
- templates.forEach(t => clone.useTemplate(t));
+ if (template) {
+ clone.useTemplate(template);
+ }
  dependencies.forEach((v, k) => clone.addDependency(k, v));
  Object.entries(scripts).forEach(([k, v]) => clone.addScript(k as keyof typeof scripts, v));
  files.forEach((v, k) => clone.addFile(k, () => v));
@@ -44,8 +46,12 @@ export const applicationConfig = () => {
  files.set(filePath, cbOrPath(helpers));
  return self;
  },
+ removeFile: (filePath: string) => {
+ files.set(filePath, '');
+ return self;
+ },
  useTemplate: (path: string) => {
-templates.push(path);
+template = path;
  return self;
  },
  setEnvFormatter: (type: keyof typeof envFormatters, formatter: typeof envFormatters.public) => {
@@ -76,20 +82,32 @@ export const applicationConfig = () => {
  const appDirPath = path.resolve(constants.TMP_DIR, appDirName);
 
  // Copy template files
-for (const template of templates) {
+if (template) {
  logger.info(`Copying template "${path.basename(template)}" -> ${appDirPath}`);
  await fs.ensureDir(appDirPath);
  await fs.copy(template, appDirPath, { overwrite: true, filter: (p: string) => !p.includes('node_modules') });
  }
 
+ await Promise.all(
+ [...files]
+ .filter(([, contents]) => !contents)
+ .map(async ([pathname]) => {
+ const dest = path.resolve(appDirPath, pathname);
+ logger.info(`Deleting file ${dest}`);
+ await fs.remove(dest);
+ }),
+ );
+
  // Create individual files
  await Promise.all(
- [...files].map(async ([pathname, contents]) => {
- const dest = path.resolve(appDirPath, pathname);
- logger.info(`Copying file "${pathname}" -> ${dest}`);
- await fs.ensureFile(dest);
- await fs.writeFile(dest, contents);
- }),
+ [...files]
+ .filter(([, contents]) => contents)
+ .map(async ([pathname, contents]) => {
+ const dest = path.resolve(appDirPath, pathname);
+ logger.info(`Copying file "${pathname}" -> ${dest}`);
+ await fs.ensureFile(dest);
+ await fs.writeFile(dest, contents);
+ }),
  );
 
  // Adjust package.json dependencies

integration/tests/middleware-placement.test.ts

@@ -0,0 +1,99 @@
+import { expect, test } from '@playwright/test';
+
+import type { Application } from '../models/application';
+import { appConfigs } from '../presets';
+import { createTestUtils } from '../testUtils';
+
+const middlewareFileContents = `
+import { clerkMiddleware } from '@clerk/nextjs/server';
+export default clerkMiddleware();
+
+export const config = {
+ matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
+};
+`;
+
+const commonSetup = appConfigs.next.appRouterQuickstart.clone().removeFile('src/middleware.ts');
+
+test.describe('next start - missing middleware @quickstart', () => {
+ test.describe.configure({ mode: 'parallel' });
+ let app: Application;
+
+ test.beforeAll(async () => {
+ app = await commonSetup.commit();
+ await app.setup();
+ await app.withEnv(appConfigs.envs.withEmailCodesQuickstart);
+ await app.build();
+ await app.serve();
+ });
+
+ test.afterAll(async () => {
+ await app.teardown();
+ });
+
+ test('Display error for missing middleware', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goToAppHome();
+
+ expect(app.serveOutput).toContain('Your Middleware exists at ./src/middleware.(ts|js)');
+ });
+});
+
+test.describe('next start - invalid middleware at root on src/ @quickstart', () => {
+ test.describe.configure({ mode: 'parallel' });
+ let app: Application;
+
+ test.beforeAll(async () => {
+ app = await commonSetup.addFile('middleware.ts', () => middlewareFileContents).commit();
+ await app.setup();
+ await app.withEnv(appConfigs.envs.withEmailCodesQuickstart);
+ await app.build();
+ await app.serve();
+ });
+
+ test.afterAll(async () => {
+ await app.teardown();
+ });
+
+ test('Display suggestion for moving middleware to from `./middleware.ts` to `./src/middleware.ts`', async ({
+ page,
+ context,
+ }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goToAppHome();
+
+ expect(app.serveOutput).not.toContain('Your Middleware exists at ./src/middleware.(ts|js)');
+ expect(app.serveOutput).toContain(
+ 'Clerk: clerkMiddleware() was not run, your middleware file might be misplaced. Move your middleware file to ./src/middleware.ts. Currently located at ./middleware.ts',
+ );
+ });
+});
+
+test.describe('next start - invalid middleware inside app on src/ @quickstart', () => {
+ test.describe.configure({ mode: 'parallel' });
+ let app: Application;
+
+ test.beforeAll(async () => {
+ app = await commonSetup.addFile('src/app/middleware.ts', () => middlewareFileContents).commit();
+ await app.setup();
+ await app.withEnv(appConfigs.envs.withEmailCodesQuickstart);
+ await app.build();
+ await app.serve();
+ });
+
+ test.afterAll(async () => {
+ await app.teardown();
+ });
+
+ test('Display suggestion for moving middleware to from `./src/app/middleware.ts` to `./src/middleware.ts`', async ({
+ page,
+ context,
+ }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goToAppHome();
+ expect(app.serveOutput).not.toContain('Your Middleware exists at ./src/middleware.(ts|js)');
+ expect(app.serveOutput).toContain(
+ 'Clerk: clerkMiddleware() was not run, your middleware file might be misplaced. Move your middleware file to ./src/middleware.ts. Currently located at ./src/app/middleware.ts',
+ );
+ });
+});