Extract user configuration into separate userconfig.js file

This file can be modified easily even after building the Threema Web app
bundle. In the Docker setup, this replaces the error-prone "sed" based
search & replace approach.

Dockerfile

@@ -25,8 +25,6 @@ RUN rm /usr/share/nginx/html/*
 COPY --from=builder /opt/threema-web/release/threema-web-* /usr/share/nginx/html/
 COPY docker/entrypoint.sh /usr/local/bin/
 
-ENV SALTYRTC_HOST="" \
-    SALTYRTC_PORT=443 \
-    SALTYRTC_SERVER_KEY="b1337fc8402f7db8ea639e05ed05d65463e24809792f91eca29e88101b4a2171"
+EXPOSE 80
 
 CMD ["/bin/sh", "/usr/local/bin/entrypoint.sh"]

README.md

@@ -124,9 +124,10 @@ You can also install a pre-push hook to do the linting:
 
 ## Configuration
 
-The configuration of Threema Web can be tweaked in `src/config.ts`:
+The configuration of Threema Web can be tweaked in `src/config.ts` and
+`src/userconfig.js`:
 
-**General**
+**General (Config)**
 
 - `SELF_HOSTED`: Set this to `true` if this instance of Threema Web isn't being
   hosted on `web.threema.ch`.
@@ -135,7 +136,7 @@ The configuration of Threema Web can be tweaked in `src/config.ts`:
   previous protocol version. If set to something different than `null`, a
   message will be shown to the user if reconnecting fails.
 
-**SaltyRTC**
+**SaltyRTC (Userconfig)**
 
 - `SALTYRTC_HOST`: Set this to the hostname of the SaltyRTC server that you
   want to use. If supplied, the substring `{prefix}` will be replaced by the
@@ -146,16 +147,24 @@ The configuration of Threema Web can be tweaked in `src/config.ts`:
   this value to `null` if your server does not provide a public permanent key,
   or if you don't want to verify it.
 
-**ICE**
+**ICE (Userconfig)**
 
 - `ICE_SERVERS`: Configuration object for the WebRTC STUN and ICE servers.
   Each URL may contain the substring `{prefix}`, which will be replaced by a
   random byte represented as a lowercase hexadecimal value.
 
-**Push**
+**Push (Userconfig)**
 
 - `PUSH_URL`: The server URL used to deliver push notifications to the app.
 
+**Fonts (Userconfig)**
+
+Note: If you want to use the Lab Grotesque font in your self-hosted instance
+(with SELF_HOSTED=true), you need to obtain a license for it and update the
+font URL below. Otherwise, Threema Web will fall back to Roboto.
+
+- `FONT_CSS_URL`: URL to the Lab Grotesque font.
+
 
 ## Self Hosting
 

dist/package.sh

@@ -45,8 +45,8 @@ mkdir -p $DIR/{partials,directives,components,node_modules,partials/messenger.re
 
 echo "+ Copy code..."
 cp -R index.html $DIR/
-cp -R dist/generated/*.bundle.js $DIR/
-cp -R dist/generated/*.bundle.js.map $DIR/
+cp -R dist/generated/*.js $DIR/
+cp -R dist/generated/*.js.map $DIR/
 cp -R dist/generated/*.wasm $DIR/
 cp -R public/* $DIR/
 cp -R troubleshoot/* $DIR/troubleshoot/

docker/entrypoint.sh

@@ -2,13 +2,22 @@
 set -euo pipefail
 
 # Patch config file
-echo "Patching config file..."
+echo "Patching userconfig file..."
 cd /usr/share/nginx/html/
-if [ ! -z "$SALTYRTC_HOST" ]; then
-    sed -i -E "s/SALTYRTC_HOST:\s*null,/SALTYRTC_HOST:'${SALTYRTC_HOST}',/g" *.bundle.js
+if [[ ! -f userconfig.js ]]; then
+    echo "Error: Userconfig not found"
+    exit 1
+fi
+echo '// Overrides by entrypoint.sh' >> userconfig.js
+if [ ! -z "${SALTYRTC_HOST:-}" ]; then
+    echo "window.UserConfig.SALTYRTC_HOST = '${SALTYRTC_HOST}';" >> userconfig.js
+fi
+if [ ! -z "${SALTYRTC_PORT:-}" ]; then
+    echo "window.UserConfig.SALTYRTC_PORT = ${SALTYRTC_PORT};" >> userconfig.js
+fi
+if [ ! -z "${SALTYRTC_SERVER_KEY:-}" ]; then
+    echo "window.UserConfig.SALTYRTC_SERVER_KEY = '${SALTYRTC_SERVER_KEY}';" >> userconfig.js
 fi
-sed -i -E "s/SALTYRTC_PORT:\s*[^,]*,/SALTYRTC_PORT:${SALTYRTC_PORT},/g" *.bundle.js
-sed -i -E "s/SALTYRTC_SERVER_KEY:\s*\"[^\"]*\",/SALTYRTC_SERVER_KEY:\"${SALTYRTC_SERVER_KEY}\",/g" *.bundle.js
 
 # Add nginx mime type for wasm
 # See https://trac.nginx.org/nginx/ticket/1606

docs/docker.md

@@ -21,7 +21,8 @@ mechanisms in your web server.
 
 ## Config Variables
 
-- `SALTYRTC_HOST`: The SaltyRTC signaling server hostname (default `null`)
+- `SALTYRTC_HOST`: The SaltyRTC signaling server hostname
+  (default `saltyrtc-{prefix}.threema.ch`)
 - `SALTYRTC_PORT`: The SaltyRTC signaling server port (default `443`)
 - `SALTYRTC_SERVER_KEY`: The SaltyRTC signaling server public key
   (default `"b1337fc8402f7db8ea639e05ed05d65463e24809792f91eca29e88101b4a2171"`)

index.html

@@ -167,6 +167,7 @@ <h1 id="title" aria-label="Threema Web Logo">
     <script src="node_modules/croppie/croppie.min.js?v=[[VERSION]]"></script>
 
     <!-- App -->
+    <script src="userconfig.js?v=[[VERSION]]"></script>
     <script src="app.bundle.js?v=[[VERSION]]"></script>
     <script src="js/compat.js?v=[[VERSION]]"></script>
 

package.json

@@ -62,6 +62,7 @@
     "angularjs-scroll-glue": "=2.1.0",
     "autolinker": "^3.14.3",
     "babel-loader": "^8.2.3",
+    "copy-webpack-plugin": "^9.1.0",
     "core-js": "^3.18.3",
     "croppie": "^2.6.5",
     "emojibase-regex": "^4.1.1",