# Ice.js — Progressive React Application Framework by Alibaba

> A React-based application framework for building enterprise-grade web applications with built-in routing, state management, and plugin architecture.

## Install

Save as a script file and run:

# Ice.js — Progressive React Application Framework by Alibaba

## Quick Use
```bash
npm init ice ice-app
cd ice-app
npm start
```

## Introduction
Ice.js is a React-based progressive application framework developed and maintained by Alibaba. It provides an opinionated project structure with file-system routing, data loading conventions, and a rich plugin ecosystem to accelerate enterprise frontend development.

## What Ice.js Does
- Provides file-system-based routing with nested layouts and data loaders
- Supports SSR, SSG, and CSR rendering modes from a single codebase
- Ships built-in state management via a lightweight store solution
- Offers a plugin system for extending build, runtime, and development features
- Generates optimized production bundles with code splitting and tree shaking

## Architecture Overview
Ice.js is built on top of Webpack and Vite as selectable build backends. The framework follows a convention-over-configuration model where page files in the `src/pages` directory automatically become routes. Data loading functions co-locate with page components. Plugins hook into both the build pipeline and the runtime lifecycle, enabling features like authentication guards, micro-frontend integration, and custom middleware.

## Self-Hosting & Configuration
- Scaffold a new project with `npm init ice` and choose a template
- Configure build options, plugins, and proxy settings in `ice.config.mts`
- Select between Webpack and Vite as the bundler via configuration
- Deploy SSR output to any Node.js server or use the built-in adapter for serverless platforms
- Enable micro-frontend mode with the `@ice/plugin-icestark` plugin for gradual migration

## Key Features
- Convention-based routing with automatic code splitting per route
- First-class SSR and SSG support with streaming rendering
- Integrated data loading with caching and preloading strategies
- Extensible plugin system with official plugins for auth, store, request, and more
- Proven at scale across hundreds of internal Alibaba applications

## Comparison with Similar Tools
- **Next.js** — the dominant React framework with Vercel hosting integration; Ice.js offers similar conventions with deeper plugin extensibility and Chinese ecosystem integration
- **Remix** — focuses on web standards and progressive enhancement; Ice.js provides more opinionated defaults for enterprise workflows
- **UmiJS** — another Alibaba-backed framework with a similar plugin model; Ice.js is lighter weight with a React-specific focus
- **Vite + React** — unopinionated and fast; Ice.js adds routing, SSR, and data conventions on top

## FAQ
**Q: Is Ice.js only for Chinese companies?**
A: No. The framework is open source with English documentation and works for any React project, though it is especially popular in Chinese enterprise environments.

**Q: Can I use Ice.js with TypeScript?**
A: Yes. TypeScript is a first-class citizen with full type safety for routes, data loaders, and configuration.

**Q: Does Ice.js support micro-frontends?**
A: Yes. The `@ice/plugin-icestark` plugin enables micro-frontend architecture for incremental adoption.

**Q: How does Ice.js compare in bundle size to Next.js?**
A: Both produce comparable output sizes. Ice.js uses aggressive tree shaking and its runtime is lightweight.

## Sources
- https://github.com/alibaba/ice
- https://v3.ice.work/

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