changes to accomodate a view frontend

Author: GodaProjects

.env

@@ -1,3 +1,4 @@
 REACT_APP_MICROFRONTEND_1_HOST=http://localhost:3031
 REACT_APP_MICROFRONTEND_2_HOST=http://localhost:3032
+REACT_APP_MICROFRONTEND_VUE_HOST=http://localhost:8080
 REACT_APP_STATIC_COMMON_CONTENT_HOST=http://localhost:5030

src/App.js

@@ -4,10 +4,12 @@ import logo from './logo.svg'
 import Header from './Header'
 import Footer from './Footer'
 import Microfrontend from './Microfrontend'
+import MicrofrontendVue from './MicrofrontendVue'
 
 const {
   REACT_APP_MICROFRONTEND_1_HOST: microfrontend1Host,
   REACT_APP_MICROFRONTEND_2_HOST: microfrontend2Host,
+  REACT_APP_MICROFRONTEND_VUE_HOST: microfrontendVueHost,
 } = process.env;
 
 
@@ -19,6 +21,10 @@ const Microfrontend2 = ({ history }) => (
   <Microfrontend history={history} host={microfrontend2Host} name="Microfrontend2" />
 );
 
+const MicrofrontendVueMF = ({ history }) => (
+  <MicrofrontendVue history={history} host={microfrontendVueHost} name="MicrofrontendVue" />
+);
+
 function App() {
   return (
     <BrowserRouter>
@@ -27,6 +33,7 @@ function App() {
         <h1>Goda's microfrontend page</h1>
         <Route exact path="/microfrontend1" component={Microfrontend1} />
         <Route exact path="/microfrontend2" component={Microfrontend2} />
+        <Route exact path="/microfrontendVue" component={MicrofrontendVueMF} />
         <Footer/>
 
       </React.Fragment>

src/MicrofrontendVue.js

@@ -0,0 +1,55 @@
+import React from 'react';
+
+class MicrofrontendVue extends React.Component {
+    componentDidMount() {
+        const { name, host, document } = this.props;
+        const scriptId = `micro-frontend-script-${name}`;
+        if (document.getElementById(scriptId)) {
+            this.renderMicroFrontend();
+            return;
+        }
+
+        fetch(`${host}/asset-manifest.json`)
+            .then(res => res.json())
+            .then(manifest => {
+            let script = document.createElement('script');
+            script.id = scriptId;
+            script.crossOrigin = '';
+            script.src = `${host}/${manifest['app.js']}`;
+            document.head.appendChild(script);
+            console.log(script)
+
+            script = document.createElement('script');
+            script.id = scriptId;
+            script.crossOrigin = '';
+            script.src = `${host}/${manifest['chunk-vendors.js']}`;
+            script.onload = this.renderMicrofrontend;
+            document.head.appendChild(script);
+            console.log(script)
+        });
+
+    }
+ 
+    componentWillUnmount() {
+        const { name, window } = this.props;
+        window[`unmount${name}`](`${name}-container`);
+    }
+
+    renderMicrofrontend = () => {
+
+        const { name, window, history } = this.props;
+        window[`render${name}`](`${name}-container`);
+    }
+
+    render() {
+        return <main id={`${this.props.name}-container`} />;
+    }
+
+}
+
+MicrofrontendVue.defaultProps = {
+    document,
+    window,
+};
+  
+export default MicrofrontendVue;