Split UI build (#681)

* Split ui build into build and build-ent folders

* remove is_standalone var

Co-authored-by: RoyUP9 <87927115+RoyUP9@users.noreply.github.com>

.dockerignore

@@ -2,7 +2,6 @@
 .dockerignore
 .editorconfig
 .gitignore
-**/.env*
 Dockerfile
 Makefile
 LICENSE

ui/.env.basic

@@ -0,0 +1,2 @@
+REACT_APP_OVERRIDE_WS_URL="ws://localhost:8899/ws"
+REACT_APP_OVERRIDE_API_URL="http://localhost:8899/"

ui/.env.enterprise

@@ -0,0 +1,3 @@
+REACT_APP_OVERRIDE_WS_URL="ws://localhost:8899/ws"
+REACT_APP_OVERRIDE_API_URL="http://localhost:8899/"
+REACT_APP_OVERRIDE_IS_ENTERPRISE="true"

ui/.gitignore

@@ -16,6 +16,7 @@
 
 # production
 /build
+/build-ent
 
 # misc
 .DS_Store

ui/craco.config.js

@@ -0,0 +1,15 @@
+// this workaround fix a warning of mini-css-extract-plugin throws "Conflicting order" during build
+// https://github.com/facebook/create-react-app/issues/5372
+module.exports = {
+    webpack: {
+        configure: (webpackConfig) => {
+            const instanceOfMiniCssExtractPlugin = webpackConfig.plugins.find(
+                (plugin) => plugin.options && plugin.options.ignoreOrder != null,
+            );
+            if(instanceOfMiniCssExtractPlugin)
+                instanceOfMiniCssExtractPlugin.options.ignoreOrder = true;
+
+            return webpackConfig;
+        },
+    }
+}

ui/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@craco/craco": "^6.4.3",
     "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.60",
@@ -32,7 +33,6 @@
     "react-dom": "^17.0.2",
     "react-graph-vis": "^1.0.7",
     "react-lowlight": "^3.0.0",
-    "react-scripts": "4.0.3",
     "react-scrollable-feed-virtualized": "^1.4.9",
     "react-syntax-highlighter": "^15.4.3",
     "react-toastify": "^8.0.3",
@@ -43,11 +43,15 @@
     "web-vitals": "^1.1.1",
     "xml-formatter": "^2.6.0"
   },
+  "devDependencies": {
+    "env-cmd": "^10.0.1"
+  },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "craco start",
+    "start-ent": "./node_modules/.bin/env-cmd -f .env.enterprise craco start",
+    "build": "./node_modules/.bin/env-cmd -f .env.basic craco build & BUILD_PATH='./build-ent' ./node_modules/.bin/env-cmd -f .env.enterprise craco build",
+    "test": "craco test",
+    "eject": "craco eject"
   },
   "eslintConfig": {
     "extends": [

ui/public/index.html

@@ -28,7 +28,6 @@
     <script>
       try {
         // Injected from server
-        window.isEnt = __IS_STANDALONE__
         window.isOasEnabled = __IS_OAS_ENABLED__
         window.isServiceMapEnabled = __IS_SERVICE_MAP_ENABLED__
       }

ui/src/AppChooser.tsx

@@ -0,0 +1,18 @@
+import React, {Suspense} from 'react';
+import LoadingOverlay from "./components/LoadingOverlay";
+
+const AppChooser = () => {
+
+    let MainComponent;
+    if (process.env.REACT_APP_OVERRIDE_IS_ENTERPRISE === "true") {
+        MainComponent = React.lazy(() => import('./EntApp'));
+    } else {
+        MainComponent = React.lazy(() => import('./App'));
+    }
+
+    return <Suspense fallback={<LoadingOverlay/>}>
+        <MainComponent/>
+    </Suspense>;
+}
+
+export default AppChooser;

ui/src/index.tsx

@@ -1,30 +1,28 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.sass';
-import App from './App';
-import EntApp from "./EntApp";
 import {ToastContainer} from "react-toastify";
 import 'react-toastify/dist/ReactToastify.css';
 import {RecoilRoot} from "recoil";
+import AppChooser from "./AppChooser";
 
 ReactDOM.render(
-  <React.StrictMode>
-      <RecoilRoot>
+    <React.StrictMode>
         <>
-          {window["isEnt"] ? <EntApp/> : <App/>}
-          <ToastContainer
-              position="bottom-right"
-              autoClose={5000}
-              hideProgressBar={false}
-              newestOnTop={false}
-              closeOnClick
-              rtl={false}
-              pauseOnFocusLoss
-              draggable
-              pauseOnHover
-          />
+            <RecoilRoot>
+                <AppChooser/>
+                <ToastContainer
+                    position="bottom-right"
+                    autoClose={5000}
+                    hideProgressBar={false}
+                    newestOnTop={false}
+                    closeOnClick
+                    rtl={false}
+                    pauseOnFocusLoss
+                    draggable
+                    pauseOnHover
+                />
+            </RecoilRoot>
         </>
-      </RecoilRoot>
-  </React.StrictMode>,
-  document.getElementById('root')
-);
+    </React.StrictMode>,
+document.getElementById('root'));