# UmiJS — Enterprise-Level React Application Framework

> A pluggable enterprise-level React framework by Ant Group that provides routing, build tooling, and a rich plugin ecosystem out of the box. Designed for large-scale web applications with conventions that reduce configuration overhead.

## Install

Save as a script file and run:

# UmiJS — Enterprise-Level React Application Framework

## Quick Use
```bash
# Create a new Umi project
npx create-umi@latest my-app
cd my-app
npm install
npm run dev
# Open http://localhost:8000
```

## Introduction
UmiJS is an extensible enterprise-level React application framework created by the Ant Group (the team behind Ant Design). It combines routing, build tooling, and a convention-over-configuration approach into a cohesive developer experience, powering thousands of production applications within Alibaba and the broader community.

## What UmiJS Does
- Provides file-system-based routing that generates routes from the pages directory structure
- Bundles applications with a pre-configured MPACK/webpack pipeline and built-in optimizations
- Offers a plugin system where features like data fetching, i18n, and access control are first-class plugins
- Generates server-side rendered (SSR) and statically generated pages for SEO and performance
- Integrates tightly with Ant Design and Ant Design Pro for enterprise admin dashboards

## Architecture Overview
Umi is built on a micro-kernel plugin architecture. The core provides lifecycle hooks (onStart, modifyRoutes, addHTMLHeadScripts, etc.) that plugins tap into to add capabilities. The routing layer reads the file system to generate a route config, then hands it to React Router. The build pipeline wraps webpack (or MPACK in Umi 4) with sensible defaults and exposes configuration through .umirc.ts. Plugins communicate through a shared API context, keeping the core small while enabling a rich ecosystem.

## Self-Hosting & Configuration
- Scaffold a project with create-umi and start developing immediately
- Configure routes, proxies, and plugins in .umirc.ts or config/config.ts
- Enable plugins like @umijs/plugin-access for role-based route guards
- Use the mock directory for API mocking during development
- Deploy static builds to any CDN or configure SSR for Node.js server deployment

## Key Features
- File-system routing that eliminates manual route configuration
- Plugin ecosystem covering data flow, internationalization, access control, and analytics
- Built-in MPACK bundler with code splitting, tree shaking, and module federation
- Convention-based project structure that scales from prototypes to enterprise monorepos
- First-class TypeScript support with full type inference across routes and plugins

## Comparison with Similar Tools
- **Next.js** — the dominant React meta-framework with Vercel backing; UmiJS is more convention-driven and tightly integrated with Ant Design for admin-style apps
- **Remix** — focuses on web fundamentals (loaders, actions, forms); UmiJS provides a richer plugin system for enterprise features
- **Vite + React Router** — lighter starting point; UmiJS adds routing conventions, plugin infrastructure, and build configuration on top
- **Create React App** — simpler but less opinionated; UmiJS includes routing, data fetching, and access control that CRA leaves to the developer
- **Ant Design Pro** — an admin template built on UmiJS; Pro is the starter kit while UmiJS is the underlying framework

## FAQ
**Q: Do I need to use Ant Design with UmiJS?**
A: No. UmiJS works with any React component library. Ant Design integration is available through an optional plugin.

**Q: Does UmiJS support server-side rendering?**
A: Yes. Umi 4 supports SSR and static site generation through configuration flags.

**Q: How does UmiJS handle state management?**
A: UmiJS includes built-in support for lightweight data flow via the @umijs/plugin-model plugin. You can also use Redux, Zustand, or any other state library.

**Q: Is UmiJS actively maintained?**
A: Yes. Umi 4 (the latest major version) is actively developed by the Ant Group open-source team with regular releases.

## Sources
- https://github.com/umijs/umi
- https://umijs.org/

---
Source: https://tokrepo.com/en/workflows/asset-6df7553c
Author: Script Depot