Run the ui as a standalone app

package.json

@@ -38,7 +38,8 @@
     "test-legacy": "cd legacy && yarn run test",
     "test-ui": "cd ui && yarn run test --watchAll=false",
     "test-shared": "cd shared && yarn run test",
-    "test": "yarn build-shared && yarn test-legacy && yarn test-ui && yarn test-shared"
+    "test": "yarn build-shared && yarn test-legacy && yarn test-ui && yarn test-shared",
+    "ui": "cd proxy && yarn start-ui"
   },
   "workspaces": {
     "packages": [

proxy/index.js

@@ -35,16 +35,6 @@ app.use(
   })
 );
 
-/*
-// Proxy the HMR endpoint to the React client.
-app.use(
-  createProxyMiddleware("/sockjs-node", {
-    target: `http://localhost:${UI_PORT}/`,
-    ws: true,
-  })
-);
-*/
-
 // Proxy the HMR endpoint to the Angular client.
 app.use(
   createProxyMiddleware("/sockjs-legacy", {
@@ -53,29 +43,6 @@ app.use(
   })
 );
 
-/*
-// Proxy URLs and assets to the React client.
-app.use(
-  createProxyMiddleware(
-    [
-      `${process.env.BASENAME}${process.env.REACT_BASENAME}`,
-      "/static/",
-      "/maas-favicon-32px.png",
-    ],
-    {
-      target: `http://localhost:${UI_PORT}/`,
-    }
-  )
-);
-*/
-
-// Proxy the HMR url to the React client.
-// app.use(
-//   createProxyMiddleware("/main.*.hot-update.js", {
-//     target: `http://localhost:${UI_PORT}/`,
-//   })
-// );
-
 // Proxy to the single-spa root app.
 app.use(
   createProxyMiddleware("/", {

proxy/package.json

@@ -3,6 +3,7 @@
   "private": true,
   "version": "0.1.0",
   "scripts": {
+    "build-root-css": "cd ../root && [ -f dist/assets/css/root-application.css ] || { yarn install; node-sass --importer=../node_modules/node-sass-tilde-importer src/scss/base.scss dist/assets/css/root-application.css; }",
     "clean": "rm -rf node_modules",
     "cypress-ci": "start-server-and-test serve-apps '8401|8402' serve-base '8400|8404' cypress-run",
     "cypress-open": "yarn cypress open",
@@ -14,14 +15,18 @@
     "serve-legacy": "cd ../legacy && yarn run start",
     "serve-root": "cd ../root && yarn start",
     "serve-ui": "cd ../ui && BROWSER=none PORT=8401 yarn run start",
+    "serve-ui-proxy": "node ./ui.js",
+    "serve-ui-standalone": "yarn build-root-css && cd ../ui && BROWSER=none PORT=8401 yarn run standalone",
     "start": "concurrently \"yarn serve-apps\" \"yarn serve-base\"",
+    "start-ui": "concurrently \"yarn serve-ui-standalone\" \"yarn watch-shared\" \"yarn serve-ui-proxy\"",
     "watch-shared": "cd ../shared && yarn watch"
   },
   "devDependencies": {
     "concurrently": "5.2.0",
     "cypress": "4.5.0",
     "dotenv-flow": "3.1.0",
     "http-proxy-middleware": "1.0.3",
+    "node-sass-tilde-importer": "1.0.2",
     "npm-package-json-lint": "5.1.0",
     "start-server-and-test": "1.11.0",
     "wait-on": "5.0.0"

proxy/ui.js

@@ -0,0 +1,51 @@
+require("dotenv-flow").config();
+const path = require("path");
+var express = require("express");
+var { createProxyMiddleware } = require("http-proxy-middleware");
+
+var app = express();
+
+const PROXY_PORT = 8400;
+const UI_PORT = 8401;
+
+// Proxy API endpoints to the MAAS.
+app.use(
+  createProxyMiddleware(
+    [`${process.env.BASENAME}/api`, `${process.env.BASENAME}/accounts`],
+    {
+      target: process.env.MAAS_URL,
+    }
+  )
+);
+
+// Proxy the WebSocket API endpoint to the MAAS.
+app.use(
+  createProxyMiddleware(`${process.env.BASENAME}/ws`, {
+    target: process.env.MAAS_URL,
+    ws: true,
+  })
+);
+
+// Proxy the HMR endpoint to the React client.
+app.use(
+  createProxyMiddleware("/sockjs-node", {
+    target: `http://localhost:${UI_PORT}/`,
+    ws: true,
+  })
+);
+
+// Proxy to the single-spa root app.
+app.use(
+  createProxyMiddleware("/", {
+    target: `http://localhost:${UI_PORT}/`,
+  })
+);
+
+app.get(process.env.BASENAME, (req, res) =>
+  res.redirect(`${process.env.BASENAME}/`)
+);
+app.get("/", (req, res) => res.redirect(`${process.env.BASENAME}/`));
+
+app.listen(PROXY_PORT);
+
+console.log(`Serving on port ${PROXY_PORT}`);

ui/package.json

@@ -44,9 +44,10 @@
     "yup": "0.28.5"
   },
   "scripts": {
+    "standalone": "REACT_APP_GIT_SHA=`git rev-parse --short HEAD` REACT_APP_STANDALONE=true react-scripts start",
     "start": "REACT_APP_GIT_SHA=`git rev-parse --short HEAD` react-app-rewired start",
     "serve": "yarn run start",
-    "build": "REACT_APP_GIT_SHA=`git rev-parse --short HEAD` react-app-rewired build --profile && rm -rf dist && mv build dist",
+    "build": "REACT_APP_GIT_SHA=`git rev-parse --short HEAD` REACT_APP_STANDALONE=false react-app-rewired build --profile && rm -rf dist && mv build dist",
     "release": "yarn clean && yarn install && CI=true yarn test && yarn build && yarn version --new-version",
     "test": "react-app-rewired test",
     "eject": "react-scripts eject",

ui/src/index.js

@@ -1,5 +1,6 @@
 import { Provider } from "react-redux";
 import React, { useEffect } from "react";
+import ReactDOM from "react-dom";
 import { configureStore, getDefaultMiddleware } from "@reduxjs/toolkit";
 import { ConnectedRouter, routerMiddleware } from "connected-react-router";
 import { createBrowserHistory } from "history";
@@ -39,6 +40,9 @@ sagaMiddleware.run(rootSaga);
 const Root = () => {
   useEffect(() => {
     const loadingNode = document.querySelector(".root-loading");
+    if (!loadingNode) {
+      return;
+    }
     if (!loadingNode.classList.contains("u-hide")) {
       loadingNode.classList.add("u-hide");
     }
@@ -68,6 +72,11 @@ const Root = () => {
   );
 };
 
+if (process.env.REACT_APP_STANDALONE === "true") {
+  require("@maas-ui/maas-ui-root/dist/assets/css/root-application.css");
+  ReactDOM.render(<Root />, document.getElementById("root"));
+}
+
 export default Root;
 
 serviceWorker.unregister();

yarn.lock

@@ -7348,6 +7348,11 @@ find-cache-dir@^3.2.0:
     make-dir "^3.0.2"
     pkg-dir "^4.1.0"
 
+find-parent-dir@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/find-parent-dir/-/find-parent-dir-0.3.0.tgz#33c44b429ab2b2f0646299c5f9f718f376ff8d54"
+  integrity sha1-M8RLQpqysvBkYpnF+fcY83b/jVQ=
+
 [email protected], find-up@^4.0.0, find-up@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
@@ -11269,6 +11274,13 @@ node-releases@^1.1.53:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.53.tgz#2d821bfa499ed7c5dffc5e2f28c88e78a08ee3f4"
   integrity sha512-wp8zyQVwef2hpZ/dJH7SfSrIPD6YoJz6BDQDpGEkcA0s3LpAQoxBIYmfIq6QAhC1DhwsyCgTaTTcONwX8qzCuQ==
 
+node-sass-tilde-importer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/node-sass-tilde-importer/-/node-sass-tilde-importer-1.0.2.tgz#1a15105c153f648323b4347693fdb0f331bad1ce"
+  integrity sha512-Swcmr38Y7uB78itQeBm3mThjxBy9/Ah/ykPIaURY/L6Nec9AyRoL/jJ7ECfMR+oZeCTVQNxVMu/aHU+TLRVbdg==
+  dependencies:
+    find-parent-dir "^0.3.0"
+
 [email protected]:
   version "4.14.1"
   resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.14.1.tgz#99c87ec2efb7047ed638fb4c9db7f3a42e2217b5"