React Microfrontends

Create a new Microfrontend by creating a new React component:

$bit create react cart

Copied

Bit Components can be previewed using the Workspace UI, or linked to other projects during development.

To deploy a Bit component as a micro frontend, add a *.bit-app.ts file and use the app type for your needs. The example below demonstrates turning your component to a micro frontend using Module Federation:

import { MfReact } from '@frontend/module-federation.react.apps-types.mf-webpack';
import { CloudflarePages } from '@backend/cloudflare.deployers.cloudflare-pages';

export default MfReact.from({
  name: 'cart',
  clientRoot: './cart.app-root.js',
  ssr: false,
  moduleFederation: {
    exposes: {
      './cart': '../cart.tsx',
    },
  },
  // deploy to Cloudflare
  deploy: CloudflarePages.deploy({
    accountId: process.env.CF_ACCOUNT_ID,
    apiToken: process.env.CF_API_TOKEN,
    projectName: 'bit-webpack-producer',
  })
});
Copied

Components are also automatically packaged and deployed upon release and can be installed using the standard package managers for optimal type safety and dev experience:

$pnpm i @my-org/ecommerce.cart

Copied

Alternatively, watch the video tutorial for deploying components as micro frontends with Module Federation:

Bit provides official app types for variety of micro frontends types:

• Module Federation
• ESM
• Build a UMD bundle
• SingleSPA

Alternatively you can build your own application type using the tools of your choice.

• Module Federation on Bit Cloud
• Explore official deployers
• Ripple CI on Bit Cloud
• UMD example component
• Module Federation example organization