UmiJS — Enterprise-Level React Application Framework

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/