fix(serve): fix --livereload for device/emulator

Add logic for Cordova assets: cordova.js, cordova_plugins.js, and
Cordova plugin assets.

fixes #3461

Author: imhoffd

packages/@ionic/cli-utils/src/lib/project/ionic1/serve.ts

@@ -121,16 +121,24 @@ class Ionic1ServeCLI extends ServeCLI<Ionic1ServeOptions> {
   protected async buildArgs(options: Ionic1ServeOptions): Promise<string[]> {
     const { pkgManagerArgs } = await import('../../utils/npm');
 
-    const args = ['--host', options.address, '--port', String(options.port), '--livereload-port', String(options.livereloadPort), '--dev-port', String(options.notificationPort)];
-
-    if (this.resolvedProgram === this.program) {
-      const v1utilArgs = ['serve'];
+    const args = [
+      `--host=${options.address}`,
+      `--port=${String(options.port)}`,
+      `--livereload-port=${String(options.livereloadPort)}`,
+      `--dev-port=${String(options.notificationPort)}`,
+      `--engine=${options.engine}`,
+    ];
+
+    if (options.platform) {
+      args.push(`--platform=${options.platform}`);
+    }
 
-      if (options.consolelogs) {
-        v1utilArgs.push('-c');
-      }
+    if (options.consolelogs) {
+      args.push('-c');
+    }
 
-      return [...v1utilArgs, ...args];
+    if (this.resolvedProgram === this.program) {
+      return ['serve', ...args];
     } else {
       const [ , ...pkgArgs ] = await pkgManagerArgs(this.e.config.get('npmClient'), { command: 'run', script: this.script, scriptArgs: [...args] });
       return pkgArgs;

packages/@ionic/v1-toolkit/src/commands/serve.ts

@@ -48,6 +48,15 @@ export class ServeCommand extends Command {
           type: Boolean,
           aliases: ['c'],
         },
+        {
+          name: 'engine',
+          summary: `Target engine (e.g. ${['browser', 'cordova'].map(e => chalk.green(e)).join(', ')})`,
+          default: 'browser',
+        },
+        {
+          name: 'platform',
+          summary: `Target platform on chosen engine (e.g. ${['ios', 'android'].map(e => chalk.green(e)).join(', ')})`,
+        },
       ],
     };
   }
@@ -59,6 +68,8 @@ export class ServeCommand extends Command {
     const livereload = options['livereload'] ? true : false;
     const livereloadPort = str2num(options['livereload-port']);
     const consolelogs = options['consolelogs'] ? true : false;
+    const engine = String(options['engine']);
+    const platform = options['platform'] ? String(options['platform']) : undefined;
 
     const url = `http://${host}:${port}`;
 
@@ -79,7 +90,19 @@ export class ServeCommand extends Command {
 
     process.stdout.write(`${timestamp()} Serving directory ${chalk.bold(wwwDir)}\n`);
 
-    await runServer({ host, port, livereload, consolelogs, devPort, livereloadPort, wwwDir, watchPatterns: c.watchPatterns, proxies });
+    await runServer({
+      host,
+      port,
+      engine,
+      platform,
+      livereload,
+      consolelogs,
+      devPort,
+      livereloadPort,
+      wwwDir,
+      watchPatterns: c.watchPatterns,
+      proxies,
+    });
 
     process.stdout.write(`${timestamp()} Dev server running at ${chalk.bold(url)}\n`);
   }

packages/@ionic/v1-toolkit/src/lib/serve.ts

@@ -1,6 +1,6 @@
 import * as path from 'path';
 
-import { fsReadFile } from '@ionic/cli-framework/utils/fs';
+import { fsReadFile, pathExists } from '@ionic/cli-framework/utils/fs';
 import chalk from 'chalk';
 
 import * as ζexpress from 'express';
@@ -47,6 +47,8 @@ export interface ServeOptions {
   devPort: number;
   livereloadPort: number;
   wwwDir: string;
+  engine: string;
+  platform?: string;
   watchPatterns: string[];
   proxies: ProxyConfig[];
 }
@@ -113,9 +115,28 @@ async function createHttpServer(options: ServeOptions): Promise<ζexpress.Applic
     res.send(indexHtml);
   };
 
+  const serveCordovaPlatformResource = async (req: ζexpress.Request, res: ζexpress.Response, next: ζexpress.NextFunction) => {
+    if (options.engine !== 'cordova' || !options.platform) {
+      return next();
+    }
+
+    const resourcePath = path.resolve('platforms', options.platform, 'platform_www');
+
+    if (await pathExists(path.join(resourcePath, req.url))) {
+      res.sendFile(req.url, { root: resourcePath });
+    } else {
+      next();
+    }
+  };
+
   app.get('/', serveIndex);
   app.use('/', express.static(options.wwwDir));
 
+  // Cordova
+  app.get('/cordova.js', serveCordovaPlatformResource, serveMockCordovaJS);
+  app.get('/cordova_plugins.js', serveCordovaPlatformResource);
+  app.get('/plugins/*', serveCordovaPlatformResource);
+
   const livereloadUrl = `http://localhost:${options.livereloadPort}`;
   const pathPrefix = `/${DEV_SERVER_PREFIX}/tiny-lr`;
 
@@ -151,3 +172,8 @@ async function attachProxy(app: ζexpress.Application, config: ProxyConfig) {
   const proxyMiddleware = await import('http-proxy-middleware');
   app.use(config.mount, proxyMiddleware(config.mount, config));
 }
+
+function serveMockCordovaJS(req: ζexpress.Request, res: ζexpress.Response) {
+  res.set('Content-Type', 'application/javascript');
+  res.send('// mock cordova file during development');
+}