fix: passthrough runtime env vars (#741)

Signed-off-by: Carina Ursu <[email protected]>
flyteorg · Apr 12, 2023 · 530c10d · 530c10d
1 parent c5fc069
commit 530c10d
Show file tree

Hide file tree

Showing 6 changed files with 127 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
     "start": "yarn workspace @flyteconsole/client-app start",
     "build": "yarn workspace @flyteconsole/client-app build",
     "build:prod": "yarn workspace @flyteconsole/client-app build:prod",
-    "start:prod": "yarn build:prod && yarn workspace @flyteconsole/client-app start:prod",
+    "start:prod": "yarn workspace @flyteconsole/client-app start:prod",
     "build:storybook": "build-storybook",
     "generate:package": "yarn workspace @flyteconsole/generator start",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
@@ -75,6 +75,7 @@
     "@typescript-eslint/parser": "^5.48.2",
     "babel-loader": "^8.2.5",
     "chalk": "^4",
+    "cheerio": "^1.0.0-rc.12",
     "compression-webpack-plugin": "^9.2.0",
     "cookie-parser": "^1.4.3",
     "copy-webpack-plugin": "^11.0.0",

diff --git a/website/src/assets/index.html b/website/src/assets/index.html
@@ -31,11 +31,6 @@
             href="<%= htmlWebpackPlugin.options.publicPath %>apple-touch-icon.png"
         />
     </head>
-    <% if (htmlWebpackPlugin.options.processEnv) { %>
-    <script>
-        window.env=<%= htmlWebpackPlugin.options.processEnv %>
-    </script>
-    <% } %>
     <body>
         <div id="react-app"></div>
         <% if (htmlWebpackPlugin.options.cdnSettings) { %>

diff --git a/website/src/client.tsx b/website/src/client.tsx
@@ -5,7 +5,7 @@ import { env } from '@flyteorg/common';
 import { App } from '@flyteorg/console';
 
 const WrappedApp = () => {
-  return <App env={process.env} />;
+  return <App env={env} />;
 };
 
 const render = (Component: React.FC) => {

diff --git a/website/src/server/router.ts b/website/src/server/router.ts
@@ -1,6 +1,8 @@
 import express, { Request, Response, Router } from 'express';
 import fs from 'fs';
 import path from 'path';
+import * as cheerio from 'cheerio';
+import { processEnv } from '../../env';
 
 const router: Router = express.Router();
 
@@ -17,7 +19,14 @@ router.get('/*', (_req: Request, res: Response) => {
     throw new ReferenceError('Could not find index.html to render');
   }
 
-  res.status(200).send(html);
+  // populate the app content...
+  const $ = cheerio.load(html);
+  // Populate process.env into window.env
+  $('head').append(
+    $(`<script>window.env = ${JSON.stringify(processEnv)}</script>`),
+  );
+
+  res.status(200).send($.html());
 });
 
 export default router;
diff --git a/website/webpack.config.ts b/website/webpack.config.ts
@@ -39,7 +39,6 @@ module.exports = (_env: any, argv: { mode: Mode }) => {
     DEFAULT_HTML_WPC_OPTS,
     {
       ...webpackConfig.htmlWebpackOptions,
-      processEnv: JSON.stringify(processEnv),
       ...(shouldLoadReactFromCDN
         ? {
             cdnSettings: {

diff --git a/yarn.lock b/yarn.lock
@@ -8056,6 +8056,35 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cheerio-select@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "cheerio-select@npm:2.1.0"
+  dependencies:
+    boolbase: ^1.0.0
+    css-select: ^5.1.0
+    css-what: ^6.1.0
+    domelementtype: ^2.3.0
+    domhandler: ^5.0.3
+    domutils: ^3.0.1
+  checksum: 843d6d479922f28a6c5342c935aff1347491156814de63c585a6eb73baf7bb4185c1b4383a1195dca0f12e3946d737c7763bcef0b9544c515d905c5c44c5308b
+  languageName: node
+  linkType: hard
+
+"cheerio@npm:^1.0.0-rc.12":
+  version: 1.0.0-rc.12
+  resolution: "cheerio@npm:1.0.0-rc.12"
+  dependencies:
+    cheerio-select: ^2.1.0
+    dom-serializer: ^2.0.0
+    domhandler: ^5.0.3
+    domutils: ^3.0.1
+    htmlparser2: ^8.0.1
+    parse5: ^7.0.0
+    parse5-htmlparser2-tree-adapter: ^7.0.0
+  checksum: 5d4c1b7a53cf22d3a2eddc0aff70cf23cbb30d01a4c79013e703a012475c02461aa1fcd99127e8d83a02216386ed6942b2c8103845fd0812300dd199e6e7e054
+  languageName: node
+  linkType: hard
+
 "chokidar@npm:^2.1.8":
   version: 2.1.8
   resolution: "chokidar@npm:2.1.8"
@@ -9102,6 +9131,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"css-select@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "css-select@npm:5.1.0"
+  dependencies:
+    boolbase: ^1.0.0
+    css-what: ^6.1.0
+    domhandler: ^5.0.2
+    domutils: ^3.0.1
+    nth-check: ^2.0.1
+  checksum: 2772c049b188d3b8a8159907192e926e11824aea525b8282981f72ba3f349cf9ecd523fdf7734875ee2cb772246c22117fc062da105b6d59afe8dcd5c99c9bda
+  languageName: node
+  linkType: hard
+
 "css-vendor@npm:^2.0.8":
   version: 2.0.8
   resolution: "css-vendor@npm:2.0.8"
@@ -9112,7 +9154,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-what@npm:^6.0.1":
+"css-what@npm:^6.0.1, css-what@npm:^6.1.0":
   version: 6.1.0
   resolution: "css-what@npm:6.1.0"
   checksum: b975e547e1e90b79625918f84e67db5d33d896e6de846c9b584094e529f0c63e2ab85ee33b9daffd05bff3a146a1916bec664e18bb76dd5f66cbff9fc13b2bbe
@@ -10104,6 +10146,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dom-serializer@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "dom-serializer@npm:2.0.0"
+  dependencies:
+    domelementtype: ^2.3.0
+    domhandler: ^5.0.2
+    entities: ^4.2.0
+  checksum: cd1810544fd8cdfbd51fa2c0c1128ec3a13ba92f14e61b7650b5de421b88205fd2e3f0cc6ace82f13334114addb90ed1c2f23074a51770a8e9c1273acbc7f3e6
+  languageName: node
+  linkType: hard
+
 "dom-walk@npm:^0.1.0":
   version: 0.1.2
   resolution: "dom-walk@npm:0.1.2"
@@ -10125,7 +10178,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"domelementtype@npm:^2.0.1, domelementtype@npm:^2.2.0":
+"domelementtype@npm:^2.0.1, domelementtype@npm:^2.2.0, domelementtype@npm:^2.3.0":
   version: 2.3.0
   resolution: "domelementtype@npm:2.3.0"
   checksum: ee837a318ff702622f383409d1f5b25dd1024b692ef64d3096ff702e26339f8e345820f29a68bcdcea8cfee3531776b3382651232fbeae95612d6f0a75efb4f6
@@ -10150,6 +10203,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"domhandler@npm:^5.0.1, domhandler@npm:^5.0.2, domhandler@npm:^5.0.3":
+  version: 5.0.3
+  resolution: "domhandler@npm:5.0.3"
+  dependencies:
+    domelementtype: ^2.3.0
+  checksum: 0f58f4a6af63e6f3a4320aa446d28b5790a009018707bce2859dcb1d21144c7876482b5188395a188dfa974238c019e0a1e610d2fc269a12b2c192ea2b0b131c
+  languageName: node
+  linkType: hard
+
 "domutils@npm:^2.5.2, domutils@npm:^2.8.0":
   version: 2.8.0
   resolution: "domutils@npm:2.8.0"
@@ -10161,6 +10223,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"domutils@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "domutils@npm:3.0.1"
+  dependencies:
+    dom-serializer: ^2.0.0
+    domelementtype: ^2.3.0
+    domhandler: ^5.0.1
+  checksum: 23aa7a840572d395220e173cb6263b0d028596e3950100520870a125af33ff819e6f609e1606d6f7d73bd9e7feb03bb404286e57a39063b5384c62b724d987b3
+  languageName: node
+  linkType: hard
+
 "dot-case@npm:^3.0.4":
   version: 3.0.4
   resolution: "dot-case@npm:3.0.4"
@@ -10358,6 +10431,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"entities@npm:^4.2.0, entities@npm:^4.4.0":
+  version: 4.4.0
+  resolution: "entities@npm:4.4.0"
+  checksum: 84d250329f4b56b40fa93ed067b194db21e8815e4eb9b59f43a086f0ecd342814f6bc483de8a77da5d64e0f626033192b1b4f1792232a7ea6b970ebe0f3187c2
+  languageName: node
+  linkType: hard
+
 "env-paths@npm:^2.2.0":
   version: 2.2.1
   resolution: "env-paths@npm:2.2.1"
@@ -11554,6 +11634,7 @@ __metadata:
     "@typescript-eslint/parser": ^5.48.2
     babel-loader: ^8.2.5
     chalk: ^4
+    cheerio: ^1.0.0-rc.12
     compression-webpack-plugin: ^9.2.0
     cookie-parser: ^1.4.3
     copy-webpack-plugin: ^11.0.0
@@ -12729,6 +12810,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"htmlparser2@npm:^8.0.1":
+  version: 8.0.2
+  resolution: "htmlparser2@npm:8.0.2"
+  dependencies:
+    domelementtype: ^2.3.0
+    domhandler: ^5.0.3
+    domutils: ^3.0.1
+    entities: ^4.4.0
+  checksum: 29167a0f9282f181da8a6d0311b76820c8a59bc9e3c87009e21968264c2987d2723d6fde5a964d4b7b6cba663fca96ffb373c06d8223a85f52a6089ced942700
+  languageName: node
+  linkType: hard
+
 "http-cache-semantics@npm:^4.1.0":
   version: 4.1.1
   resolution: "http-cache-semantics@npm:4.1.1"
@@ -17467,13 +17560,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"parse5-htmlparser2-tree-adapter@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "parse5-htmlparser2-tree-adapter@npm:7.0.0"
+  dependencies:
+    domhandler: ^5.0.2
+    parse5: ^7.0.0
+  checksum: fc5d01e07733142a1baf81de5c2a9c41426c04b7ab29dd218acb80cd34a63177c90aff4a4aee66cf9f1d0aeecff1389adb7452ad6f8af0a5888e3e9ad6ef733d
+  languageName: node
+  linkType: hard
+
 "parse5@npm:6.0.1, parse5@npm:^6.0.0":
   version: 6.0.1
   resolution: "parse5@npm:6.0.1"
   checksum: 7d569a176c5460897f7c8f3377eff640d54132b9be51ae8a8fa4979af940830b2b0c296ce75e5bd8f4041520aadde13170dbdec44889975f906098ea0002f4bd
   languageName: node
   linkType: hard
 
+"parse5@npm:^7.0.0":
+  version: 7.1.2
+  resolution: "parse5@npm:7.1.2"
+  dependencies:
+    entities: ^4.4.0
+  checksum: 59465dd05eb4c5ec87b76173d1c596e152a10e290b7abcda1aecf0f33be49646ea74840c69af975d7887543ea45564801736356c568d6b5e71792fd0f4055713
+  languageName: node
+  linkType: hard
+
 "parseurl@npm:~1.3.2, parseurl@npm:~1.3.3":
   version: 1.3.3
   resolution: "parseurl@npm:1.3.3"