feat(@angular-devkit/build-angular): support SSL options with esbuild development server

clydin · angular-robot[bot] · commit e4883b0ee1d1 · 2023-04-05T16:07:33.000Z
When using the esbuild-based browser application builder and its newly supported development
server, the SSL related `dev-server` builder options can now be used. These include the existing
`ssl`, `sslCert`, and `sslKey` options. Additionally, if no certificate and key are provided
the `@vitejs/plugin-basic-ssl` plugin will be used to provide an auto-generated one.
diff --git a/package.json b/package.json
@@ -126,6 +126,7 @@
     "@typescript-eslint/eslint-plugin": "5.57.1",
     "@typescript-eslint/parser": "5.57.1",
     "@yarnpkg/lockfile": "1.1.0",
+    "@vitejs/plugin-basic-ssl": "1.0.1",
     "ajv": "8.12.0",
     "ajv-formats": "2.1.1",
     "ansi-colors": "4.1.3",
diff --git a/packages/angular_devkit/build_angular/BUILD.bazel b/packages/angular_devkit/build_angular/BUILD.bazel
@@ -75,14 +75,14 @@ ts_library(
         ],
     ) + [
         "//packages/angular_devkit/build_angular:src/builders/app-shell/schema.ts",
-        "//packages/angular_devkit/build_angular:src/builders/browser/schema.ts",
         "//packages/angular_devkit/build_angular:src/builders/browser-esbuild/schema.ts",
+        "//packages/angular_devkit/build_angular:src/builders/browser/schema.ts",
         "//packages/angular_devkit/build_angular:src/builders/dev-server/schema.ts",
         "//packages/angular_devkit/build_angular:src/builders/extract-i18n/schema.ts",
         "//packages/angular_devkit/build_angular:src/builders/karma/schema.ts",
+        "//packages/angular_devkit/build_angular:src/builders/ng-packagr/schema.ts",
         "//packages/angular_devkit/build_angular:src/builders/protractor/schema.ts",
         "//packages/angular_devkit/build_angular:src/builders/server/schema.ts",
-        "//packages/angular_devkit/build_angular:src/builders/ng-packagr/schema.ts",
     ],
     data = glob(
         include = [
@@ -131,6 +131,7 @@ ts_library(
         "@npm//@types/node",
         "@npm//@types/semver",
         "@npm//@types/text-table",
+        "@npm//@vitejs/plugin-basic-ssl",
         "@npm//ajv",
         "@npm//ansi-colors",
         "@npm//autoprefixer",
diff --git a/packages/angular_devkit/build_angular/package.json b/packages/angular_devkit/build_angular/package.json
@@ -22,6 +22,7 @@
     "@babel/template": "7.20.7",
     "@discoveryjs/json-ext": "0.5.7",
     "@ngtools/webpack": "0.0.0-PLACEHOLDER",
+    "@vitejs/plugin-basic-ssl": "1.0.1",
     "ansi-colors": "4.1.3",
     "autoprefixer": "10.4.14",
     "babel-loader": "9.1.2",
diff --git a/packages/angular_devkit/build_angular/src/builders/dev-server/vite-server.ts b/packages/angular_devkit/build_angular/src/builders/dev-server/vite-server.ts
@@ -10,6 +10,7 @@ import type { BuilderContext } from '@angular-devkit/architect';
 import type { json } from '@angular-devkit/core';
 import assert from 'node:assert';
 import { BinaryLike, createHash } from 'node:crypto';
+import { readFile } from 'node:fs/promises';
 import type { AddressInfo } from 'node:net';
 import path from 'node:path';
 import { InlineConfig, ViteDevServer, createServer, normalizePath } from 'vite';
@@ -186,7 +187,6 @@ async function setupServer(
       host: serverOptions.host,
       open: serverOptions.open,
       headers: serverOptions.headers,
-      https: serverOptions.ssl,
       proxy,
       // Currently does not appear to be a way to disable file watching directly so ignore all files
       watch: {
@@ -271,6 +271,21 @@ async function setupServer(
     },
   };
 
+  if (serverOptions.ssl) {
+    if (serverOptions.sslCert && serverOptions.sslKey) {
+      // server configuration is defined above
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      configuration.server!.https = {
+        cert: await readFile(serverOptions.sslCert),
+        key: await readFile(serverOptions.sslKey),
+      };
+    } else {
+      const { default: basicSslPlugin } = await import('@vitejs/plugin-basic-ssl');
+      configuration.plugins ??= [];
+      configuration.plugins.push(basicSslPlugin());
+    }
+  }
+
   const server = await createServer(configuration);
 
   return server;
diff --git a/yarn.lock b/yarn.lock
@@ -3927,6 +3927,11 @@
     minimatch "3.1.2"
     semver "7.3.8"
 
+"@vitejs/plugin-basic-ssl@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-basic-ssl/-/plugin-basic-ssl-1.0.1.tgz#48c46eab21e0730921986ce742563ae83fe7fe34"
+  integrity sha512-pcub+YbFtFhaGRTo1832FQHQSHvMrlb43974e2eS8EKleR3p1cDdkJFPci1UhwkEf1J9Bz+wKBSzqpKp7nNj2A==
+
 "@webassemblyjs/ast@1.11.1":
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.1.tgz#2bfd767eae1a6996f432ff7e8d7fc75679c0b6a7"
