feat(@nguniversal/builders): add SSL support for dev-server

With this change we add SSL support to the SSR dev-server. We expose 3 new options;

- `ssl`: Turn on/off HTTPs
- `sslKey`: SSL key to use for serving HTTPS
- `sslCert`: SSL certificate to use for serving HTTPS

Closes angular#1633

Author: alan-agius4

modules/builders/src/ssr-dev-server/index.spec.ts

@@ -8,9 +8,9 @@
 
 import { Architect, BuilderRun } from '@angular-devkit/architect';
 import * as browserSync from 'browser-sync';
-import { concatMap, debounceTime, mergeMap, retryWhen, take } from 'rxjs/operators';
-
+import * as https from 'https';
 import { from, throwError, timer } from 'rxjs';
+import { concatMap, debounceTime, mergeMap, retryWhen, take } from 'rxjs/operators';
 import { createArchitect, host } from '../../testing/utils';
 import { SSRDevServerBuilderOutput } from './index';
 
@@ -90,6 +90,20 @@ describe('Serve SSR Builder', () => {
     expect(output.baseUrl).not.toContain('4200');
   });
 
+  it('works with SSL', async () => {
+    const run = await architect.scheduleTarget(target, { ssl: true });
+    runs.push(run);
+    const output = await run.result as SSRDevServerBuilderOutput;
+    expect(output.success).toBe(true);
+    expect(output.baseUrl).toBe('https://localhost:4200');
+
+    const response = await fetch('https://localhost:4200/index.html', {
+      agent: new https.Agent({ rejectUnauthorized: false }),
+    });
+
+    expect(await response.text()).toContain('<title>App</title>');
+  });
+
   // todo: alan-agius4: Investigate why this tests passed locally but fails in CI.
   // this is currenty disabled but still useful locally
   // tslint:disable-next-line: ban

modules/builders/src/ssr-dev-server/index.ts

@@ -15,7 +15,7 @@ import {
 import { json, logging, tags } from '@angular-devkit/core';
 import * as browserSync from 'browser-sync';
 import { createProxyMiddleware } from 'http-proxy-middleware';
-import { join } from 'path';
+import { join, resolve as pathResolve } from 'path';
 import {
   EMPTY,
   Observable,
@@ -62,7 +62,6 @@ export function execute(
   const browserTarget = targetFromTargetString(options.browserTarget);
   const serverTarget = targetFromTargetString(options.serverTarget);
   const getBaseUrl = (bs: browserSync.BrowserSyncInstance) => `${bs.getOption('scheme')}://${bs.getOption('host')}:${bs.getOption('port')}`;
-
   const browserTargetRun = context.scheduleTarget(browserTarget, {
     serviceWorker: false,
     watch: true,
@@ -136,7 +135,7 @@ export function execute(
 
         return of(builderOutput);
       } else {
-        return from(initBrowserSync(bsInstance, nodeServerPort, options))
+        return from(initBrowserSync(bsInstance, nodeServerPort, options, context))
           .pipe(
             tap(bs => {
               const baseUrl = getBaseUrl(bs);
@@ -207,6 +206,7 @@ async function initBrowserSync(
   browserSyncInstance: browserSync.BrowserSyncInstance,
   nodeServerPort: number,
   options: SSRDevServerBuilderOptions,
+  context: BuilderContext,
 ): Promise<browserSync.BrowserSyncInstance> {
   if (browserSyncInstance.active) {
     return browserSyncInstance;
@@ -237,6 +237,7 @@ async function initBrowserSync(
     ghostMode: false,
     logLevel: 'silent',
     open,
+    https: getSslConfig(context.workspaceRoot, options),
   };
 
   const publicHostNormalized = publicHost && publicHost.endsWith('/')
@@ -306,4 +307,19 @@ function mapErrorToMessage(error: unknown): string {
   return '';
 }
 
+function getSslConfig(
+  root: string,
+  options: SSRDevServerBuilderOptions,
+): browserSync.HttpsOptions | undefined | boolean {
+  const { ssl, sslCert, sslKey } = options;
+  if (ssl && sslCert && sslKey) {
+    return {
+      key: pathResolve(root, sslKey),
+      cert: pathResolve(root, sslCert),
+    };
+  }
+
+  return ssl;
+}
+
 export default createBuilder<SSRDevServerBuilderOptions, BuilderOutput>(execute);

modules/builders/src/ssr-dev-server/schema.json

@@ -42,6 +42,19 @@
       "type": "boolean",
       "description": "Launch the development server in inspector mode and listen on address and port '127.0.0.1:9229'.",
       "default": false
+    },
+    "ssl": {
+      "type": "boolean",
+      "description": "Serve using HTTPS.",
+      "default": false
+    },
+    "sslKey": {
+      "type": "string",
+      "description": "SSL key to use for serving HTTPS."
+    },
+    "sslCert": {
+      "type": "string",
+      "description": "SSL certificate to use for serving HTTPS."
     }
   },
   "additionalProperties": false,

modules/builders/src/ssr-dev-server/schema.ts

@@ -33,4 +33,13 @@ export interface Schema {
    * Use for a complex dev server setup, such as one with reverse proxies.
    */
   publicHost?: string;
+
+  /** Serve using HTTPS. */
+  ssl?: boolean;
+
+  /** SSL key to use for serving HTTPS. */
+  sslKey?: string;
+
+  /** SSL certificate to use for serving HTTPS. */
+  sslCert?: string;
 }