fix: vue based custom project should work with build and serve

Author: dtarnawsky

src/ionic-build.ts

@@ -2,12 +2,14 @@ import { Project } from './project';
 import { FrameworkType, MonoRepoType } from './monorepo';
 import { ionicState } from './ionic-tree-provider';
 import { InternalCommand } from './command-name';
-import { npx, preflightNPMCheck } from './node-commands';
+import { npmRun, npx, preflightNPMCheck } from './node-commands';
 import { exists } from './analyzer';
 import { CapacitorPlatform } from './capacitor-platform';
 import { getConfigurationArgs } from './build-configuration';
 import { workspace } from 'vscode';
 import { error } from 'console';
+import { existsSync, readFileSync } from 'fs';
+import { join } from 'path';
 
 /**
  * Creates the ionic build command
@@ -59,7 +61,7 @@ function ionicCLIBuild(
   configurationArg?: string,
   platform?: CapacitorPlatform,
 ): string {
-  let cmd = `${npx(project.packageManager)} ${buildCmd(project.frameworkType)}`;
+  let cmd = `${npx(project.packageManager)} ${buildCmd(project)}`;
   if (configurationArg) {
     cmd += ` ${configurationArg}`;
   } else if (prod) {
@@ -72,8 +74,8 @@ function ionicCLIBuild(
   return cmd;
 }
 
-function buildCmd(framework: FrameworkType): string {
-  switch (framework) {
+function buildCmd(project: Project): string {
+  switch (project.frameworkType) {
     case 'angular':
     case 'angular-standalone':
       return 'ng build';
@@ -84,10 +86,28 @@ function buildCmd(framework: FrameworkType): string {
       return 'react-scripts build';
     case 'vue':
       return 'vue-cli-service build';
-    default:
-      error('build command is unknown');
+    default: {
+      const cmd = guessBuildCommand(project);
+      if (!cmd) {
+        error('build command is unknown');
+      }
+      return cmd;
+    }
+  }
+}
+
+function guessBuildCommand(project: Project): string | undefined {
+  const filename = join(project.projectFolder(), 'package.json');
+  if (existsSync(filename)) {
+    const packageFile = JSON.parse(readFileSync(filename, 'utf8'));
+    if (packageFile.scripts['ionic:build']) {
+      return npmRun('ionic:build');
+    }
+    if (packageFile.scripts?.build) {
+      return npmRun('build');
+    }
   }
-  return 'build command unknown';
+  return undefined;
 }
 
 function nxBuild(prod: boolean, project: Project, configurationArg?: string): string {

src/ionic-serve.ts

@@ -1,19 +1,20 @@
-import { existsSync } from 'fs';
+import { existsSync, readFileSync } from 'fs';
 import { networkInterfaces } from 'os';
 
 import { getConfigurationArgs } from './build-configuration';
 import { InternalCommand } from './command-name';
 import { ionicState } from './ionic-tree-provider';
 import { certPath } from './live-reload';
 import { FrameworkType, MonoRepoType } from './monorepo';
-import { npx, preflightNPMCheck } from './node-commands';
+import { npmRun, npx, preflightNPMCheck } from './node-commands';
 import { Project } from './project';
 import { liveReloadSSL } from './live-reload';
 import { ExtensionSetting, getExtSetting, getSetting, setSetting, WorkspaceSetting } from './workspace-state';
 import { getWebConfiguration, WebConfigSetting } from './web-configuration';
 import { window, workspace } from 'vscode';
 import { write, writeError } from './logging';
 import { createServer } from 'http';
+import { join } from 'path';
 
 /**
  * Create the ionic serve command
@@ -77,11 +78,11 @@ async function ionicCLIServe(project: Project, dontOpenBrowser: boolean): Promis
     serveFlags += ` --ssl-key='${certPath('key')}'`;
   }
 
-  return `${preop}${npx(project.packageManager)} ${serveCmd(project.frameworkType)}${serveFlags}`;
+  return `${preop}${npx(project.packageManager)} ${serveCmd(project)}${serveFlags}`;
 }
 
-function serveCmd(framework: FrameworkType): string {
-  switch (framework) {
+function serveCmd(project: Project): string {
+  switch (project.frameworkType) {
     case 'angular':
     case 'angular-standalone':
       return 'ng serve';
@@ -92,11 +93,29 @@ function serveCmd(framework: FrameworkType): string {
       return 'react-scripts start';
     case 'vue':
       return 'vue-cli-service serve';
-    default:
+    default: {
+      const cmd = guessServeCommand(project);
+      if (cmd) {
+        return cmd;
+      }
       writeError(`serve command is not know for this project type`);
+    }
   }
 }
 
+function guessServeCommand(project: Project): string | undefined {
+  const filename = join(project.projectFolder(), 'package.json');
+  if (existsSync(filename)) {
+    const packageFile = JSON.parse(readFileSync(filename, 'utf8'));
+    if (packageFile.scripts['ionic:serve']) {
+      return npmRun('ionic:serve');
+    }
+    if (packageFile.scripts?.serve) {
+      return npmRun('serve');
+    }
+  }
+  return undefined;
+}
 async function findNextPort(port: number): Promise<number> {
   let availablePort = port;
   while (await isPortInUse(availablePort)) {

src/utilities.ts

@@ -281,6 +281,7 @@ export async function run(
               'open your browser on ',
               '> Local:', // Nuxt
               '➜  Local:', // AnalogJs
+              '- Local:', // Vue
             ]);
             if (url) {
               findLocalUrl = false;
@@ -296,6 +297,7 @@ export async function run(
               'On Your Network:',
               '> Network:', // Nuxt
               '➜  Network:', // AnalogJs
+              '- Network:', // Vue
               'open your browser on ', // NX
             ]);
             if (url) {