webpack-ify import iframe and update hpke

Dockerfile

@@ -7,6 +7,10 @@ WORKDIR /app
 COPY export-and-sign ./export-and-sign/
 RUN cd export-and-sign && npm ci && npm run build
 
+# Copy import module and build
+COPY import ./import/
+RUN cd import && npm ci && npm run build
+
 # Second stage: nginx runtime
 # This is nginx 1.24.0 on bullseye.
 # https://hub.docker.com/layers/nginxinc/nginx-unprivileged/1.24.0-bullseye/images/sha256-a8ec652916ce1e7ab2ab624fe59bb8dfc16a018fd489c6fb979fe35c5dd3ec50
@@ -22,11 +26,12 @@ COPY nginx.conf /etc/nginx/nginx.conf
 # maintain recovery for backwards-compatibility
 COPY auth /usr/share/nginx/auth
 COPY auth /usr/share/nginx/recovery
+
 COPY export /usr/share/nginx/export
-COPY import /usr/share/nginx/import
 
-# Copy built export-and-sign files from builder stage
+# Copy built export-and-sign and import files from builder stage
 COPY --from=builder /app/export-and-sign/dist /usr/share/nginx/export-and-sign
+COPY --from=builder /app/import/dist /usr/share/nginx/import
 
 # oauth
 COPY oauth-origin /usr/share/nginx/oauth-origin

README.md

@@ -171,4 +171,57 @@ kubectl port-forward svc/frames 8080:8080
 To clean things up:
 ```
 k3d cluster delete frames
-```
+```
+
+# Building with Webpack
+
+You'll see that some of our iframes are built with webpack. Note that configurations may vary: some may have standalone HTML pages to serve separately (e.g. import), while others do not. Take a peek at some of the webpack config files for reference.
+
+## Testing and iterating with Webpack
+
+For iframes that utilize webpack, the development flows change a bit. Each change you make will likely require a subsequent `npm run build` to webpack-ify your changes. You can then test your changes with `npm run start` to view the site locally. 
+
+Furthermore, the trickier part is ensuring that built files (most of the time persisted in `/dist`) are accessible. See `Dockerfile`, `nginx.conf`, and `kustomize/base/resources.yaml` to see some example configurations.
+
+Finally, when iterating on an iframe and rebuilding, you may want to test locally with Docker + k8s. If you do so, you may need to add `imagePullPolicy: IfNotPresent` to both the `initContainers` and `containers` within `kustomize/base/resources.yaml`, and `newName: frames` + `newTag: latest` to `kustomize/base/kustomization.yaml`. This helps ensure you're using non-stale artifacts. 
+
+Example diff for `kustomize/base/kustomization.yaml`:
+
+```bash
+diff --git a/kustomize/base/kustomization.yaml b/kustomize/base/kustomization.yaml
+index a18fe46..7ef92e7 100644
+--- a/kustomize/base/kustomization.yaml
++++ b/kustomize/base/kustomization.yaml
+@@ -6,3 +6,5 @@ resources:
+   - resources.yaml
+ images:
+   - name: ghcr.io/tkhq/frames
++    newName: frames
++    newTag: latest
+```
+
+
+Overall, here's what you might do:
+
+```bash
+# (Re)-Build image
+docker build --no-cache -t frames:latest .
+
+# Import to k3d
+k3d image import frames:latest --cluster frames
+
+# Deploy
+kubectl kustomize kustomize | kubectl --context k3d-frames apply -f-
+
+# Test (with whichever ports are applicable for your iframe)
+kubectl port-forward svc/frames 8083:8083 --context k3d-frames
+```
+
+If testing in a live, non-local environment, you can point containers to a new image as follows:
+
+```
+# Update containers (main + init) to new image
+kubectl --context <context> -n tkhq-frames set image deployment/frames \
+  frames=ghcr.io/tkhq/frames@sha256:<digest> \
+  template-quorum-key=ghcr.io/tkhq/frames@sha256:<digest>
+```

import/dist/291.bundle.b62abe64ba4ebf68e89b.js

@@ -0,0 +1 @@
+(self.webpackChunkimport=self.webpackChunkimport||[]).push([[291],{291:()=>{}}]);

import/dist/825.bundle.3a4aff0e743a7540fe25.js

@@ -0,0 +1 @@
+(self.webpackChunkimport=self.webpackChunkimport||[]).push([[825],{825:()=>{}}]);

import/dist/common.bundle.a08f852097edf002c64d.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */