Support running multiple handlers side-by-side in a custom server (#2882

)

packages/toolpad-app/cli/index.ts

@@ -11,11 +11,12 @@ export interface RunOptions {
  port?: number;
  dev?: boolean;
  base: string;
+ create: boolean;
 }
 
 async function runCommand(
  cmd: 'dev' | 'start',
- { dir, dev: toolpadDevMode, ...args }: Omit<RunOptions, 'cmd'>,
+ { dir, dev: toolpadDevMode, create: createIfNotExists, ...args }: Omit<RunOptions, 'cmd'>,
 ) {
  const projectDir = path.resolve(process.cwd(), dir);
 
@@ -24,6 +25,7 @@ async function runCommand(
  dir: projectDir,
  dev: cmd !== 'start',
  toolpadDevMode,
+ createIfNotExists,
  });
 
  process.once('SIGINT', () => {
@@ -85,13 +87,18 @@ export default async function cli(argv: string[]) {
  dir: {
  type: 'string',
  describe: 'Directory of the Toolpad application',
- default: '.',
+ default: './toolpad',
  },
  base: {
  type: 'string',
  describe: 'Public base path of the Toolpad application',
  default: '/prod',
  },
+ create: {
+ type: 'boolean',
+ describe: "Create the application directory if it doesn't exist",
+ default: false,
+ },
  } as const;
 
  const sharedRunOptions = {

packages/toolpad-app/src/server/EnvManager.ts

@@ -14,6 +14,13 @@ interface IToolpadProject {
  invalidateQueries(): void;
 }
 
+/**
+ * Get file path for the env file.
+ */
+function getEnvFilePath() {
+ return path.resolve(process.cwd(), '.env');
+}
+
 /**
  * Handles loading env files and watches for updates.
  */
@@ -54,7 +61,7 @@ export default class EnvManager {
  }
 
  private loadEnvFile() {
- const envFilePath = this.getEnvFilePath();
+ const envFilePath = getEnvFilePath();
  this.resetEnv();
  const { parsed = {} } = dotenv.config({ path: envFilePath, override: true });
  this.values = parsed;
@@ -67,19 +74,12 @@ export default class EnvManager {
  );
  }
 
- /**
- * Get file path for the env file.
- */
- getEnvFilePath() {
- return path.resolve(this.project.getRoot(), '.env');
- }
-
  private initWatcher() {
  if (!this.project.options.dev) {
  return;
  }
 
- this.watcher = chokidar.watch([this.getEnvFilePath()], {
+ this.watcher = chokidar.watch([getEnvFilePath()], {
  usePolling: true,
  ignoreInitial: true,
  });

packages/toolpad-app/src/server/FunctionsManager.ts

@@ -103,7 +103,6 @@ interface IToolpadProject {
  options: ToolpadProjectOptions;
  events: Emitter<ProjectEvents>;
  getRoot(): string;
- getToolpadFolder(): string;
  getOutputFolder(): string;
  envManager: EnvManager;
  invalidateQueries(): void;
@@ -127,7 +126,7 @@ export default class FunctionsManager {
  }
 
  private getResourcesFolder(): string {
- return path.join(this.project.getToolpadFolder(), './resources');
+ return path.join(this.project.getRoot(), './resources');
  }
 
  private getFunctionsFile(): string {
@@ -144,7 +143,7 @@ export default class FunctionsManager {
  }
 
  private async migrateLegacy() {
- const legacyQueriesFile = path.resolve(this.project.getToolpadFolder(), 'queries.ts');
+ const legacyQueriesFile = path.resolve(this.project.getRoot(), 'queries.ts');
  if (await fileExists(legacyQueriesFile)) {
  const functionsFile = this.getFunctionsFile();
  await fs.mkdir(path.dirname(functionsFile), { recursive: true });

packages/toolpad-app/src/server/index.ts

@@ -201,7 +201,7 @@ export interface ToolpadHandlerConfig {
 
 export async function createHandler({
  dev = false,
- dir = '.',
+ dir = './toolpad',
  base = '/prod',
  externalUrl = 'http://localhost:3000',
 }: ToolpadHandlerConfig): Promise<AppHandler> {
@@ -425,6 +425,7 @@ export interface RunAppOptions {
  dir?: string;
  base?: string;
  toolpadDevMode?: boolean;
+ createIfNotExists?: boolean;
 }
 
 export async function runApp({
@@ -433,11 +434,16 @@ export async function runApp({
  base = '/prod',
  port = 3000,
  toolpadDevMode = false,
+ createIfNotExists,
 }: RunAppOptions) {
  const projectDir = resolveProjectDir(dir);
 
- if (!(await folderExists(projectDir))) {
- console.error(`${chalk.red('error')} - No project found at ${chalk.cyan(`"${projectDir}"`)}`);
+ if (!(await folderExists(projectDir)) && !createIfNotExists) {
+ console.error(
+ `${chalk.red('error')} - No project found at ${chalk.cyan(
+ `"${projectDir}"`,
+ )}. Use the --create option to initialize a new Toolpad project in this folder.`,
+ );
  process.exit(1);
  }
 

packages/toolpad-app/src/server/localMode.ts

@@ -20,7 +20,6 @@ import {
  readMaybeDir,
  updateYamlFile,
  fileExists,
- folderExists,
  readJsonFile,
 } from '@mui/toolpad-utils/fs';
 import { z } from 'zod';
@@ -68,22 +67,16 @@ invariant(
  'localMode should be used only in the main thread. Use message passing to get data from the main thread.',
 );
 
-function getToolpadFolder(root: string): string {
- return path.join(root, './toolpad');
-}
-
 function getThemeFile(root: string): string {
- return path.join(getToolpadFolder(root), './theme.yml');
+ return path.join(root, './theme.yml');
 }
 
 function getComponentsFolder(root: string): string {
- const toolpadFolder = getToolpadFolder(root);
- return path.join(toolpadFolder, './components');
+ return path.join(root, './components');
 }
 
 function getPagesFolder(root: string): string {
- const toolpadFolder = getToolpadFolder(root);
- return path.join(toolpadFolder, './pages');
+ return path.join(root, './pages');
 }
 
 function getPageFolder(root: string, name: string): string {
@@ -103,21 +96,13 @@ function getComponentFilePath(componentsFolder: string, componentName: string):
 }
 
 function getOutputFolder(root: string) {
- return path.join(getToolpadFolder(root), '.generated');
+ return path.join(root, '.generated');
 }
 
 function getAppOutputFolder(root: string) {
  return path.join(getOutputFolder(root), 'app');
 }
 
-async function legacyConfigFileExists(root: string): Promise<boolean> {
- const [yamlFileExists, ymlFileExists] = await Promise.all([
- fileExists(path.join(root, './toolpad.yaml')),
- fileExists(path.join(root, './toolpad.yml')),
- ]);
- return yamlFileExists || ymlFileExists;
-}
-
 type ComponentsContent = Record<string, { code: string }>;
 
 export interface ComponentEntry {
@@ -276,8 +261,7 @@ type BuildInfo = z.infer<typeof buildInfoSchema>;
 const DEFAULT_GENERATED_GITIGNORE_FILE_CONTENT = '.generated\n';
 
 async function initGitignore(root: string) {
- const projectFolder = getToolpadFolder(root);
- const generatedGitignorePath = path.resolve(projectFolder, '.gitignore');
+ const generatedGitignorePath = path.resolve(root, '.gitignore');
  if (!(await fileExists(generatedGitignorePath))) {
  // eslint-disable-next-line no-console
  console.log(`${chalk.blue('info')} - Initializing .gitignore file`);
@@ -908,24 +892,11 @@ export async function loadDomFromDisk(root: string): Promise<appDom.AppDom> {
  return projectFolderToAppDom(projectFolder);
 }
 
-async function migrateLegacyProject(root: string) {
- const isLegacyProject = await legacyConfigFileExists(root);
-
- if (isLegacyProject) {
- console.error(
- `${chalk.red(
- 'error',
- )} - This project was created with a deprecated version of Toolpad, please use @mui/toolpad@0.1.17 to migrate this project`,
- );
- process.exit(1);
- }
-}
-
 function getDomFilePatterns(root: string) {
  return [
- path.resolve(root, './toolpad/pages/*/page.yml'),
- path.resolve(root, './toolpad/components'),
- path.resolve(root, './toolpad/components/*.*'),
+ path.resolve(root, './pages/*/page.yml'),
+ path.resolve(root, './components'),
+ path.resolve(root, './components/*.*'),
  ];
 }
 /**
@@ -1067,10 +1038,6 @@ class ToolpadProject {
  return this.root;
  }
 
- getToolpadFolder() {
- return getToolpadFolder(this.getRoot());
- }
-
  getOutputFolder() {
  return getOutputFolder(this.getRoot());
  }
@@ -1260,7 +1227,7 @@ export type { ToolpadProject };
 
 declare global {
  // eslint-disable-next-line
- var __toolpadProject: ToolpadProject | undefined;
+ var __toolpadProjects: Set<string> | undefined;
 }
 
 export function resolveProjectDir(dir: string) {
@@ -1273,14 +1240,19 @@ export interface InitProjectOptions extends Partial<ToolpadProjectOptions> {
 }
 
 export async function initProject({ dir: dirInput, ...config }: InitProjectOptions) {
- // eslint-disable-next-line no-underscore-dangle
- invariant(!global.__toolpadProject, 'A project is already running');
+ const dir = resolveProjectDir(dirInput);
 
- const dir = await resolveProjectDir(dirInput);
+ invariant(
+ // eslint-disable-next-line no-underscore-dangle
+ !global.__toolpadProjects?.has(dir),
+ `A project is already running for "${dir}"`,
+ );
+ // eslint-disable-next-line no-underscore-dangle
+ global.__toolpadProjects ??= new Set();
+ // eslint-disable-next-line no-underscore-dangle
+ global.__toolpadProjects.add(dir);
 
- if (!(await folderExists(dir))) {
- throw new Error(`No Toolpad project found at ${chalk.cyan(`"${dir}"`)}`);
- }
+ await initToolpadFolder(dir);
 
  const resolvedConfig: ToolpadProjectOptions = {
  dev: false,
@@ -1289,13 +1261,7 @@ export async function initProject({ dir: dirInput, ...config }: InitProjectOptio
  ...config,
  };
 
- await migrateLegacyProject(dir);
-
- await initToolpadFolder(dir);
-
  const project = new ToolpadProject(dir, resolvedConfig);
- // eslint-disable-next-line no-underscore-dangle
- globalThis.__toolpadProject = project;
 
  return project;
 }

packages/toolpad-app/src/server/toolpadAppBuilder.ts

@@ -113,7 +113,7 @@ function toolpadVitePlugin({ root, base, getComponents }: ToolpadVitePluginParam
  return resolvedComponentsId;
  }
  if (importer === resolvedRuntimeEntryPointId || importer === resolvedComponentsId) {
- const newId = path.resolve(root, 'toolpad', id);
+ const newId = path.resolve(root, id);
  return this.resolve(newId, importer);
  }
  return null;

test/integration/backend-basic/fixture/server.mjs

@@ -0,0 +1,19 @@
+import { unstable_createHandler as createHandler } from '@mui/toolpad';
+import express from 'express';
+import * as path from 'path';
+
+const app = express();
+
+const base = process.env.BASE;
+const dir = path.resolve(process.cwd(), './toolpad');
+
+const handler = await createHandler({
+ dev: process.env.NODE_ENV === 'development',
+ dir,
+ base,
+});
+app.use(base, handler.handler);
+
+app.listen(process.env.PORT, () => {
+ console.log(`Custom server listening at http://localhost:${process.env.PORT}`);
+});

test/integration/editor/deleteLast.spec.ts

@@ -4,6 +4,7 @@ import { ToolpadEditor } from '../../models/ToolpadEditor';
 test.use({
  localAppConfig: {
  cmd: 'dev',
+ create: true,
  },
 });
 

test/integration/editor/new.spec.ts

@@ -7,6 +7,7 @@ import { ToolpadEditor } from '../../models/ToolpadEditor';
 test.use({
  localAppConfig: {
  cmd: 'dev',
+ create: true,
  },
 });