Vite embedded build of Element Call (#3077)

* Embedded package build of Element Call

Part of #2994

This creates a new "embedded" build (vs "full" build) at the vite level. It will be used by a later PR that actually provides platform specific packages.

Embedded build:

- Uses relative URLs
- Uses relative config.json path and other resource loading
- Has a config.json built in
- Doesn't include the public folder (e.g. favicon)

Out of scope:

- this doesn't attempt to exclude SPA functionality, so technically the build could be used in SPA
- the above means that the crypto-wasm binary is included in the build

* CI artifact name based on type of build

* Update src/config/Config.ts

Author: hughns

.github/workflows/build-and-publish-docker.yaml

@@ -30,7 +30,7 @@ jobs:
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           run-id: ${{ inputs.artifact_run_id }}
-          name: build-output
+          name: build-output-full
           path: dist
 
       - name: Log in to container registry

.github/workflows/build-element-call.yaml

@@ -5,6 +5,10 @@ on:
       vite_app_version:
         required: true
         type: string
+      package:
+        type: string # This would ideally be a `choice` type, but that isn't supported yet
+        description: The package type to be built. Must be one of 'full' or 'embedded'
+        required: true
     secrets:
       SENTRY_ORG:
         required: true
@@ -31,8 +35,20 @@ jobs:
           node-version-file: ".node-version"
       - name: Install dependencies
         run: "yarn install --frozen-lockfile"
-      - name: Build
-        run: "yarn run build"
+      - name: Build full version
+        if: ${{ inputs.package == 'full' }}
+        run: "yarn run build:full"
+        env:
+          SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
+          SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
+          SENTRY_URL: ${{ secrets.SENTRY_URL }}
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+          VITE_APP_VERSION: ${{ inputs.vite_app_version }}
+          NODE_OPTIONS: "--max-old-space-size=4096"
+      - name: Build embedded
+        if: ${{ inputs.package == 'embedded' }}
+        run: "yarn run build:embedded"
         env:
           SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
           SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
@@ -44,7 +60,7 @@ jobs:
       - name: Upload Artifact
         uses: actions/upload-artifact@4cec3d8aa04e39d1a68397de0c4cd6fb9dce8ec1 # v4
         with:
-          name: build-output
+          name: build-output-${{ inputs.package }}
           path: dist
           # We'll only use this in a triggered job, then we're done with it
           retention-days: 1

.github/workflows/build.yaml

@@ -16,9 +16,11 @@ on:
       - ".github/CODEOWNERS"
       - "docs/**"
 jobs:
-  build_element_call:
+  build_full_element_call:
+    # Use the full package vite build
     uses: ./.github/workflows/build-element-call.yaml
     with:
+      package: full
       vite_app_version: ${{ github.event.release.tag_name || github.sha }}
     secrets:
       SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
@@ -29,7 +31,7 @@ jobs:
   deploy_develop:
     # Deploy livekit branch to call.element.dev after build completes
     if: github.ref == 'refs/heads/livekit'
-    needs: build_element_call
+    needs: build_full_element_call
     runs-on: ubuntu-latest
     steps:
       - name: Deploy to call.element.dev
@@ -50,7 +52,7 @@ jobs:
   docker_for_develop:
     # Build docker and publish docker for livekit branch after build completes
     if: github.ref == 'refs/heads/livekit'
-    needs: build_element_call
+    needs: build_full_element_call
     permissions:
       contents: write
       packages: write
@@ -61,3 +63,15 @@ jobs:
         type=sha,format=short,event=branch
         type=raw,value=latest-ci
         type=raw,value=latest-ci_{{date 'X' }}
+  build_embedded_element_call:
+    # Use the embedded package vite build
+    uses: ./.github/workflows/build-element-call.yaml
+    with:
+      package: embedded
+      vite_app_version: ${{ github.event.release.tag_name || github.sha }}
+    secrets:
+      SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
+      SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
+      SENTRY_URL: ${{ secrets.SENTRY_URL }}
+      SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+      CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}

.github/workflows/deploy-to-netlify.yaml

@@ -50,7 +50,7 @@ jobs:
         with:
           github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
           run-id: ${{ inputs.artifact_run_id }}
-          name: build-output
+          name: build-output-full
           path: webapp
 
       - name: Add redirects file

.github/workflows/publish.yaml

@@ -13,6 +13,7 @@ jobs:
     if: ${{ github.event_name == 'release' }}
     uses: ./.github/workflows/build-element-call.yaml
     with:
+      package: full
       vite_app_version: ${{ github.event.release.tag_name || github.sha }}
     secrets:
       SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
@@ -38,7 +39,7 @@ jobs:
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           run-id: ${{ github.event.workflow_run.id || github.run_id }}
-          name: build-output
+          name: build-output-full
           path: dist
       - name: Create Tarball
         env:

public/index.html renamed to index.html

@@ -2,8 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+
+    <% if (packageType === "full") { %>
     <link rel="icon" type="image/svg+xml" href="favicon.png" />
     <link rel="preload" href="/config.json" as="fetch" />
+    <% } %>
+
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
@@ -13,6 +17,7 @@
       window.global = window;
     </script>
 
+    <% if (packageType === "full") { %>
     <!-- Open graph meta tags -->
 
     <meta property="og:title" content="<%- brand %>" />
@@ -30,6 +35,7 @@
       content="You're invited to join a call on <%- brand %>"
     />
     <meta name="twitter:image" content="favicon.png" />
+    <% } %>
   </head>
 
   <!-- The default class is: .no-theme {display: none}. It will be overwritten once the app is loaded. -->

knip.ts

@@ -1,6 +1,9 @@
 import { KnipConfig } from "knip";
 
 export default {
+  vite: {
+    config: ["vite.config.js", "vite-embedded.config.js"],
+  },
   entry: ["src/main.tsx", "i18next-parser.config.ts"],
   ignoreBinaries: [
     // This is deprecated, so Knip doesn't actually recognize it as a globally

package.json

@@ -3,8 +3,12 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "NODE_OPTIONS=--max-old-space-size=16384 vite build",
+    "dev": "yarn dev:full",
+    "dev:full": "vite",
+    "dev:embedded": "vite --config vite-embedded.config.js",
+    "build": "yarn build:full",
+    "build:full": "NODE_OPTIONS=--max-old-space-size=16384 vite build",
+    "build:embedded": "yarn build:full --config vite-embedded.config.js",
     "serve": "vite preview",
     "prettier:check": "prettier -c .",
     "prettier:format": "prettier -w .",
@@ -114,7 +118,8 @@
     "unique-names-generator": "^4.6.0",
     "vaul": "^1.0.0",
     "vite": "^6.0.0",
-    "vite-plugin-html-template": "^1.1.0",
+    "vite-plugin-generate-file": "^0.2.0",
+    "vite-plugin-html": "^3.2.2",
     "vite-plugin-svgr": "^4.0.0",
     "vitest": "^3.0.0",
     "vitest-axe": "^1.0.0-pre.3"

src/config/Config.ts

@@ -29,7 +29,20 @@ export class Config {
       const internalInstance = new Config();
       Config.internalInstance = internalInstance;
 
-      Config.internalInstance.initPromise = downloadConfig("/config.json").then(
+      let fetchTarget: string;
+
+      if (
+        window.location.pathname.endsWith("/room/") ||
+        window.location.pathname.endsWith("/room")
+      ) {
+        // it looks like we are running in standalone mode so use the config at the root
+        fetchTarget = new URL("/config.json", window.location.href).href;
+      } else {
+        // otherwise we are probably running as a widget so use the config in the same directory
+        fetchTarget = "config.json";
+      }
+
+      Config.internalInstance.initPromise = downloadConfig(fetchTarget).then(
         (config) => {
           internalInstance.config = merge({}, DEFAULT_CONFIG, config);
         },
@@ -71,11 +84,8 @@ export class Config {
   private initPromise?: Promise<void>;
 }
 
-async function downloadConfig(
-  configJsonFilename: string,
-): Promise<ConfigOptions> {
-  const url = new URL(configJsonFilename, window.location.href);
-  const response = await fetch(url);
+async function downloadConfig(fetchTarget: string): Promise<ConfigOptions> {
+  const response = await fetch(fetchTarget);
 
   if (isFailure(response)) {
     // Lack of a config isn't an error, we should just use the defaults.

vite-embedded.config.js

@@ -0,0 +1,31 @@
+import { defineConfig, mergeConfig } from "vite";
+import fullConfig from "./vite.config";
+import generateFile from "vite-plugin-generate-file";
+
+const base = "./";
+
+// Config for embedded deployments (possibly hosted under a non-root path)
+export default defineConfig((env) =>
+  mergeConfig(
+    fullConfig({ ...env, packageType: "embedded" }),
+    defineConfig({
+      base, // Use relative URLs to allow the app to be hosted under any path
+      publicDir: false, // Don't serve the public directory which only contains the favicon
+      plugins: [
+        generateFile([
+          {
+            type: "json",
+            output: "./config.json",
+            data: {
+              matrix_rtc_session: {
+                key_rotation_on_leave_delay: 15000,
+                membership_keep_alive_period: 5000,
+                membership_server_side_expiry_timeout: 15000,
+              },
+            },
+          },
+        ]),
+      ],
+    }),
+  ),
+);