harshaktg

{
  "name": "microfrontends-example",
  "version": "1.0.0",
  "description": "To demonstrate micro frontends using single SPA",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "web": "live-server ."
  },
  "author": "Harsha Vardhan",

harshaktg

{
  "name": "microfrontends-example",
  "version": "1.0.0",
  "description": "To demonstrate micro frontends using single SPA",
  "main": "index.js",
  "scripts": {
    "web": "live-server .",
    "react": "cd ./components/reactapp && npm start",
    "vue": "cd ./components/vueapp && npm run serve -- --port 4000",
    "mfe": "concurrently \"npm run web\" \"npm run react\" \"npm run vue\""

harshaktg

{
    "presets": [
        ["@babel/preset-env", {
        "targets": {
            "browsers": ["last 2 versions"]
        }
        }],
        ["@babel/preset-react"]
    ],
    "plugins": [

harshaktg

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  mode: 'development',
  entry: {
    'singleSPA.config': './singleSPA.config.js',
  },
  output: {

harshaktg

window.myapp = {
    counter: 0,
    incrementor: () => {
        window.myapp.counter += 1;
        window.dispatchEvent(new Event('onIncrement'));
    },
    decrementor: () => {
        window.myapp.counter -= 1;
        window.dispatchEvent(new Event('onDecrement'));
    }

harshaktg

import React, { useEffect, useState } from 'react'

const App = () => {
    const [val, setVal] = useState(0);

    useEffect(() => {
        window.addEventListener('onIncrement', () => {
            setVal(window.myapp.counter);
        });
        window.addEventListener('onDecrement', () => {

harshaktg

import React from 'react';
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react';
import App from './App';

function domElementGetter() {
  return document.getElementById("react")
}

const reactLifecycles = singleSpaReact({

harshaktg

<template>
  <div>
      <h1>Hello from Vue</h1>
      <h4>My value is {{count}}</h4>
      <input type="button" v-on:click="handleIncrement" value="+"></input>
      <input type="button" v-on:click="handleDecrement" value="-"></input>
  </div>
</template>

<script>

harshaktg

import Vue from 'vue';
import singleSpaVue from 'single-spa-vue';
import App from './App.vue'

const vueLifecycles = singleSpaVue({
  Vue,
  appOptions: {
    el: '#vue',
    render: r => r(App),
  } 

harshaktg

import singleSpaHtml from 'single-spa-html';
const htmlLifecycles = singleSpaHtml({
  template: `<h1>Hello from VanillaJS</h1>
  <h2>Counter value is <span id="counterVal"></span></h2>
  <input type="button" onclick="window.myapp.incrementor()" value="+"></input>
  <input type="button" onclick="window.myapp.decrementor()" value="-"></input>
  `,
})

htmlLifecycles.originalMount = htmlLifecycles.mount;