Remove env-config.js (#9331)

Fixes #5340 which had been open for a long time

packages/twenty-front/index.html

@@ -28,7 +28,13 @@
     />
 
     <title>Twenty</title>
-    <script src="/env-config.js"></script>
+    <!-- BEGIN: Twenty Config -->
+    <script id="twenty-env-config">
+      window._env_ = {
+        // This will be overwritten
+      };
+    </script>
+    <!-- END: Twenty Config -->
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">

packages/twenty-front/public/env-config.js

@@ -1,3 +0,0 @@
-window._env_ = {
-  // This file should stay empty. It will be overwritten by the build process.
-};

packages/twenty-front/scripts/inject-runtime-env.sh

@@ -1,12 +1,25 @@
 #!/bin/sh
-echo "Generating env-config.js file from runtime environment variables..."
 
-BASE_FILENAME="build/env-config.js"
+echo "Injecting runtime environment variables into index.html..."
-mkdir -p build
-rm -rf "./$BASE_FILENAME"
 
-{
+CONFIG_BLOCK=$(cat << EOF
-	echo "window._env_ = {"
+    <script id="twenty-env-config">
-	echo "  REACT_APP_SERVER_BASE_URL: \"$REACT_APP_SERVER_BASE_URL\","
+      window._env_ = {
-	echo "}"
+        REACT_APP_SERVER_BASE_URL: "$REACT_APP_SERVER_BASE_URL"
-} > "./$BASE_FILENAME"
+      };
+    </script>
+    <!-- END: Twenty Config -->
+EOF
+)
+# Use sed to replace the config block in index.html
+# Using pattern space to match across multiple lines
+sed -i.bak '
+  /<!-- BEGIN: Twenty Config -->/,/<!-- END: Twenty Config -->/{
+    /<!-- BEGIN: Twenty Config -->/!{
+      /<!-- END: Twenty Config -->/!d
+    }
+    /<!-- BEGIN: Twenty Config -->/r /dev/stdin
+    /<!-- END: Twenty Config -->/d
+  }
+' build/index.html <<< "$CONFIG_BLOCK"
+rm -f build/index.html.bak

packages/twenty-front/src/config/index.ts

@@ -12,12 +12,12 @@ const getDefaultUrl = () => {
   ) {
     // In development environment front and backend usually run on separate ports
     // we set the default value to localhost:3000.
-    // It dev context, we use env vars to overwrite it
+    // In dev context, we use env vars to overwrite it
     return 'http://localhost:3000';
   } else {
     // Outside of localhost we assume that they run on the same port
     // because the backend will serve the frontend
-    // It prod context, we use env-config.js + window var to ovewrite it
+    // In prod context, we use index.html + window var to ovewrite it
     return `${window.location.protocol}//${window.location.hostname}${
       window.location.port ? `:${window.location.port}` : ''
     }`;

packages/twenty-server/src/main.ts

@@ -80,7 +80,7 @@ const bootstrap = async () => {
     }),
   );
 
-  // Create the env-config.js of the front at runtime
+  // Inject the server url in the frontend page
   generateFrontConfig();
 
   // Enable session - Today it's used only for SSO

packages/twenty-server/src/utils/generate-front-config.ts

@@ -13,23 +13,29 @@ export function generateFrontConfig(): void {
     },
   };
 
-  const configString = `window._env_ = ${JSON.stringify(
+  const configString = `<!-- BEGIN: Twenty Config -->
-    configObject.window._env_,
+    <script id="twenty-env-config">
-    null,
+      window._env_ = ${JSON.stringify(configObject.window._env_, null, 2)};
-    2,
+    </script>
-  )};`;
+    <!-- END: Twenty Config -->`;
 
   const distPath = path.join(__dirname, '../..', 'front');
-  const filePath = path.join(distPath, 'env-config.js');
+  const indexPath = path.join(distPath, 'index.html');
 
-  if (!fs.existsSync(distPath)) {
+  if (!fs.existsSync(indexPath)) {
-    fs.mkdirSync(distPath, { recursive: true });
+    console.log(
+      'Frontend build not found, assuming it is served independently',
+    );
+
+    return;
   }
 
-  if (
+  let indexContent = fs.readFileSync(indexPath, 'utf8');
-    !fs.existsSync(filePath) ||
+
-    fs.readFileSync(filePath, 'utf8') !== configString
+  indexContent = indexContent.replace(
-  ) {
+    /<!-- BEGIN: Twenty Config -->[\s\S]*?<!-- END: Twenty Config -->/,
-    fs.writeFileSync(filePath, configString, 'utf8');
+    configString,
-  }
+  );
+
+  fs.writeFileSync(indexPath, indexContent, 'utf8');
 }

packages/twenty-ui/src/utilities/config/index.ts

@@ -12,12 +12,12 @@ const getDefaultUrl = () => {
   ) {
     // In development environment front and backend usually run on separate ports
     // we set the default value to localhost:3000.
-    // It dev context, we use env vars to overwrite it
+    // In dev context, we use env vars to overwrite it
     return 'http://localhost:3000';
   } else {
     // Outside of localhost we assume that they run on the same port
     // because the backend will serve the frontend
-    // It prod context, we use env-config.js + window var to ovewrite it
+    // In prod context, we use index.html + window var to ovewrite it
     return `${window.location.protocol}//${window.location.hostname}${
       window.location.port ? `:${window.location.port}` : ''
     }`;