Setup single-spa

nickpith · Feb 6, 2021 · 1b62414 · 1b62414
1 parent 717cd6a
commit 1b62414
Show file tree

Hide file tree

Showing 8 changed files with 1,889 additions and 91 deletions.
diff --git a/.gitignore b/.gitignore
@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+aggregated-translations/*
+.eslintcache
diff --git a/config-overrides.js b/config-overrides.js
@@ -0,0 +1,23 @@
+module.exports = {
+  webpack(config, env) {
+    // config.entry = './src/single-spa-entry.js';
+    config.externals = ['react', 'react-dom', 'single-spa', new RegExp(`^@nickpith/`)];
+    config.output = {
+      ...config.output,
+      filename: 'nickpith-root-config.js',
+      libraryTarget: 'system',
+    };
+    config.plugins = config.plugins.filter(plugin => plugin.constructor.name !== 'HtmlWebpackPlugin' && plugin.constructor.name !== 'MiniCssExtractPlugin');
+    delete config.optimization;
+    return config;
+  },
+  devServer(configFunction) {
+    return function (proxy, allowedHost) {
+      const config = configFunction(proxy, allowedHost);
+      config.disableHostCheck = true
+      config.headers = config.headers || {}
+      config.headers['Access-Control-Allow-Origin'] = '*'
+      return config
+    }
+  }
+}
diff --git a/package.json b/package.json
@@ -3,18 +3,29 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "react": "^16.8.5",
+    "react-dom": "^16.8.5",
+    "react-intl": "^2.8.0",
+    "react-router-dom": "^5.2.0",
+    "single-spa": "^5.9.1",
+    "systemjs-webpack-interop": "^2.3.4",
+    "terra-application": "^1.41.1",
+    "web-vitals": "^0.2.4"
+  },
+  "devDependencies": {
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "node-sass": "^4.12.0",
+    "react-app-rewired": "^2.1.8",
     "react-scripts": "4.0.1",
-    "web-vitals": "^0.2.4"
+    "terra-aggregate-translations": "^1.0.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "aggregate-translations": "tt-aggregate-translations -l ['en'] -d ./translations -o ./node_modules/terra-i18n/node_modules -f es6",
+    "start": "yarn run aggregate-translations && react-app-rewired start",
+    "build": "yarn run aggregate-translations && react-app-rewired build",
+    "test": "yarn run aggregate-translations && react-app-rewired test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {

diff --git a/public/index.html b/public/index.html
@@ -1,20 +1,44 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" dir="ltr">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+
+    <meta name="importmap-type" content="systemjs-importmap" />
+    <script type="systemjs-importmap">
+      {
+        "imports": {
+          "single-spa": "https://cdn.jsdelivr.net/npm/[email protected]/lib/system/single-spa.min.js",
+          "react": "https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js",
+          "react-dom": "https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.production.min.js"
+        }
+      }
+    </script>
+    <link rel="preload" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/system/single-spa.min.js" as="script">
+    <script type="systemjs-importmap">
+      {
+        "imports": {
+          "@nickpith/root-config": "http://localhost:3000/nickpith-root-config.js",
+          "@nickpith/app1": "http://localhost:3001/nickpith-app1.js"
+        }
+      }
+    </script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/import-map-overrides.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/system.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/extras/amd.js"></script>
+
+    <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -28,7 +52,10 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
+    <div id="root" style="height: 100%;"></div>
+    <script>
+      System.import('@nickpith/root-config');
+    </script>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/src/App.js b/src/App.js
@@ -1,24 +1,48 @@
-import logo from './logo.svg';
-import './App.css';
+import { useCallback } from 'react';
+
+import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
+import ApplicationBase from 'terra-application/lib/application-base';
+import ApplicationNavigation from 'terra-application/lib/application-navigation';
+import { start } from 'single-spa';
 
 function App() {
+  const handleAppReady = useCallback((node) => {
+    start({
+      urlRerouteOnly: true,
+    });
+  }, []);
+
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <ApplicationBase>
+      <ApplicationNavigation 
+        titleConfig={{
+          title: 'Single-SPA Test',
+        }}
+        userConfig={
+          {
+            name: 'Example User',
+            initials: 'EU',
+          }
+        }
+        navigationItems={[]}
+      >
+        <Router ref={handleAppReady} >
+          <Switch>
+            <Route exact path="/">
+              <ul>
+                <li><Link to="/app1">App 1</Link></li>
+              </ul>
+            </Route>
+            <Route path="/app1">
+              <div id="single-spa-application:@nickpith/app1" style={{height: '100%'}}/>
+            </Route>
+            <Route>
+              <div>Page Not Found</div>
+            </Route>
+          </Switch>
+        </Router>
+      </ApplicationNavigation>
+    </ApplicationBase>
   );
 }
 

diff --git a/src/index.js b/src/index.js
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { start, registerApplication } from "single-spa";
 
 ReactDOM.render(
   <React.StrictMode>
@@ -11,6 +12,13 @@ ReactDOM.render(
   document.getElementById('root')
 );
 
+/* eslint-disable no-restricted-properties, no-undef */
+registerApplication({
+  name: "@nickpith/app1",
+  app: () => System.import("@nickpith/app1"),
+  activeWhen: ["/app1"]
+});
+
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

diff --git a/translations/en.json b/translations/en.json
@@ -0,0 +1,3 @@
+{
+  "App.Name": "Test"
+}