cl-craft

cl-craft

cl-craft is a command line tool that helps you get started quickly building a Microfrontends project using Webpack's Module Federation plugin and React as the frontend framework.

Description

npx cl-craft [command] [project type] [options]

This is the list of available commands:

• help: Shows this help
• create-mf: Creates a new microfrontend project (container or remote)

This is the list of available project types:

• container: A container project
• remote: A remote project that gets included into the container

This is the list of available options:

• -d, --deploy: Generates the deploy script

NOTE: A microfrontend project is comprised of a container and one or more remote projects.

Usage

1. Go to the folder in which you wish to create your project.
2. Run npx cl-craft create-mf container and follow the instructions.
3. Run npx cl-craft create-mf remote and follow the instructions.

The previous commands create the folders and files and installs dependencies. After creating your container and your remotes go to each project folder and run npm start.

What you get

After you create a container and a remote you'll get the following:

• A container project that injects the remote project on run time.
• Global routing on the container to navigate among the remote projects.
• A remote specific routing system.
• A global state using React Context, managed by the container. The remote project has access to it via the context prop.
• Basic tests and the test suite configured.
• Support for dotenv.
• If you pass the option to deploy (-d or --deploy), the Github Worflow files for each project.

Visual representation

Known pitfalls

React Context

For managing a global state we use React Context which comes with React v16. If you can't use v16, you can use workarounds like:

• Storing shared data in localStorage
• Requesting the data from a shared API

Webpack

We're using Webpack 5, so things you have currently in your projects might not work. You need to check out the Webpack docs to see how to fix the issues.