Complete Micro Frontend Architecture Guide

// vite.config.js (example from Shell App)
import { federation } from '@module-federation/vite'
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    vue(),
    federation({
      name: 'shellApp',                  // this app's name
      filename: 'remoteEntry.js',        // output file others will load
      exposes: {                         // local modules we share
        './counterInterface': './src/interfaces/counter.js',
      },
      remotes: {                         // apps we depend on
        demoCounterApp: {
          type: 'module',
          entry: process.env.VITE_DEMO_COUNTER_REMOTE_ENTRY,
        }
      },
      shared: {                          // singletons across apps
        vue: { singleton: true, requiredVersion: '^3.5.18' },
        'vue-router': { singleton: true, requiredVersion: '^4.2.4' },
        pinia: { singleton: true, requiredVersion: '^2.1.7' },
        fabric: { singleton: true, requiredVersion: '^5.3.0' }
      }
    })
  ],
  optimizeDeps: {
    include: ['vue', 'vue-router', 'pinia', 'fabric'],
  }
})

// Shell App - Pinia Store (src/stores/common.store.js)
import { defineStore } from 'pinia'

export const useCommonStore = defineStore('common', {
  state: () => ({
    num: 0
  }),

  actions: {
    increment() {
      this.num++
      console.log('Incremented to:', this.num)
    },

    decrement() {
      this.num--
      console.log('Decremented to:', this.num)
    },

    setNum(value) {
      this.num = value
      console.log('Set to:', this.num)
    },

    incrementBy(amount) {
      this.num += amount
      console.log('Incremented by', amount, 'to:', this.num)
    }
  },

  getters: {
    doubleNum: (state) => state.num * 2,
    isPositive: (state) => state.num > 0,
    isNegative: (state) => state.num  Math.abs(state.num)
  }
})

// Importing a counter store exposed by demoCounterApp
import { useCounterStore } from 'demoCounterApp/counterInterface'

export default {
  setup() {
    const counter = useCounterStore()
    return { counter, increment: counter.increment }
  }
}

// DynamicCanvas.vue
<template>
  <div ref="canvasContainer" class="canvas-wrapper"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { fabric } from 'fabric'

const canvasContainer = ref(null)

onMounted(() => {
  const canvas = new fabric.Canvas(canvasContainer.value, {
    backgroundColor: '#fff',
    selection: true
  })

  canvas.add(new fabric.Rect({
    left: 100, top: 100,
    fill: 'red', width: 60, height: 70
  }))
})
</script>

exposes: {
  './DynamicCanvas': './src/components/DynamicCanvas.vue'
}

// Importing exposed component
import DynamicCanvas from 'demoOneApp/DynamicCanvas'

// Shell App - Interface Definition (src/interfaces/counter.js)
import { useCommonStore } from '../stores/common.store.js'
import { getActivePinia } from 'pinia'

export const counterInterface = {
  // Check if interface is ready
  isReady() {
    try {
      return !!getActivePinia()
    } catch {
      return false
    }
  },

  // Get current counter value
  getValue() {
    const store = useCommonStore()
    return store.num
  },

  // Modify counter state
  increment() {
    const store = useCommonStore()
    store.increment()
  },

  decrement() {
    const store = useCommonStore()
    store.decrement()
  },

  // Subscribe to real-time changes
  subscribe(callback) {
    const store = useCommonStore()
    return store.$subscribe((mutation, state) => {
      callback(state.num, mutation)
    })
  }
}

// Shell App - Module Federation Configuration
// vite.config.js
exposes: {
  "./interfaces": "./src/interfaces/index.js",
  "./counterInterface": "./src/interfaces/counter.js",
}

// Demo Counter App - Interface Usage
// src/components/CounterDemo.vue
const connectToShell = async () => {
  try {
    // Dynamic import from Shell App
    const { counterInterface } = await import('shellApp/interfaces')

    // Subscribe to real-time changes
    unsubscribe = counterInterface.subscribe((newValue) => {
      currentValue.value = newValue
      addToLog(`Value changed to ${newValue}`)
    })

    // Get initial value
    currentValue.value = counterInterface.getValue()
    isConnected.value = true
  } catch (error) {
    console.error('Interface connection failed:', error)
  }
}

// vite.config.ts (in each remote app)
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    // Emit a single combined CSS file for this remote
    cssCodeSplit: false,
    rollupOptions: {
      output: {
        // Give CSS a predictable name so the shell can reference it
        assetFileNames: (assetInfo) => {
          if (assetInfo.name && assetInfo.name.endsWith('.css')) {
            return 'assets/remote.css' // or `${name}.css` per app
          }
          return 'assets/[name]-[hash][extname]'
        },
      },
    },
  },
})

// shell-app/src/main.js (build behavior)
const remotes = [
  { name: 'demo-one',   href: import.meta.env.VITE_DEMO_ONE_CSS_URL },
  { name: 'demo-two',   href: import.meta.env.VITE_DEMO_TWO_CSS_URL },
  { name: 'demo-three', href: import.meta.env.VITE_DEMO_THREE_CSS_URL },
  { name: 'demo-counter', href: import.meta.env.VITE_DEMO_COUNTER_CSS_URL },
]

for (const r of remotes) {
  const link = document.createElement('link')
  link.rel = 'stylesheet'
  link.href = r.href
  link.onload = () => console.log(`✅ ${r.name} CSS loaded`)
  link.onerror = () => console.error(`❌ Failed loading ${r.name} CSS`)
  document.head.appendChild(link)
}

// Then mount the shell app

#!/usr/bin/env bash
set -euo pipefail

BASE_REF="${BASE_REF:-origin/main}"
APPS_ROOT="${APPS_ROOT:-apps}"

echo "▶️ Building only affected projects since ${BASE_REF}"
npx turbo run build --since="${BASE_REF}" --output-logs=errors-only

echo "🔎 Detecting which apps changed since ${BASE_REF}"
changed_apps=()
for app in "${APPS_ROOT}"/*; do
  [ -d "${app}" ] || continue
  [ -f "${app}/package.json" ] || continue
  if ! git diff --quiet "${BASE_REF}"..HEAD -- "${app}"; then
    changed_apps+=("$(basename \"${app}\")")
  fi
done

if [ ${#changed_apps[@]} -eq 0 ]; then
  echo "✅ No app changes detected; skipping deploy."
  exit 0
fi

echo "🚀 Deploying changed apps: ${changed_apps[*]}"
for app in "${changed_apps[@]}"; do
  echo "--- Deploying $app ---"
  # Example: pnpm --filter "$app" run deploy
  # Or:      npm run -w "${APPS_ROOT}/$app" deploy
  :
done