Custom Containers

Custom Container Solutions

In micro frontend architectures, Webpack 5 containers remain a popular choice for federated module loading, but they are not the only option. Custom container solutions offer flexibility for teams with unique requirements, such as tighter control over build processes, integration with non-Webpack toolchains, or enhanced security isolation. This section explores alternatives to Webpack 5 containers, including custom bundlers and iframe-based approaches.

---

Custom Bundlers for Container Creation

Custom bundlers allow teams to build containers using tools like Vite, Rollup, or esbuild, tailored to specific project needs. These tools provide granular control over module bundling, tree-shaking, and output formats, enabling lightweight or highly optimized containers.

Example: Vite-Based Container

npm create vite@latest my-container --template vanilla
cd my-container
npm install

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    lib: {
      entry: './src/main.js',
      name: 'MyContainer',
      fileName: 'container.js',
    },
    rollupOptions: {
      external: ['shared-libs/*'],
    },
  },
});

This configuration builds a standalone container file (container.js) that can be injected into a host application. The external rule ensures shared libraries are not bundled into the container, promoting reuse.

Diagram: Custom Bundler Workflow

[Source Code] --> [Custom Bundler (Vite/Rollup)] --> [Container Output]
          |                            |
          v                            v
    [Shared Dependencies]        [Host Integration Point]

Considerations:
- Performance: Tools like esbuild offer faster builds for large-scale projects.
- Compatibility: Ensure the container format (e.g., UMD, ESM) aligns with the host’s integration strategy.
- Tooling: Custom bundlers may require additional configuration for federated module loading (e.g., using import statements with dynamic paths).

---

iframe-Based Container Isolation

Iframes provide a sandboxed environment for micro frontends, offering strong isolation from the host application. This approach is ideal for scenarios requiring strict security boundaries or legacy component integration.

Example: iframe Integration

<!-- Host Application -->
<iframe 
  src="/microfrontends/my-mfe" 
  style="width: 100%; height: 500px; border: none"
  sandbox="allow-scripts allow-same-origin"
></iframe>

// Micro Frontend (my-mfe)
window.parent.postMessage({ type: 'INITIALIZE', payload: { user: 'Guest' } }, '*');

The host can listen for messages via window.addEventListener('message', ...), enabling bidirectional communication.

Diagram: iframe Isolation Architecture

[Host App] <-> [iframe] <-> [Micro Frontend]
          |                |
          v                v
    [PostMessage]      [PostMessage]

Considerations:
- Security: Use sandbox attributes and CORS policies to prevent XSS or data leaks.
- Performance: Iframes can introduce latency due to cross-origin communication overhead.
- Styling: Avoid CSS conflicts by using iframe-scoped styles or the allow attribute.

---

Key Takeaways

• Custom bundlers (e.g., Vite, Roll, esbuild) offer flexibility for tailored container builds but require careful configuration for federated integration.
• Iframe-based containers provide strong isolation and security but may introduce performance trade-offs and complexity in communication.
• Choose solutions based on project needs: custom bundlers for build control and optimization, iframes for strict isolation and legacy compatibility.