diff --git a/package.json b/package.json index 7dd6e50295..6088c3e477 100644 --- a/package.json +++ b/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": [ diff --git a/proxy/index.js b/proxy/index.js index e60a51ec78..50f583d0b4 100644 --- a/proxy/index.js +++ b/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("/", { diff --git a/proxy/package.json b/proxy/package.json index 9a5c049ab9..6b998b2056 100644 --- a/proxy/package.json +++ b/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,7 +15,10 @@ "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": { @@ -22,6 +26,7 @@ "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" diff --git a/proxy/ui.js b/proxy/ui.js new file mode 100644 index 0000000000..24733a3d34 --- /dev/null +++ b/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}`); diff --git a/ui/package.json b/ui/package.json index 6967bba3ea..ac3eca8f45 100644 --- a/ui/package.json +++ b/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", diff --git a/ui/src/index.js b/ui/src/index.js index 08167643d7..8cc5b45666 100644 --- a/ui/src/index.js +++ b/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(, document.getElementById("root")); +} + export default Root; serviceWorker.unregister(); diff --git a/yarn.lock b/yarn.lock index 4350a39754..601cb39bd2 100644 --- a/yarn.lock +++ b/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= + find-up@4.1.0, 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" + node-sass@4.14.1: version "4.14.1" resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.14.1.tgz#99c87ec2efb7047ed638fb4c9db7f3a42e2217b5"