Pre-compile frontend and add environment config script

front/webpack.config.ts

@@ -1,5 +1,6 @@
 import type { Configuration } from "webpack";
 import type WebpackDevServer from "webpack-dev-server";
+import fs from 'fs/promises';
 import path from "path";
 import webpack from "webpack";
 import HtmlWebpackPlugin from "html-webpack-plugin";
@@ -33,6 +34,35 @@ module.exports = {
             disableDotRule: true,
         },
         liveReload: process.env.LIVE_RELOAD != "0" && process.env.LIVE_RELOAD != "false",
+        before: (app) => {
+            let appConfigContent = '';
+            const TEMPLATE_PATH = path.join(__dirname, 'dist', 'env-config.template.js');
+
+            function renderTemplateWithEnvVars(content: string): string {
+                let result = content;
+                const regex = /\$\{([a-zA-Z_]+[a-zA-Z0-9_]*?)\}/g;
+
+                let matched: RegExpExecArray | null;
+                while ((matched = regex.exec(content))) {
+                  result = result.replace(`\${${matched[1]}}`, process.env[matched[1]] || '');
+                }
+
+                return result;
+            }
+
+            void (async () => {
+              const content = (await fs.readFile(TEMPLATE_PATH)).toString();
+              appConfigContent = renderTemplateWithEnvVars(content);
+            })();
+
+            app.get('/env-config.js', (_, response) => {
+                response.setHeader('Content-Type', 'application/javascript; charset=utf-8');
+                response.setHeader('Cache-Control', 'no-cache');
+                response.setHeader('Content-Length', Buffer.byteLength(appConfigContent, 'utf8'));
+
+                response.send(appConfigContent);
+            });
+        },
     },
     module: {
         rules: [
@@ -168,7 +198,7 @@ module.exports = {
         }),
         new MiniCssExtractPlugin({ filename: "[name].[contenthash].css" }),
         new HtmlWebpackPlugin({
-            template: "./dist/index.tmpl.html.tmp",
+            template: "./dist/index.ejs",
             minify: {
                 collapseWhitespace: true,
                 keepClosingSlash: true,
@@ -184,32 +214,5 @@ module.exports = {
             Phaser: "phaser",
         }),
         new NodePolyfillPlugin(),
-        new webpack.EnvironmentPlugin({
-            API_URL: null,
-            SKIP_RENDER_OPTIMIZATIONS: false,
-            DISABLE_NOTIFICATIONS: false,
-            PUSHER_URL: undefined,
-            UPLOADER_URL: null,
-            ADMIN_URL: null,
-            CONTACT_URL: null,
-            PROFILE_URL: null,
-            ICON_URL: null,
-            DEBUG_MODE: null,
-            STUN_SERVER: null,
-            TURN_SERVER: null,
-            TURN_USER: null,
-            TURN_PASSWORD: null,
-            JITSI_URL: null,
-            JITSI_PRIVATE_MODE: null,
-            START_ROOM_URL: null,
-            MAX_USERNAME_LENGTH: 8,
-            MAX_PER_GROUP: 4,
-            DISPLAY_TERMS_OF_USE: false,
-            POSTHOG_API_KEY: null,
-            POSTHOG_URL: null,
-            NODE_ENV: mode,
-            DISABLE_ANONYMOUS: false,
-            OPID_LOGIN_SCREEN_PROVIDER: null,
-        }),
     ],
 } as Configuration & WebpackDevServer.Configuration;