Zephyr Cloud Docs

    Create a module federation app

    Developed by Jack Herrington, co-author of the "Practical Module Federation" book and technology-focused YouTuber.

    create-mf-app is a tool that creates a Module Federation application, API server, or library based on one of multiple different templates.

    Generating Application

    This guide provides a comprehensive walkthrough on how to use the create-mf-app tool to create a Module Federation application and integrate it with Zephyr.

    To execute npm package binaries, use the npx command as follows:

    npx create-mf-app

    Choose a name for your application. Ensure you designate one host and at least one remote, choosing names that reflect their roles accordingly.

    ? Pick the name of your app: (host)

    Select the type of application:

    ? Project Type: (Use arrow keys)
❯ Application
  API Server
  Library

    You may use the default port option:

    ? Port number: (8080)

    We conducted tests using React, but other frameworks may also be compatible. See the Module Federation guide for more details on supported frameworks.

    ? Framework: (Use arrow keys)
lit-html
preact
❯ react
react-esm
solid-js
svelte
vanilla
(Move up and down to reveal more choices)

    We prefer TypeScript, but Zephyr is compatible with both TypeScript and JavaScript.

    ? Language:
❯ typescript
javascript

    Both CSS and Tailwind are viable options for styling:

    ? CSS: (Use arrow keys)
❯ CSS
Tailwind

    While both packing options are viable, we strongly recommend Rspack for its performance. See benchmark of Rspack.

    ? Bundler: (Use arrow keys)
Webpack
❯ Rspack

    Adding Zephyr to Your Module Federation App

    Installing Zephyr plugin:

    For Rspack:

    cd your-app-name
npm install zephyr-rspack-plugin --save-dev

    For Webpack:

    cd your-app-name
npm install zephyr-webpack-plugin --save-dev

    Zephyr Configuration Integration

    Incorporate the Zephyr configuration into your existing setup by wrapping the current configuration object with Zephyr's functionality.

    Rspack
    Webpack

    Setting up Git Repository

    Zephyr requires a Git repository to track your project. Follow these steps to set up your repository:

    1. Initialize the Git Repository:
    git init
    1. Stage Files for Commit:
    git add .
    1. Create an Initial Commit:
    git commit -m "Initial commit with Zephyr"
    1. Set the Default Branch:
    git branch -M main
    1. Create and Link Remote Repository:
    GitHub CLI
    Manual
    1. Push to Remote:
    git push -u origin main

    Build and Deploy

    Build your application to deploy it with Zephyr:

    npm run build

    During the build process, Zephyr will:

    1. Extract your Module Federation configuration
    2. Upload your built assets to Zephyr Cloud
    3. Provide you with deployment URLs

    Your application will be automatically available at the provided Zephyr URL. Each deployment creates a new version of your application with its own permanent URL.

    Next Steps

    For more insights on building micro-frontends with Module Federation, check out Jack Herrington's video tutorial.