Getting Started with Dream.MF Packages#

Dream.MF provides a suite of packages designed to help you build, manage, and deploy micro-frontends efficiently. This guide will help you understand our package ecosystem and get started with implementation.

Package Overview#

Core Packages#

• @dream.mf/core: The foundation of Dream.MF, providing core functionality for host and remote management
• @dream.mf/bundlers: Build tools and webpack configurations for module federation
• @dream.mf/utilities: Common utilities and helpers for Dream.MF applications

Integration Packages#

• @dream.mf/react: React-specific components and hooks for Dream.MF
• @dream.mf/oidc: Authentication and authorization utilities
• @dream.mf/logging: Logging and monitoring tools

Installation#

Install packages using npm or yarn:

# Using npm
npm install @dream.mf/core @dream.mf/react

# Using yarn
yarn add @dream.mf/core @dream.mf/react

Basic Setup#

1. Core Setup#

import { DreamMFHost } from '@dream.mf/core';

const host = new DreamMFHost({
  name: 'my-application',
  version: '1.0.0'
});

2. React Integration#

import { DreamMFProvider, useRemote } from '@dream.mf/react';

function App() {
  return (
    <DreamMFProvider host={host}>
      <MyApplication />
    </DreamMFProvider>
  );
}

3. Authentication (Optional)#

import { AuthProvider } from '@dream.mf/oidc';

function App() {
  return (
    <AuthProvider
      authority="https://auth.example.com"
      clientId="your-client-id"
    >
      <DreamMFProvider host={host}>
        <MyApplication />
      </DreamMFProvider>
    </AuthProvider>
  );
}

Package Dependencies#

Here's a quick guide to which packages you might need:

• Building a host application?

  • @dream.mf/core (required)
  • @dream.mf/react (for React applications)
  • @dream.mf/bundlers (for build configuration)

• Creating a remote module?

  • @dream.mf/core (required)
  • @dream.mf/react (for React components)
  • @dream.mf/bundlers (for module federation)

• Need authentication?

  • @dream.mf/oidc

• Want logging and monitoring?

  • @dream.mf/logging

Best Practices#

1. Version Management

   • Keep packages in sync
   • Follow semantic versioning
   • Check compatibility matrix

2. Performance

   • Use dynamic imports
   • Implement code splitting
   • Configure proper bundling

3. Security

   • Keep packages updated
   • Implement proper authentication
   • Follow security guidelines

Next Steps#

• Explore individual package documentation for detailed APIs and examples
• Check out our examples repository for reference implementations
• Join our community for support and discussions

Need Help?#

• Review our detailed package documentation
• Check our GitHub repository for examples
• Join our Discord community
• Contact support for enterprise assistance