Self-host FluentUI assets

cmd/portal/Dockerfile

@@ -41,6 +41,8 @@ ARG GIT_HASH
 # If the working directory is /src, Parcel will have some problem with it.
 WORKDIR /usr/src/app
 COPY ./portal/package.json ./portal/package-lock.json ./
+# Copy the scripts
+COPY ./portal/scripts/. ./scripts/.
 # Copy the vite plugin
 COPY ./portal/packages/. ./packages/.
 RUN npm ci

custombuild/cmd/portalx/Dockerfile

@@ -59,6 +59,8 @@ ARG GIT_HASH
 # If the working directory is /src, Parcel will have some problem with it.
 WORKDIR /usr/src/app
 COPY ./portal/package.json ./portal/package-lock.json ./
+# Copy the scripts
+COPY ./portal/scripts/. ./scripts/.
 # Copy the vite plugin
 COPY ./portal/packages/. ./packages/.
 RUN npm ci

portal/package.json

@@ -6,6 +6,7 @@
   ],
   "type": "module",
   "scripts": {
+    "postinstall": "./scripts/npm-postinstall.sh",
     "test": "jest",
     "start": "vite",
     "build": "vite build",
@@ -60,6 +61,7 @@
     "@apollo/client": "3.8.7",
     "@authgear/web": "1.0.1",
     "@elgorditosalsero/react-gtm-hook": "2.7.2",
+    "@fluentui/font-icons-mdl2": "^8.5.55",
     "@fluentui/merge-styles": "^8.6.13",
     "@fluentui/react": "^8.121.13",
     "@fluentui/react-hooks": "^8.8.16",

portal/scripts/npm-postinstall.sh

@@ -0,0 +1,45 @@
+#!/bin/sh
+
+set -x
+
+# This is how we self-host the runtime assets of FluentUI.
+#
+# We utilize the public directory feature of Vite.
+# See https://v2.vitejs.dev/guide/assets.html#the-public-directory
+# This feature merely copies the files in the public directory to the root of the outDir.
+# Since we use FileServer to serve asset, assets have to be put in the asset directory.
+# We automate this copy process with a NPM postinstall script. (This script)
+#
+# Finally we tell fluentui to load the assets from the portal backend, instead of from the default CDN.
+# This is done with window.FabricConfig.
+
+# In docker build, the postinstall runs before the src are copied.
+# So we run mkdir -p to ensure the directory exist.
+mkdir -p ./src/public/shared-assets/
+# In case you wonder why we do not just use shell expansion here,
+# if ./src/public/shared-assets is really empty, sh DOES NOT expand, and take '*' literally.
+# Since we do not have such a file, the command will fail.
+find ./src/public/shared-assets -name 'fabric-icons-*.woff' -print -exec rm '{}' \;
+# When window.FabricConfig.iconBaseUrl is set, it loads the font directly in the directory.
+# So we just copy the fonts to outDir.
+cp -r ./node_modules/@fluentui/font-icons-mdl2/fonts/. ./src/public/shared-assets/.
+
+# When window.FabricConfig.fontBaseUrl is set, it loads the font with a certain structure.
+# The original URL is https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-bold.woff2
+# When fontBaseUrl is set, the URL looks like https://origin/shared-assets/fonts/segoeui-westeuropean/segoeui-bold.woff2
+
+# FluentUI actually has support for many fonts.
+# For the full list of the fonts it may load at runtime, see ./node_modules/@fluentui/react/dist/css/fabric.css
+# Since our site is lang=en, it will ever load "Segoe UI Web (West European)"
+# So we just download and copy them.
+# Since this process has to be done once only, the following commands are commented out.
+# wget https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-light.woff2 -O ./src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-light.woff2
+# wget https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-light.woff -O ./src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-light.woff
+# wget https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semilight.woff2 -O ./src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-semilight.woff2
+# wget https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semilight.woff -O ./src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-semilight.woff
+# wget https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-regular.woff2 -O ./src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-regular.woff2
+# wget https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-regular.woff -O ./src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-regular.woff
+# wget https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semibold.woff2 -O ./src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-semibold.woff2
+# wget https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semibold.woff -O ./src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-semibold.woff
+# wget https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-bold.woff2 -O ./src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-bold.woff2
+# wget https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-bold.woff -O ./src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-bold.woff

portal/src/index.html

@@ -16,6 +16,14 @@
         display: none;
       }
     </style>
+    <script>
+      window.FabricConfig = {
+        // The lack of trailing slash is important.
+        fontBaseUrl: window.location.origin + "/shared-assets",
+        // The trailing slash is important.
+        iconBaseUrl: window.location.origin + "/shared-assets/",
+      };
+    </script>
     <link rel="shortcut icon" href="./favicon.png" />
     <link rel="stylesheet" href="./index.css" />
     <link rel="stylesheet" href="./icons/authgear-portal-icons.css" />