create-yg-app

CLI tool to scaffold a microfrontend starter project with Turborepo, React, Webpack Module Federation, Tailwind CSS, and shadcn/ui.

Features

• 🚀 Microfrontend Architecture - Built with Webpack Module Federation
• ⚡ Turborepo - High-performance monorepo build system
• ⚛️ React 18 - Modern React with latest features
• 🎨 Tailwind CSS v4 - Utility-first CSS framework
• 🧩 shadcn/ui - Beautiful and accessible component library
• 📦 TypeScript - Full TypeScript support
• 🔧 Hot Module Replacement - Fast development experience

Installation

npm install -g create-yg-app
# or
pnpm add -g create-yg-app
# or
yarn global add create-yg-app

Usage

create-yg-app my-app
# or
npx create-yg-app my-app

This will create a new microfrontend project with:

• Host app (apps/host) - Main application that hosts other microfrontends
• About app (apps/about) - Example remote microfrontend
• Shared packages - UI components, ESLint config, TypeScript config

Project Structure

my-app/
├── apps/
│   ├── host/          # Host application (main app)
│   └── about/         # Remote micro-frontend
└── packages/
    ├── ui/             # Shared UI components
    ├── eslint-config/  # Shared ESLint config
    └── typescript-config/ # Shared TypeScript config

Getting Started

After creating your project:

cd my-app
pnpm install
pnpm dev

This will start:

• Host app: http://localhost:3000
• About app: http://localhost:3001

Development

To develop this CLI tool locally:

pnpm install
pnpm build
pnpm dev

Publishing

pnpm build
npm publish

Learn More

• Turborepo Documentation
• Webpack Module Federation
• shadcn/ui
• Tailwind CSS