adminforth 2.25.0-test.2 → 2.25.0-test.20

package/commands/bundle.js

@@ -16,7 +16,8 @@ async function bundle() {
     `);
 
   } catch (e) {
-    console.log(`Running budndle failed`, e);
+    console.log(`Running bundle failed`, e);
+    throw new Error(`Failed to bundle admin SPA: ${e.message}`);
   }
 }
 

package/commands/createApp/templates/Dockerfile.hbs

@@ -1,3 +1,14 @@
+
+{{#unless useNpm}}
+FROM devforth/node20-pnpm:latest
+WORKDIR /code/
+ADD package.json pnpm-lock.yaml pnpm-workspace.yaml /code/
+RUN pnpm i  
+ADD . /code/
+RUN pnpm exec adminforth bundle
+CMD ["sh", "-c", "pnpm migrate:prod && pnpm prod"]
+{{/unless}}
+{{#if useNpm}}
 FROM node:{{nodeMajor}}-slim
 WORKDIR /code/
 ADD package.json package-lock.json /code/
@@ -5,3 +16,4 @@ RUN npm ci
 ADD . /code/
 RUN npx adminforth bundle
 CMD ["sh", "-c", "npm run migrate:prod && npm run prod"]
+{{/if}}

package/commands/createApp/templates/package.json.hbs

@@ -8,6 +8,7 @@
   "license": "ISC",
   "description": "",
   "scripts": {
+    {{#unless useNpm}}
     "dev": "pnpm _env:dev tsx watch index.ts",
     "prod": "pnpm _env:prod tsx index.ts",
     "start": "pnpm dev",
@@ -16,6 +17,17 @@
     "migrate:prod": "pnpm _env:prod npx --yes prisma migrate deploy",
     "_env:dev": "dotenvx run -f .env -f .env.local --",
     "_env:prod": "dotenvx run -f .env.prod --"
+    {{/unless}}
+    {{#if useNpm}}
+      "dev": "npm run _env:dev -- tsx watch index.ts",
+      "prod": "npm run _env:prod -- tsx index.ts",
+      "start": "npm run dev",
+      "makemigration": "npm run _env:dev -- npx --yes prisma migrate dev --create-only",
+      "migrate:local": "npm run _env:dev -- npx --yes prisma migrate deploy",
+      "migrate:prod": "npm run _env:prod -- npx --yes prisma migrate deploy",
+      "_env:dev": "dotenvx run -f .env -f .env.local --",
+      "_env:prod": "dotenvx run -f .env.prod --"
+    {{/if}}
   },
   "engines": {
     "node": ">=20"

package/commands/createApp/templates/pnpm_templates/pnpm-lock.yaml.hbs

@@ -0,0 +1,8 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+  .: {}

package/commands/createApp/templates/readme.md.hbs

@@ -1,7 +1,25 @@
 ## Starting the application
 
 Install dependencies:
+{{#if useNpm}}
+```bash
+npm i
+```
+
+Migrate the database:
+
+```bash
+npm run migrate:local
+```
+
+Start the server:
+
+```bash
+npm run dev
+```
+{{/if}}
 
+{{#unless useNpm}}
 ```bash
 pnpm i
 ```
@@ -17,6 +35,7 @@ Start the server:
 ```bash
 pnpm dev
 ```
+{{/unless}}
 
 {{#if prismaDbUrl}}
 ## Changing schema
@@ -26,7 +45,7 @@ Open `schema.prisma` and change schema as needed: add new tables, columns, etc (
 Run the following command to generate a new migration and apply it instantly in local database:
 
 ```bash
-pnpm makemigration -- --name <name_of_changes>
+pnpm makemigration --name <name_of_changes>
 ```
 
 Your colleagues will need to pull the changes and run `pnpm migrate:local` to apply the migration in their local database.

package/commands/createApp/utils.js

@@ -44,6 +44,7 @@ export function parseArgumentsIntoOptions(rawArgs) {
     {
       '--app-name': String,
       '--db': String,
+      '--use-npm': Boolean,
       // you can add more flags here if needed
     },
     {
@@ -54,6 +55,7 @@ export function parseArgumentsIntoOptions(rawArgs) {
   return {
     appName: args['--app-name'],
     db: args['--db'],
+    useNpm: args['--use-npm'],
   };
 }
 
@@ -78,11 +80,25 @@ export async function promptForMissingOptions(options) {
       });
   };
 
+  if (!options.useNpm) {
+    questions.push({
+      type: 'select',
+      name: 'useNpm',
+      message: 'Select your package manager >',
+      choices: [
+        { name: 'pnpm', value: false },
+        { name: 'npm', value: true },
+      ],
+      default: false,
+    });
+  }
+
   const answers = await inquirer.prompt(questions);
   return {
       ...options,
       appName: options.appName || answers.appName,
       db: options.db || answers.db,
+      useNpm: options.useNpm || answers.useNpm,
   };
 }
 
@@ -230,7 +246,7 @@ async function scaffoldProject(ctx, options, cwd) {
   await fse.copy(sourceAssetsDir, targetAssetsDir);
 
   // Write templated files
-  await writeTemplateFiles(dirname, projectDir, {
+  await writeTemplateFiles(dirname, projectDir, options.useNpm, {
     dbUrl: connectionString.toString(),
     dbUrlProd: connectionStringProd,
     prismaDbUrl,
@@ -244,7 +260,7 @@ async function scaffoldProject(ctx, options, cwd) {
   return projectDir;  // Return the new directory path
 }
 
-async function writeTemplateFiles(dirname, cwd, options) {
+async function writeTemplateFiles(dirname, cwd, useNpm, options) {
   const { 
     dbUrl, prismaDbUrl, appName, provider, nodeMajor,
     dbUrlProd, prismaDbUrlProd, sqliteFile
@@ -268,14 +284,6 @@ async function writeTemplateFiles(dirname, cwd, options) {
       dest: 'prisma.config.ts',
       data: {},
     },
-    {
-      src: 'package.json.hbs',
-      dest: 'package.json',
-      data: { 
-        appName,
-        adminforthVersion: adminforthVersion,
-       },
-    },
     {
       src: 'index.ts.hbs',
       dest: 'index.ts',
@@ -304,7 +312,7 @@ async function writeTemplateFiles(dirname, cwd, options) {
     {
       src: 'readme.md.hbs',
       dest: 'README.md',
-      data: { dbUrl, prismaDbUrl, appName, sqliteFile },
+      data: { dbUrl, prismaDbUrl, appName, sqliteFile, useNpm },
     },
     {
       // We'll write .env using the same content as .env.sample
@@ -317,21 +325,11 @@ async function writeTemplateFiles(dirname, cwd, options) {
       dest: 'resources/adminuser.ts',
       data: {},
     },
-    {
-      src: 'custom/package.json.hbs',
-      dest: 'custom/package.json',
-      data: {},
-    },
     {
       src: 'custom/tsconfig.json.hbs',
       dest: 'custom/tsconfig.json',
       data: {},
     },
-    {
-      src: 'Dockerfile.hbs',
-      dest: 'Dockerfile',
-      data: { nodeMajor },
-    },
     {
       src: '.dockerignore.hbs',
       dest: '.dockerignore',
@@ -340,12 +338,41 @@ async function writeTemplateFiles(dirname, cwd, options) {
       },
     },
     {
-      src: 'pnpm-workspace.yaml.hbs',
-      dest: 'pnpm-workspace.yaml',
-      data: {},
+      src: 'Dockerfile.hbs',
+      dest: 'Dockerfile',
+      data: { nodeMajor, useNpm },
+    },
+    {
+      src: 'package.json.hbs',
+      dest: 'package.json',
+      data: { 
+        appName,
+        adminforthVersion: adminforthVersion,
+        useNpm
+      },
+    },
+    {
+      src: 'custom/package.json.hbs',
+      dest: 'custom/package.json',
+      data: {}
     }
   ];
 
+  if (!useNpm) {
+    templateTasks.push(
+      {
+        src: 'pnpm_templates/pnpm-workspace.yaml.hbs',
+        dest: 'pnpm-workspace.yaml',
+        data: {},
+      },
+      {
+        src: 'pnpm_templates/pnpm-lock.yaml.hbs',
+        dest: 'custom/pnpm-lock.yaml',
+        data: {},
+      }
+    )
+  }
+
   for (const task of templateTasks) {
     // If a condition is specified and false, skip this file
     if (task.condition === false) continue;
@@ -363,7 +390,7 @@ async function writeTemplateFiles(dirname, cwd, options) {
   }
 }
 
-async function installDependencies(ctx, cwd) {
+async function installDependenciesPnpm(ctx, cwd) {
   const isWindows = process.platform === 'win32';
 
   const nodeBinary = process.execPath; 
@@ -380,10 +407,28 @@ async function installDependencies(ctx, cwd) {
       await execAsync(`${nodeBinary} ${npmPath} install`, { cwd: customDir, env: { PATH: process.env.PATH } }),
     ]);
   }
-  // console.log(chalk.dim(`Dependencies installed in ${cwd} and ${customDir}: \n${res[0].stdout}${res[1].stdout}`));
 }
 
-function generateFinalInstructions(skipPrismaSetup, options) {
+async function installDependenciesNpm(ctx, cwd) {
+  const isWindows = process.platform === 'win32';
+
+  const nodeBinary = process.execPath; 
+  const npmPath = path.join(path.dirname(nodeBinary), isWindows ? 'npm.cmd' : 'npm');
+  const customDir = ctx.customDir;
+  if (isWindows) {
+    const res = await Promise.all([
+      await execAsync(`npm install`, { cwd, env: { PATH: process.env.PATH } }),
+      await execAsync(`npm install`, { cwd: customDir, env: { PATH: process.env.PATH } }),
+    ]);
+  } else {
+    const res = await Promise.all([
+      await execAsync(`${nodeBinary} ${npmPath} install`, { cwd, env: { PATH: process.env.PATH } }),
+      await execAsync(`${nodeBinary} ${npmPath} install`, { cwd: customDir, env: { PATH: process.env.PATH } }),
+    ]);
+  }
+}
+
+function generateFinalInstructionsPnpm(skipPrismaSetup, options) {
   let instruction = '⏭️  Run the following commands to get started:\n';
   if (!skipPrismaSetup)
     instruction += `
@@ -404,6 +449,27 @@ function generateFinalInstructions(skipPrismaSetup, options) {
   return instruction;
 }
 
+function generateFinalInstructionsNpm(skipPrismaSetup, options) {
+  let instruction = '⏭️  Run the following commands to get started:\n';
+  if (!skipPrismaSetup)
+    instruction += `
+  ${chalk.dim('// Go to the project directory')}
+  ${chalk.dim('$')}${chalk.cyan(` cd ${options.appName}`)}\n`;
+
+    instruction += `
+  ${chalk.dim('// Generate and apply initial migration')}
+  ${chalk.dim('$')}${chalk.cyan(' npm run makemigration -- --name init && npm run migrate:local')}\n`;
+
+  instruction += `
+  ${chalk.dim('// Start dev server with tsx watch for hot-reloading')}
+  ${chalk.dim('$')}${chalk.cyan(' npm run dev')}\n
+`;
+
+  instruction += '😉 Happy coding!';
+
+  return instruction;
+}
+
 function renderHBSTemplate(templatePath, data) {
   // Example: renderHBRTemplate('path/to/template.hbs', {name: 'John Doe'})
   const template = fs.readFileSync(templatePath, 'utf-8');
@@ -430,13 +496,23 @@ export function prepareWorkflow(options) {
     },
     {
       title: '📦 Installing dependencies...',
-      task: async (ctx) => installDependencies(ctx, ctx.projectDir)
+      task: async (ctx) => {
+        if (options.useNpm) {
+          await installDependenciesNpm(ctx, ctx.projectDir);
+        } else {
+          await installDependenciesPnpm(ctx, ctx.projectDir);
+        }
+      }
     },
     {
       title: '📝 Preparing final instructions...',
       task: (ctx) => {
         console.log(chalk.green(`✅ Successfully created your new Adminforth project in ${ctx.projectDir}!\n`));
-        console.log(generateFinalInstructions(ctx.skipPrismaSetup, options));
+        if (options.useNpm) {
+          console.log(generateFinalInstructionsNpm(ctx.skipPrismaSetup, options));
+        } else {
+          console.log(generateFinalInstructionsPnpm(ctx.skipPrismaSetup, options));
+        }
         console.log('\n\n');
       }
     }

package/commands/createPlugin/utils.js

@@ -158,7 +158,7 @@ async function installDependencies(ctx, cwd) {
   const customDir = ctx.customDir;
 
   await Promise.all([
-    await execa("pnpm", ["install", "--no-package-lock"], { cwd }),
+    await execa("pnpm", ["install"], { cwd }),
     await execa("pnpm", ["install"], { cwd: customDir }),
   ]);
 }

package/dist/modules/codeInjector.d.ts

@@ -15,7 +15,8 @@ declare class CodeInjector implements ICodeInjector {
     registerCustomComponent(filePath: string): void;
     cleanup(): void;
     constructor(adminforth: any);
-    runPnpmShell({ command, cwd, envOverrides }: {
+    doesUserHasPnpmLockFile(dir: string): Promise<boolean>;
+    runPackageManagerShell({ command, cwd, envOverrides }: {
         command: string;
         cwd: string;
         envOverrides?: {

package/dist/modules/codeInjector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"codeInjector.d.ts","sourceRoot":"","sources":["../../modules/codeInjector.ts"],"names":[],"mappings":"AAQA,OAAO,UAAwC,MAAM,aAAa,CAAC;AAEnE,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAmEjD,cAAM,YAAa,YAAW,aAAa;IAEzC,WAAW,QAAM;IACjB,UAAU,EAAE,UAAU,CAAC;IACvB,iBAAiB,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAM;IAClD,gBAAgB,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAM;IACjD,aAAa,EAAE,MAAM,CAAQ;IAE7B,UAAU,IAAI,MAAM;IAQd,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE;IA8BpC,uBAAuB,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAK/C,OAAO;gBAMK,UAAU,KAAA;IAWhB,YAAY,CAAC,EAAC,OAAO,EAAE,GAAG,EAAE,YAAiB,EAAC,EAAE;QACpD,OAAO,EAAE,MAAM,CAAC;QAChB,GAAG,EAAE,MAAM,CAAC;QACZ,YAAY,CAAC,EAAE;YAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;SAAE,CAAA;KACzC;IA8CK,QAAQ;IAUd,WAAW;IAIL,gBAAgB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;IAgFhE,SAAS;IAQH,cAAc,CAAC,EAAE,YAAY,EAAE,EAAE;QAAE,YAAY,EAAE,MAAM,EAAE,CAAA;KAAE;IAgB3D,yBAAyB,CAAC,OAAO,KAAA;IAMjC,cAAc;IA4cd,iBAAiB,CAAC,EAAE,IAAA;IA4CpB,4BAA4B,CAAC,EAAE,mBAAmB,EAAE,WAAW,EAAE;;;KAAA;IAwEjE,WAAW,CAAC,QAAQ,EAAE,MAAM;IAW5B,kBAAkB,CAAC,UAAU,GAAE,MAA0B,EAAE,QAAQ,GAAE,MAAM,EAAO;IAyBlF,SAAS,CAAC,EAAE,SAAiB,EAAE,EAAE;QAAE,SAAS,EAAE,OAAO,CAAA;KAAE;CA0H9D;AAED,eAAe,YAAY,CAAC"}
+{"version":3,"file":"codeInjector.d.ts","sourceRoot":"","sources":["../../modules/codeInjector.ts"],"names":[],"mappings":"AAQA,OAAO,UAAwC,MAAM,aAAa,CAAC;AAEnE,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAmEjD,cAAM,YAAa,YAAW,aAAa;IAEzC,WAAW,QAAM;IACjB,UAAU,EAAE,UAAU,CAAC;IACvB,iBAAiB,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAM;IAClD,gBAAgB,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAM;IACjD,aAAa,EAAE,MAAM,CAAQ;IAE7B,UAAU,IAAI,MAAM;IAQd,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE;IA8BpC,uBAAuB,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAK/C,OAAO;gBAMK,UAAU,KAAA;IAYhB,uBAAuB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC;IAqBtD,sBAAsB,CAAC,EAAC,OAAO,EAAE,GAAG,EAAE,YAAiB,EAAC,EAAE;QAC9D,OAAO,EAAE,MAAM,CAAC;QAChB,GAAG,EAAE,MAAM,CAAC;QACZ,YAAY,CAAC,EAAE;YAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;SAAE,CAAA;KACzC;IAuDK,QAAQ;IAUd,WAAW;IAIL,gBAAgB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;IAgFhE,SAAS;IAQH,cAAc,CAAC,EAAE,YAAY,EAAE,EAAE;QAAE,YAAY,EAAE,MAAM,EAAE,CAAA;KAAE;IAgB3D,yBAAyB,CAAC,OAAO,KAAA;IAMjC,cAAc;IA8cd,iBAAiB,CAAC,EAAE,IAAA;IA4CpB,4BAA4B,CAAC,EAAE,mBAAmB,EAAE,WAAW,EAAE;;;KAAA;IAwEjE,WAAW,CAAC,QAAQ,EAAE,MAAM;IAW5B,kBAAkB,CAAC,UAAU,GAAE,MAA0B,EAAE,QAAQ,GAAE,MAAM,EAAO;IAyBlF,SAAS,CAAC,EAAE,SAAiB,EAAE,EAAE;QAAE,SAAS,EAAE,OAAO,CAAA;KAAE;CA2H9D;AAED,eAAe,YAAY,CAAC"}

package/dist/modules/codeInjector.js

@@ -77,7 +77,7 @@ class CodeInjector {
         const uniqueIcons = Array.from(new Set(icons));
         const collections = new Set(icons.map((icon) => icon.split(':')[0]));
         const iconPackageNames = Array.from(collections).map((collection) => `@iconify-prerendered/vue-${collection}`);
-        const iconPackages = (await Promise.allSettled(iconPackageNames.map(async (pkg) => ({ pkg: await import(this.spaTmpPath() + '/node_modules/' + pkg), name: pkg }))));
+        const iconPackages = (await Promise.allSettled(iconPackageNames.map(async (pkg) => ({ pkg: await import(path.join(this.spaTmpPath(), 'node_modules', pkg)), name: pkg }))));
         const loadedIconPackages = iconPackages.filter(isFulfilled).map((res) => res.value).reduce((acc, { pkg, name }) => {
             acc[name.slice(`@iconify-prerendered/vue-`.length)] = pkg;
             return acc;
@@ -117,25 +117,56 @@ class CodeInjector {
             process.exit();
         }));
     }
-    async runPnpmShell({ command, cwd, envOverrides = {} }) {
+    async doesUserHasPnpmLockFile(dir) {
+        const usersPackagePath = path.join(dir, 'package.json');
+        let packageContent = null;
+        try {
+            packageContent = JSON.parse(await fs.promises.readFile(usersPackagePath, 'utf-8'));
+        }
+        catch (e) {
+            // user package.json does not exist, user does not have custom components
+        }
+        if (packageContent) {
+            const lockPath = path.join(dir, 'pnpm-lock.yaml');
+            let lock = null;
+            try {
+                lock = yaml.parse(await fs.promises.readFile(lockPath, 'utf-8'));
+                return true;
+            }
+            catch (e) {
+                return false;
+            }
+        }
+        return false;
+    }
+    async runPackageManagerShell({ command, cwd, envOverrides = {} }) {
         const nodeBinary = process.execPath; // Path to the Node.js binary running this script
-        // On Windows, pnpm is pnpm.cmd, on Unix systems it's pnpm
-        const pnpmExecutable = process.platform === 'win32' ? 'pnpm.cmd' : 'pnpm';
-        const pnpmPath = path.join(path.dirname(nodeBinary), pnpmExecutable); // Path to the pnpm executable
+        const doesUserHavePnpmLock = await this.doesUserHasPnpmLockFile(this.adminforth.config.customization.customComponentsDir);
+        // On Windows, npm/pnpm is npm/pnpm.cmd, on Unix systems it's npm/pnpm
+        let packageExecutable;
+        if (doesUserHavePnpmLock) {
+            afLogger.trace(`User has pnpm-lock.yaml, using pnpm for installing custom components`);
+            packageExecutable = process.platform === 'win32' ? 'pnpm.cmd' : 'pnpm';
+        }
+        else {
+            afLogger.trace(`User does not have pnpm-lock.yaml, falling back to npm for installing custom components`);
+            packageExecutable = process.platform === 'win32' ? 'npm.cmd' : 'npm';
+        }
+        const packagePath = path.join(path.dirname(nodeBinary), packageExecutable); // Path to the package executable
         const env = Object.assign(Object.assign({ VITE_ADMINFORTH_PUBLIC_PATH: this.adminforth.config.baseUrl, FORCE_COLOR: '1' }, process.env), envOverrides);
-        afLogger.trace(`⚙️ exec: pnpm ${command}`);
-        afLogger.trace(`🪲 pnpm ${command} cwd: ${cwd}`);
+        afLogger.trace(`⚙️ exec: ${packageExecutable} ${command}`);
+        afLogger.trace(`🪲 ${packageExecutable} ${command} cwd: ${cwd}`);
         let execCommand;
         if (process.platform === 'win32') {
             // Quote path if it contains spaces
-            const quotedPnpmPath = pnpmPath.includes(' ') ? `"${pnpmPath}"` : pnpmPath;
-            execCommand = `${quotedPnpmPath} ${command}`;
+            const quotedPackagePath = packagePath.includes(' ') ? `"${packagePath}"` : packagePath;
+            execCommand = `${quotedPackagePath} ${command}`;
         }
         else {
             // Quote paths that contain spaces (for Unix systems)
             const quotedNodeBinary = nodeBinary.includes(' ') ? `"${nodeBinary}"` : nodeBinary;
-            const quotedPnpmPath = pnpmPath.includes(' ') ? `"${pnpmPath}"` : pnpmPath;
-            execCommand = `${quotedNodeBinary} ${quotedPnpmPath} ${command}`;
+            const quotedPackagePath = packagePath.includes(' ') ? `"${packagePath}"` : packagePath;
+            execCommand = `${quotedNodeBinary} ${quotedPackagePath} ${command}`;
         }
         const execOptions = {
             cwd,
@@ -145,9 +176,9 @@ class CodeInjector {
             execOptions.shell = true;
         }
         const { stderr: err } = await execAsync(execCommand, execOptions);
-        afLogger.trace(`pnpm ${command} done in`);
+        afLogger.trace(`${packageExecutable} ${command} done in`);
         if (err) {
-            afLogger.trace(`🪲pnpm ${command} errors/warnings: ${err}`);
+            afLogger.trace(`🪲${packageExecutable} ${command} errors/warnings: ${err}`);
         }
     }
     async rmTmpDir() {
@@ -187,7 +218,7 @@ class CodeInjector {
                     npmLock = JSON.parse(await fs.promises.readFile(npmLockPath, 'utf-8'));
                 }
                 catch (npmLockError) {
-                    throw new Error(`Custom pnpm-lock.yaml does not exist in ${dir}, but package.json does.
+                    throw new Error(`Custom pnpm-lock.yaml or package-lock.json does not exist in ${dir}, but package.json does.
           We can't determine version of packages without pnpm-lock.yaml or package-lock.json. Please run pnpm install or npm install in ${dir}`);
                 }
                 lockHash = hashify(npmLock);
@@ -583,6 +614,7 @@ class CodeInjector {
         routerVueContent = routerVueContent.replace('/* IMPORTANT:ADMINFORTH ROUTES */', routes);
         await fs.promises.writeFile(routerVuePath, routerVueContent);
         /* hash checking */
+        // Here we use pnpm-lock.yaml, because this file will be anywat, even if user doesn't use it
         const spaPnpmLockPath = path.join(this.spaTmpPath(), 'pnpm-lock.yaml');
         const spaPnpmLock = yaml.parse(await fs.promises.readFile(spaPnpmLockPath, 'utf-8'));
         const spaLockHash = hashify(spaPnpmLock);
@@ -625,7 +657,8 @@ class CodeInjector {
             // ignore
             afLogger.trace(`🪲Hash file does not exist, proceeding with pnpm install, ${e}`);
         }
-        await this.runPnpmShell({ command: 'install --frozen-lockfile', cwd: this.spaTmpPath(), envOverrides: {
+        // install --frozen-lockfile works for npm and pnpm
+        await this.runPackageManagerShell({ command: 'install --frozen-lockfile', cwd: this.spaTmpPath(), envOverrides: {
                 NODE_ENV: 'development' // otherwise it will not install devDependencies which we still need, e.g for extract
             } });
         const allPacks = [
@@ -642,9 +675,9 @@ class CodeInjector {
         });
         const allPacksUnique = Array.from(new Set(allPacksFiltered));
         if (allPacks.length) {
-            const pnpmInstallCommand = `install ${allPacksUnique.join(' ')}`;
-            await this.runPnpmShell({
-                command: pnpmInstallCommand, cwd: this.spaTmpPath(),
+            const packageManagerInstallCommand = `install ${allPacksUnique.join(' ')}`;
+            await this.runPackageManagerShell({
+                command: packageManagerInstallCommand, cwd: this.spaTmpPath(),
                 envOverrides: {
                     NODE_ENV: 'development' // otherwise it will not install devDependencies which we still need, e.g for extract
                 }
@@ -818,7 +851,7 @@ class CodeInjector {
             await fs.promises.mkdir(serveDir, { recursive: true });
         }
         if (!skipExtract) {
-            await this.runPnpmShell({ command: 'run i18n:extract', cwd });
+            await this.runPackageManagerShell({ command: 'run i18n:extract', cwd });
             // create serveDir if not exists
             await fs.promises.mkdir(serveDir, { recursive: true });
             // copy i18n messages to serve dir
@@ -832,7 +865,7 @@ class CodeInjector {
         if (!hotReload) {
             if (!skipBuild) {
                 // TODO probably add option to build with tsh check (plain 'build')
-                await this.runPnpmShell({ command: 'run build-only', cwd });
+                await this.runPackageManagerShell({ command: 'run build-only', cwd });
                 // coy dist to serveDir
                 await fsExtra.copy(path.join(cwd, 'dist'), serveDir, { recursive: true });
                 // save hash
@@ -844,19 +877,20 @@ class CodeInjector {
         }
         else {
             const command = 'run dev';
-            afLogger.info(`⚙️ spawn: pnpm ${command}...`);
+            const usersPackageManager = await this.doesUserHasPnpmLockFile(this.adminforth.config.customization.customComponentsDir) ? 'pnpm' : 'npm';
+            afLogger.info(`⚙️ spawn: ${usersPackageManager} ${command}...`);
             if (process.env.VITE_ADMINFORTH_PUBLIC_PATH) {
                 afLogger.info(`⚠️ Your VITE_ADMINFORTH_PUBLIC_PATH: ${process.env.VITE_ADMINFORTH_PUBLIC_PATH} has no effect`);
             }
             const env = Object.assign({ VITE_ADMINFORTH_PUBLIC_PATH: this.adminforth.config.baseUrl, FORCE_COLOR: '1' }, process.env);
             const nodeBinary = process.execPath;
-            const pnpmPath = path.join(path.dirname(nodeBinary), 'pnpm');
+            const packageManagerPath = path.join(path.dirname(nodeBinary), usersPackageManager);
             let devServer;
             if (process.platform === 'win32') {
-                devServer = spawn('pnpm', command.split(' '), { cwd, env, shell: true });
+                devServer = spawn(usersPackageManager, command.split(' '), { cwd, env, shell: true });
             }
             else {
-                devServer = spawn(`${nodeBinary}`, [`${pnpmPath}`, ...command.split(' ')], { cwd, env });
+                devServer = spawn(`${nodeBinary}`, [`${packageManagerPath}`, ...command.split(' ')], { cwd, env });
             }
             devServer.stdout.on('data', (data) => {
                 if (data.includes('➜')) {