feat(serve): forward --ssl to Angular CLI

By using the Angular CLI's `--ssl` option, the webpack server will
auto-generate an SSL certificate at runtime. Devs will need to confirm
the self-signed certificate in their browsers in order to load the app
using `ionic serve --ssl`.

Known limitations:

* DevApp does not yet support apps on HTTPS (#3748)
* The iOS Web View does not support self-signed certificates yet

references #3305

Author: imhoffd

packages/ionic/src/commands/serve.ts

@@ -63,12 +63,6 @@ export class ServeCommand extends Command implements CommandPreRun {
         type: Boolean,
         aliases: ['l'],
       },
-      {
-        name: 'auth',
-        summary: 'HTTP Basic Auth password to secure the server on your local network',
-        type: String,
-        groups: [OptionGroup.Hidden],
-      },
     ];
 
     const exampleCommands = ['', '-c', '--local', '--lab'];

packages/ionic/src/definitions.ts

@@ -237,11 +237,6 @@ export interface IProjectConfig {
 
   readonly integrations: ProjectIntegrations;
   readonly hooks?: Record<HookName, string | string[] | undefined>;
-
-  ssl?: {
-    key?: string;
-    cert?: string;
-  };
 }
 
 export interface IMultiProjectConfig {
@@ -550,7 +545,6 @@ export interface ServeOptions {
   // Command Options
   address: string;
   port: number;
-  ssl: boolean;
   livereload: boolean;
   proxy: boolean;
   lab: boolean;
@@ -570,6 +564,7 @@ export interface ServeOptions {
 }
 
 export interface AngularServeOptions extends ServeOptions {
+  ssl?: boolean;
   configuration?: string;
   sourcemaps?: boolean;
 }
@@ -592,13 +587,8 @@ export interface Ionic1ServeOptions extends ServeOptions {
 
 export interface LabServeDetails {
   projectType: ProjectType;
-  protocol: string;
   address: string;
   port: number;
-  ssl?: {
-    key: string;
-    cert: string;
-  };
 }
 
 export interface DevAppDetails {

packages/ionic/src/lib/project/angular/serve.ts

@@ -8,16 +8,6 @@ import { BIND_ALL_ADDRESS, LOCAL_ADDRESSES, SERVE_SCRIPT, ServeCLI, ServeRunner,
 
 import { AngularProject } from './';
 
-const NG_SERVE_OPTIONS = [
-  {
-    name: 'configuration',
-    summary: 'Specify the configuration to use.',
-    type: String,
-    groups: [OptionGroup.Advanced],
-    hint: chalk.dim('[ng]'),
-  },
-];
-
 export interface AngularServeRunnerDeps extends ServeRunnerDeps {
   readonly project: AngularProject;
 }
@@ -35,20 +25,32 @@ ${chalk.green('ionic serve')} uses the Angular CLI. Use ${chalk.green('ng serve
 
 ${chalk.cyan('[1]')}: ${chalk.bold('https://github.com/angular/angular-cli/wiki/serve')}`,
       options: [
+        {
+          name: 'ssl',
+          summary: 'Use HTTPS for the dev server',
+          type: Boolean,
+          hint: chalk.dim('[ng]'),
+        },
         {
           name: 'prod',
           summary: `Flag to use the ${chalk.green('production')} configuration`,
           type: Boolean,
           hint: chalk.dim('[ng]'),
         },
+        {
+          name: 'configuration',
+          summary: 'Specify the configuration to use.',
+          type: String,
+          groups: [OptionGroup.Advanced],
+          hint: chalk.dim('[ng]'),
+        },
         {
           name: 'source-map',
           summary: 'Output sourcemaps',
           type: Boolean,
           groups: [OptionGroup.Advanced],
           hint: chalk.dim('[ng]'),
         },
-        ...NG_SERVE_OPTIONS,
       ],
       exampleCommands: [
         '-- --proxy-config proxy.conf.json',
@@ -59,11 +61,13 @@ ${chalk.cyan('[1]')}: ${chalk.bold('https://github.com/angular/angular-cli/wiki/
   createOptionsFromCommandLine(inputs: CommandLineInputs, options: CommandLineOptions): AngularServeOptions {
     const baseOptions = super.createOptionsFromCommandLine(inputs, options);
     const prod = options['prod'] ? Boolean(options['prod']) : undefined;
+    const ssl = options['ssl'] ? Boolean(options['ssl']) : undefined;
     const configuration = options['configuration'] ? String(options['configuration']) : (prod ? 'production' : undefined);
     const sourcemaps = typeof options['source-map'] === 'boolean' ? Boolean(options['source-map']) : undefined;
 
     return {
       ...baseOptions,
+      ssl,
       configuration,
       sourcemaps,
     };
@@ -91,7 +95,7 @@ ${chalk.cyan('[1]')}: ${chalk.bold('https://github.com/angular/angular-cli/wiki/
 
     return {
       custom: ng.resolvedProgram !== ng.program,
-      protocol: 'http',
+      protocol: options.ssl ? 'https' : 'http',
       localAddress: 'localhost',
       externalAddress: externalIP,
       externalNetworkInterfaces: availableInterfaces,
@@ -140,6 +144,7 @@ export class AngularServeCLI extends ServeCLI<AngularServeOptions> {
       host: options.address,
       port: String(options.port),
       'source-map': options.sourcemaps !== false ? options.sourcemaps : 'false',
+      'ssl': options.ssl !== false ? options.ssl : 'false',
     };
 
     let separatedArgs = options['--'];

packages/ionic/src/lib/serve.ts

@@ -117,7 +117,6 @@ export abstract class ServeRunner<T extends ServeOptions> implements Runner<T, S
       platform: options['platform'] ? String(options['platform']) : undefined,
       port,
       proxy: typeof options['proxy'] === 'boolean' ? Boolean(options['proxy']) : true,
-      ssl: false,
       project: options['project'] ? String(options['project']) : undefined,
     };
   }
@@ -182,7 +181,7 @@ export abstract class ServeRunner<T extends ServeOptions> implements Runner<T, S
 
     const localAddress = `${details.protocol}://localhost:${details.port}`;
     const fmtExternalAddress = (address: string) => `${details.protocol}://${address}:${details.port}`;
-    const labAddress = labDetails ? `${labDetails.protocol}://${labDetails.address}:${labDetails.port}` : undefined;
+    const labAddress = labDetails ? `http://${labDetails.address}:${labDetails.port}` : undefined;
 
     this.e.log.nl();
     this.e.log.info(
@@ -312,24 +311,10 @@ export abstract class ServeRunner<T extends ServeOptions> implements Runner<T, S
   async runLab(options: T, serveDetails: ServeDetails): Promise<LabServeDetails> {
     const labDetails: LabServeDetails = {
       projectType: this.e.project.type,
-      protocol: options.ssl ? 'https' : 'http',
       address: options.labHost,
       port: await findClosestOpenPort(options.labPort),
     };
 
-    if (options.ssl) {
-      const sslConfig = this.e.project.config.get('ssl');
-
-      if (sslConfig && sslConfig.key && sslConfig.cert) {
-        labDetails.ssl = { key: sslConfig.key, cert: sslConfig.cert };
-      } else {
-        throw new FatalException(
-          `Both ${chalk.green('ssl.key')} and ${chalk.green('ssl.cert')} config entries must be set.\n` +
-          `See ${chalk.green('ionic serve --help')} for details on using your own SSL key and certificate for Ionic Lab and the dev server.`
-        );
-      }
-    }
-
     const lab = new IonicLabServeCLI(this.e);
     await lab.serve({ serveDetails, ...labDetails });
 
@@ -654,10 +639,6 @@ class IonicLabServeCLI extends ServeCLI<IonicLabServeCLIOptions> {
     const nameArgs = appName ? ['--app-name', appName] : [];
     const versionArgs = pkg.version ? ['--app-version', pkg.version] : [];
 
-    if (labDetails.ssl) {
-      labArgs.push('--ssl', '--ssl-key', labDetails.ssl.key, '--ssl-cert', labDetails.ssl.cert);
-    }
-
     return [...labArgs, ...nameArgs, ...versionArgs];
   }
 }