c

Author: andresramosp

.env.prod

@@ -0,0 +1 @@
+VUE_APP_REMOTES=heroku

package-lock.json

@@ -3,17 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
+    "serve": "vue-cli-service serve --mode local",
+    "build": "vue-cli-service build --mode prod",
     "lint": "vue-cli-service lint",
     "start": "node server.js"
   },
   "dependencies": {
     "core-js": "^3.8.3",
     "cors": "^2.8.5",
+    "element-plus": "^2.1.4",
     "moment": "^2.29.1",
-    "primeicons": "^5.0.0",
-    "primevue": "^3.12.1",
     "vue": "^3.2.13",
     "vue-router": "^4.0.14",
     "vuex": "^4.0.2"

package.json

@@ -1,16 +1,17 @@
 <template>
   <div>
-  <h1>{{ "Micro Frontend Two (Vue 3 + Prime Faces)" }}</h1>
     <div class="login-info">
       <div class="logged" v-if="logged">Logged in as {{ userLabel }}</div>
       <div class="not-logged" v-else>Not Logged</div>
     </div>
     <router-link to="/">Route 1</router-link>
-    <br />
-    <router-link to="/mfetwo-route2">Route 2</router-link>
+    <router-link style="margin-left: 10px" to="/mfetwo-route2"
+      >Route 2</router-link
+    >
+    <h1>{{ "Micro Frontend Two (Vue 3 + Element Plus)" }}</h1>
     <br />
     <div v-if="logged" style="margin-top: 20px">
-        <router-view v-slot="{ Component }">
+      <router-view v-slot="{ Component }">
         <keep-alive>
           <component :is="Component" />
         </keep-alive>
@@ -21,29 +22,28 @@
 
 <script>
 import { auth$ } from "ModuleAuth/ModuleAuth";
-import { computed } from 'vue'
+import { computed } from "vue";
 import { useStore } from "vuex";
 
 export default {
   name: "MfeTwo-App",
-  components: {
-  },
+  components: {},
   setup() {
     const store = useStore();
 
-    const logged = computed(() => store.getters.getLoggedIn)
-    const userLabel = computed(() => store.getters.getUserLabel)
+    const logged = computed(() => store.getters.getLoggedIn);
+    const userLabel = computed(() => store.getters.getUserLabel);
 
     auth$.subscribe((payload) => {
-      store.dispatch('setAuth', payload)
+      store.dispatch("setAuth", payload);
     });
 
-    store.dispatch('getStepsGeneric')
+    store.dispatch("getStepsGeneric");
 
     return {
       logged,
-      userLabel
-    }
+      userLabel,
+    };
   },
 };
 </script>

src/MfeTwo-App.vue

@@ -2,17 +2,14 @@ import { createApp } from 'vue'
 import MfeTwoApp from './MfeTwo-App.vue'
 import { createRouter, createWebHashHistory } from "vue-router";
 
-import PrimeVue from 'primevue/config';
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
 
 import store from './store/store'
 
 import RouteOne from './views/MfeTwo-RouteOne'
 import RouteTwo from './views/MfeTwo-RouteTwo'
 
-import 'primevue/resources/themes/saga-blue/theme.css';
-import 'primevue/resources/primevue.min.css';
-import 'primeicons/primeicons.css';
-
 const routes = [
     { path: '/', component: RouteOne },
     { path: '/mfetwo-route2', component: RouteTwo },
@@ -28,7 +25,7 @@ const mount = (el) => {
     const app = createApp(MfeTwoApp)
     app.use(router)
     app.use(store)
-    app.use(PrimeVue)
+    app.use(ElementPlus)
     app.mount(el)
 };
 

src/bootstrap.js

@@ -1,42 +1,3 @@
 <template>
-  <div class="p-fluid grid formgrid">
-    <div class="field col-12 md:col-4" style="width: 200px">
-      <Calendar id="basic" v-model="date1" autocomplete="off"></Calendar>
-    </div>
-  </div>
-</template>
-
-<script>
-import Calendar from 'primevue/calendar/sfc';
-import { ref } from "vue";
-export default {
-  components: {
-    Calendar
-  },
-  setup() {
-    const date1 = ref(new Date());
-
-    return { date1 };
-  },
-};
-</script>
-
-<style>
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.text {
-  font-size: 14px;
-}
-
-.item {
-  margin-bottom: 18px;
-}
-
-.box-card {
-  width: 480px;
-}
-</style>
+  <el-calendar :range="[new Date(2019, 2, 4), new Date(2019, 2, 24)]" />
+</template>

src/components/MfeTwo-ChildComponent.vue

@@ -1,16 +1,28 @@
 <template>
   <div class="hello" style="position: relative">
-    <div><MfeTwoChildComponent /></div>
-    <div class="shared-comp">
-      <SharedComponent />
-    </div>
-    <div class="shared-comp-2">
-      <SharedComponentGeneric :steps="store.state.stepsGeneric" />
-    </div>
 
-    {{ moment().format("MMMM Do YYYY, h:mm:ss a") }}
+<el-row :gutter="50">
+      <el-col :span="8"
+        ><div class="grid-content bg-purple" />
+        <MfeTwoChildComponent />
+      </el-col>
+      <el-col :span="8"
+        ><div class="grid-content bg-purple" />
+        <div class="shared-comp">
+          <SharedComponent />
+        </div>
+      </el-col>
+      <el-col :span="8"
+        ><div class="grid-content bg-purple" />
+        <div class="shared-comp-2">
+          <SharedComponentGeneric :steps="store.state.stepsGeneric" />
+        </div>
+      </el-col>
+    </el-row>
+
+    Moment.js <br /> {{ moment().format("MMMM Do YYYY, h:mm:ss a") }}
     <br />
-    <span style="color: #409eff">{{ message }}</span>
+    <span style="color: #409eff">Message from MfeOne: {{ message }}</span>
   </div>
 </template>
 
@@ -73,17 +85,12 @@ a {
 .shared-comp {
   background-color: lightgray;
   padding: 10px;
-  width: 400px;
-  margin-top: 10px;
-  margin-left: 40%;
+  width: 100%;
 
 }
 .shared-comp-2 {
   background-color: lightseagreen;
   padding: 10px;
-  width: 400px;
-  margin-top: 10px;
-  margin-left: 40%;
-
+  width: 100%;
 }
 </style>

src/components/MainComponent.vue renamed to src/components/MfeTwo-MainComponent.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import MfeTwoMainComponent from "../components/MainComponent.vue";
+import MfeTwoMainComponent from "../components/MfeTwo-MainComponent.vue";
 
 export default {
   name: "RouteOne",

src/views/MfeTwo-RouteOne.vue

@@ -3,7 +3,11 @@ const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlug
 const deps = require("./package.json");
 module.exports = defineConfig({
   transpileDependencies: true,
-  publicPath: 'https://module-federation-mfe-two.herokuapp.com/',
+  publicPath: process.env.VUE_APP_REMOTES === 'local' ?
+    // DEVELOPMENT
+    'http://localhost:9998/' :
+    // PRODUCTION
+    'https://module-federation-mfe-two.herokuapp.com/',
   devServer: { port: 9998 },
   configureWebpack: {
     optimization: {
@@ -16,24 +20,27 @@ module.exports = defineConfig({
       new ModuleFederationPlugin({
         name: 'MfeTwo',
         filename: 'remoteEntry.js',
-        remotes: {
-          ModuleAuth: 'ModuleAuth@https://module-federation-module-auth.herokuapp.com/remoteEntry.js',
-          // MfeOne: 'MfeOne@http://localhost:9999/remoteEntry.js',
-          MfeOne: 'MfeOne@https://module-federation-mfe-one.herokuapp.com/remoteEntry.js',
-        },
+        remotes: process.env.VUE_APP_REMOTES === 'local' ?
+          // DEVELOPMENT
+          {
+            ModuleAuth: 'ModuleAuth@http://localhost:9898/remoteEntry.js',
+            MfeOne: 'MfeOne@http://localhost:9999/remoteEntry.js',
+          } :
+          // PRODUCTION
+          {
+            ModuleAuth: 'ModuleAuth@https://module-federation-module-auth.herokuapp.com/remoteEntry.js',
+            MfeOne: 'MfeOne@https://module-federation-mfe-one.herokuapp.com/remoteEntry.js',
+          },
         exposes: {
-          './MfeTwo': './src/bootstrap.js' // implica wrapper en consumer que use el mount exportado por main
-          //'./MfeTwo': './src/components/MfeTwo-MainComponent.vue'
+          './MfeTwo': './src/bootstrap.js'
         },
         shared: {
           vue: {
-            // eager: true,
             singleton: true,
             requiredVersion: deps.vue
           },
           ...require('./package.json').dependencies
         },
-        //shared: require('./package.json').dependencies,
       })
     ]
   }