build: switch to http server rule from dev-infra

Switches the dev-app and e2e-app to the http server rule exposed
by the shared dev-infra code.

Author: devversion

.gitignore

@@ -50,6 +50,3 @@ testem.log
 *.log
 .ng-dev.user*
 .husky/_
-
-# Variables that are inlined into the dev app index.html
-/src/dev-app/variables.json

DEV_ENVIRONMENT.md

@@ -78,8 +78,18 @@ export HUSKY=0
 ```
 
 ### Injecting variables into the dev app
-Variables can be injected into the dev app by creating the `src/dev-app/variables.json` file.
-They'll be made available under the `window.DEV_APP_VARIABLES` object. The file isn't checked into
-Git and it can be used to pass private configuration like API keys. Variables currently being used:
+
+A set of environment variables is made available within the dev-app. Such variables
+will be injected into the dev-app, so that e.g. API keys can be used for development
+without requiring secrets to be committed. 
+
+The following variables are currently used in the dev-app:
 
 * `GOOGLE_MAPS_KEY` - Optional key for the Google Maps API.
+
+For example, you can store a personal development Google Maps API key for the
+dev-app within your `.bashrc` or `.zshrc` file.
+
+```bash
+export GOOGLE_MAPS_KEY=<api-key>
+```

src/cdk/testing/tests/webdriver-test.bzl

@@ -26,7 +26,7 @@ def webdriver_test(name, deps, tags = [], **kwargs):
 
     server_test(
         name = "%s_chromium" % name,
-        server = "//src/e2e-app:devserver",
+        server = "//src/e2e-app:server",
         test = ":%s_chromium_web_test" % name,
         tags = tags + ["e2e"],
     )

src/dev-app/BUILD.bazel

@@ -1,6 +1,5 @@
 load("@build_bazel_rules_nodejs//:index.bzl", "pkg_web")
-load("//tools:defaults.bzl", "devmode_esbuild", "esbuild_config", "ng_module", "sass_binary")
-load("//tools/dev-server:index.bzl", "dev_server")
+load("//tools:defaults.bzl", "devmode_esbuild", "esbuild_config", "http_server", "ng_module", "sass_binary")
 load("//src/components-examples:config.bzl", "ALL_EXAMPLES")
 load("//tools/angular:index.bzl", "LINKER_PROCESSED_FW_PACKAGES")
 
@@ -165,7 +164,7 @@ filegroup(
     ],
 )
 
-dev_server(
+http_server(
     name = "devserver",
     srcs = [":dev_app_static_files"],
     additional_root_paths = [
@@ -174,6 +173,13 @@ dev_server(
         # artifact output as workspace root.
         "angular_material",
     ],
+    enable_dev_ui = True,
+    # List of environment variables that will be made available as `window.<NAME>` in the
+    # served `index.html` throuhg an injected script. Useful for allowing developers to
+    # configure API keys without requiring secrets to be committed.
+    environment_variables = [
+        "GOOGLE_MAPS_KEY",
+    ],
     tags = ["manual"],
     deps = [
         ":bundles",

src/dev-app/index.html

@@ -23,13 +23,14 @@
   <script src="https://www.youtube.com/iframe_api"></script>
   <script src="https://unpkg.com/@googlemaps/markerclustererplus/dist/index.min.js"></script>
   <script>
-    (function loadGoogleMaps(variables) {
-      var key = variables ? variables.GOOGLE_MAPS_KEY : null;
-      var script = document.createElement('script');
+    (function loadGoogleMaps() {
+      // Key can be set through the `GOOGLE_MAPS_KEY` environment variable.
+      const key = window.GOOGLE_MAPS_KEY;
+      const script = document.createElement('script');
       script.src = 'https://maps.googleapis.com/maps/api/js?libraries=visualization' +
         (key ? '&key=' + key : '');
       document.body.appendChild(script);
-    })(window.DEV_APP_VARIABLES);
+    })();
   </script>
   <script src="bundles/dev-app/main.js" type="module"></script>
 </body>

src/e2e-app/BUILD.bazel

@@ -1,5 +1,4 @@
-load("//tools/dev-server:index.bzl", "dev_server")
-load("//tools:defaults.bzl", "devmode_esbuild", "esbuild_config", "ng_module", "sass_binary")
+load("//tools:defaults.bzl", "devmode_esbuild", "esbuild_config", "http_server", "ng_module", "sass_binary")
 load("//src/components-examples:config.bzl", "ALL_EXAMPLES")
 load("//tools/angular:index.bzl", "LINKER_PROCESSED_FW_PACKAGES")
 
@@ -119,8 +118,8 @@ devmode_esbuild(
     ],
 )
 
-dev_server(
-    name = "devserver",
+http_server(
+    name = "server",
     testonly = True,
     srcs = devserverIndexHtmlDependencies,
     additional_root_paths = [

src/e2e-app/test_suite.bzl

@@ -9,7 +9,7 @@ def e2e_test_suite(name, data = [], tags = ["e2e"], deps = []):
             "@npm//@axe-core/webdriverjs",
         ] + data,
         on_prepare = "//src/e2e-app:start-devserver.js",
-        server = "//src/e2e-app:devserver",
+        server = "//src/e2e-app:server",
         tags = tags,
         deps = deps,
     )

tools/defaults.bzl

@@ -7,6 +7,7 @@ load("@npm//@angular/bazel:index.bzl", _ng_module = "ng_module", _ng_package = "
 load("@npm//@angular/dev-infra-private/bazel/integration:index.bzl", _integration_test = "integration_test")
 load("@npm//@angular/dev-infra-private/bazel/esbuild:index.bzl", _esbuild = "esbuild", _esbuild_config = "esbuild_config")
 load("@npm//@angular/dev-infra-private/bazel/spec-bundling:index.bzl", _spec_bundle = "spec_bundle")
+load("@npm//@angular/dev-infra-private/bazel/http-server:index.bzl", _http_server = "http_server")
 load("@npm//@angular/dev-infra-private/bazel:extract_js_module_output.bzl", "extract_js_module_output")
 load("@npm//@bazel/jasmine:index.bzl", _jasmine_node_test = "jasmine_node_test")
 load("@npm//@bazel/concatjs:index.bzl", _karma_web_test = "karma_web_test", _karma_web_test_suite = "karma_web_test_suite")
@@ -31,6 +32,7 @@ markdown_to_html = _markdown_to_html
 integration_test = _integration_test
 esbuild = _esbuild
 esbuild_config = _esbuild_config
+http_server = _http_server
 
 def _make_tsec_test(target):
     package_name = native.package_name()