skills.rest
chrisjwalk
chrisjwalkCOMMUNITY
Explore all skills by this author →
GitHub

create-mfe

Create and wire a new micro-frontend in an Nx + Angular workspace.

71|28|Updated Dec 30, 2017
Search Tags:#angular#vite#workspaces#nx#micro-frontend#module-federation#mfe
One-click install
npx skills add https://github.com/chrisjwalk/angular-cli-netcore-ngrx-starter --skill create-mfe
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-mfe
Source: https://github.com/chrisjwalk/angular-cli-netcore-ngrx-starter/tree/main/.claude/skills/create-mfe
Command: npx skills add https://github.com/chrisjwalk/angular-cli-netcore-ngrx-starter --skill create-mfe

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamlines adding a new micro-frontend (MFE) to an Nx + Angular workspace by consolidating remote host wiring, Module Federation setup, and deployment steps into a repeatable pattern.

Core Features & Use Cases

  • Provides a proven blueprint for creating a new remote app, exposing feature routes, and wiring them into a host.
  • Covers vite.config setup, shared singletons, NG0912 prevention, test stubs, CI/deployment, and end-to-end validation.
  • Supports optional resources (scripts, references, assets) as needed by the workflow.

Quick Start

Execute the recommended steps to create and integrate a new micro-frontend (MFE) into the workspace.

Frequently Asked Questions about create-mfe

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a new micro-frontend to an Nx Angular workspace?▼

Adding a new micro-frontend to an Nx Angular workspace involves creating a remote app, configuring Module Federation in vite.config, exposing feature routes, and wiring the remote into the host application.

What's the best way to configure shared singletons in a Vite Module Federation setup?▼

Configuring shared singletons in a Vite Module Federation setup requires defining shared dependencies in vite.config to prevent duplication and avoid circular dependency issues across remote and host apps.

Does this micro-frontend approach support Analog.js with Vite?▼

Yes, this micro-frontend approach supports Analog.js with Vite, providing a blueprint for vite.config setup, shared singletons, and NG0912 prevention within an Nx monorepo environment.

Why does NG0912 error occur in Angular micro-frontends and how can I prevent it?▼

The NG0912 error in Angular micro-frontends occurs due to shared dependency mismatches. You can prevent it by correctly configuring shared singletons and dependency injection scopes across the host and remote apps.

How do I set up CI and deployment for Nx Angular micro-frontends?▼

Setting up CI and deployment for Nx Angular micro-frontends involves configuring build pipelines for each remote app, validating end-to-end checks, and ensuring proper test stubs are in place.

Related Skills

Explore More Software Engineering Skills→
devswapnil1995devswapnil1995

nx-run-tasks

Run and manage Nx workspace tasks for build, test, lint, and serve workflows.

Community
Intermediate
Intension-usIntension-us

land-and-deploy

Merge PRs, deploy to production, and verify health via canary checks.

Official
Intermediate
Jeff-StapletonJeff-Stapleton
1

microfrontend-nx

Standardize microfrontend development in NX monorepos with Module Federation.

Community
Advanced
Freddy-18-18Freddy-18-18

nx-plugins

Discover and install Nx plugins to extend monorepo workspace capabilities.

Community
Basic