# @ice/stark
> Icestark is a JavaScript library for multiple projects, Ice workbench solution.
Latest version **2.8.4** (published 2025-06-03) · MIT license · 0 weekly downloads
## Install
```sh
npm install @ice/stark
pnpm add @ice/stark
yarn add @ice/stark
bun add @ice/stark
```
## Health
**Score 50/100 (C)** — status: stable.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads.
Negative: stale.
## Facts
| | |
|---|---|
| Version | 2.8.4 |
| Published | 2025-06-03 |
| First published | 2019-06-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 162.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2076 |
| Maintainers | answershuto, chenjun1011, sobear, clarkxia, rax-publisher, luhengchang228, linbudu |
| Keywords | ice, react, microfrontends |
## Links
- npm: https://www.npmjs.com/package/@ice/stark
- Repository: https://github.com/ice-lab/icestark
- Issues: https://github.com/alibaba/ice/issues
- npm.io page: https://npm.io/package/@ice/stark
## Dependencies (5)
- [url-parse](https://npm.io/package/url-parse.md) ^1.1.9
- [@ice/sandbox](https://npm.io/package/@ice/sandbox.md) ^1.0.4
- [lodash.isempty](https://npm.io/package/lodash.isempty.md) ^4.4.0
- [lodash.isequal](https://npm.io/package/lodash.isequal.md) ^4.5.0
- [path-to-regexp](https://npm.io/package/path-to-regexp.md) ^1.7.0
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 2.8.4 (latest) — 2025-06-03
- 2.8.5-1 (beta) — 2026-02-24
- 2.8.0-2 (alpha) — 2025-04-07
- 2.8.5-0 — 2025-09-18
- 2.8.4-1 — 2025-05-30
- 2.8.4-0 — 2025-05-29
- 2.8.3 — 2025-05-14
- 2.8.3-1 — 2025-05-14
- 2.8.3-0 — 2025-05-14
- 2.8.2 — 2025-04-28
- 2.8.1 — 2025-04-09
- 2.8.0 — 2025-04-09
- 2.7.6-1 — 2023-09-21
- 2.7.6-0 — 2023-02-17
- 2.7.5 — 2023-01-11
- … 144 more at https://npm.io/package/@ice/stark/versions
## README
English | [简体中文](https://ice-lab.github.io/icestark/)
# icestark
> Micro Frontends solution for large application. [Website Chinese docs](https://ice-lab.github.io/icestark/).
[](https://npmjs.org/package/@ice/stark) [](https://travis-ci.org/ice-lab/icestark) [](https://codecov.io/gh/ice-lab/icestark) [](https://npmjs.org/package/@ice/stark) [](https://david-dm.org/ice-lab/icestark)
## Features 🎉
- No framework constraint for main&sub applications, support React/Vue/Angular/...
- Sub-application support multiple types of entry: js&css, html entry, html content
- Compatible with [single-spa](https://single-spa.js.org/) sub-application and lifecycles
- JavaScript sandbox by `Proxy` API
## Showcases 🎃
### Vue main-application
https://icestark-vue.surge.sh/
Main-application based on Vue, And sub-applications based on React, Vue respectively.
### React main-application
https://icestark-react.surge.sh/
Main-application based on React, And sub-applications based on React, Vue, Angular respectively.
## Architecture&Concepts 🚁
Concepts:
- Main-application: also named framework application, responsible for sub-applications registration&load&render, layout display (Header, Sidebar, Footer, etc.)
- Sub-application: responsible for content display related to its own business
## Getting Started 🥢🍚
### Use Scaffold
Main-application:
```bash
# Based on React
$ npm init ice icestark-layout @icedesign/stark-layout-scaffold
# Based on Vue
$ npm init ice icestark-layout @vue-materials/icestark-layout-app
$ cd icestark-layout
$ npm install
$ npm start
```
Sub-application:
```bash
# Based on React
$ npm init ice icestark-child @icedesign/stark-child-scaffold
# Based on Vue
$ npm init ice icestark-child @vue-materials/icestark-child-app
$ cd icestark-child
$ npm install
$ npm run start
```
### Main-application
#### setup in react app
```javascript
// src/App.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { AppRouter, AppRoute } from '@ice/stark';
class App extends React.Component {
onRouteChange = (pathname, query) => {
console.log(pathname, query);
};
render() {
return (
this is common header
js bundle loaded error }
NotFoundComponent={NotFound
}
>
this is common footer
);
}
}
ReactDOM.render(, document.getElementById('ice-container'));
```
- `AppRouter` locates the sub-application rendering node
- `AppRoute` corresponds to the configuration of a sub-application, `path` configures all route information, `basename` configures a uniform route prefix, `url` configures assets url
- `icestark` will follow the route parsing rules like to determine the current `path`, load the static resources of the corresponding sub-application, and render
#### setup with APIs
> supported by @ice/stark@2.0.0
```javascript
import { registerMicroApps } from '@ice/stark';
regsiterMicroApps([
{
name: 'app1',
activePath: ['/', '/message', '/about'],
exact: true,
title: '通用页面',
container: document.getElementById('icestarkNode'),
url: ['//unpkg.com/icestark-child-common/build/js/index.js'],
},
{
name: 'app2',
activePath: '/seller',
title: '商家平台',
container: document.getElementById('icestarkNode'),
url: [
'//unpkg.com/icestark-child-seller/build/js/index.js',
'//unpkg.com/icestark-child-seller/build/css/index.css',
],
},
]);
start();
```
after sub-application is registered, icestark will load app according to the `activePath`.
### Sub-application
sub-application can expose lifecycles in both register lifecycles and export lifecycles(umd) ways.
#### 1. regsiter lifecycles
```javascript
// src/index.js
import ReactDOM from 'react-dom';
import { isInIcestark, getMountNode, registerAppEnter, registerAppLeave } from '@ice/stark-app';
import router from './router';
if (isInIcestark()) {
const mountNode = getMountNode();
registerAppEnter(() => {
ReactDOM.render(router(), mountNode);
});
// make sure the unmount event is triggered
registerAppLeave(() => {
ReactDOM.unmountComponentAtNode(mountNode);
});
} else {
ReactDOM.render(router(), document.getElementById('ice-container'));
}
```
- Get the render `DOM Node` via `getMountNode`
- Trigger app mount manually via `registerAppEnter`
- Trigger app unmount manually via `registerAppLeave`
```javascript
// src/router.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
import { renderNotFound, getBasename } from '@ice/stark-app';
function List() {
return List
;
}
function Detail() {
return Detail
;
}
export default class App extends React.Component {
render() {
return (
{
return renderNotFound();
}}
/>
);
}
}
```
- Get the `basename` configuration in the framework application via `getBasename`
- `renderNotFound` triggers the framework application rendering global NotFound
#### 2. exports lifecycles(umd)
exports lifecycles in sub-application:
```javascript
import ReactDOM from 'react-dom';
import App from './app';
export function mount(props) {
ReactDOM.render(, document.getElementById('icestarkNode'));
}
export function unmount() {
ReactDOM.unmountComponentAtNode(document.getElementById('icestarkNode'));
}
```
sub-application should be bundled as an UMD module, add the following configuration of webpack:
```javascript
module.exports = {
output: {
library: 'sub-app-name',
libraryTarget: 'umd',
},
};
```
## Documentation 📝
[https://micro-frontends.ice.work/](https://micro-frontends.ice.work/)
## Ecosystem 🧼
| Project | Version | Docs | Description |
|----------------|-----------------------------------------|--------------|-----------|
| [icejs] | [![icejs-status]][icejs-package] | [docs][icejs-docs] |A universal framework based on react.js|
| [icestore] | [![icestore-status]][icestore-package] | [docs][icestore-docs] |Simple and friendly state for React|
| [formily] | [![formily-status]][formily-package] | [docs][formily-docs] | Alibaba Group Unified Form Solution |
| [iceworks]| [![iceworks-status]][iceworks-package] | [docs][iceworks-docs] | Universal Application Development Pack for VS Code |
[icejs]: https://github.com/alibaba/ice
[icestore]: https://github.com/ice-lab/icestore
[iceworks]: https://github.com/ice-lab/iceworks
[formily]: https://github.com/alibaba/formily
[icejs-status]: https://img.shields.io/npm/v/ice.js.svg
[icestore-status]: https://img.shields.io/npm/v/@ice/store.svg
[iceworks-status]: https://vsmarketplacebadge.apphb.com/version/iceworks-team.iceworks.svg
[formily-status]: https://img.shields.io/npm/v/@formily/react.svg
[icejs-package]: https://npmjs.com/package/ice.js
[icestore-package]: https://npmjs.com/package/@ice/store
[iceworks-package]: https://marketplace.visualstudio.com/items?itemName=iceworks-team.iceworks
[formily-package]: https://npmjs.com/package/@formily/react
[icejs-docs]: https://ice.work/docs/guide/intro
[icestore-docs]: https://github.com/ice-lab/icestore#icestore
[iceworks-docs]: https://ice.work/docs/iceworks/about
[formily-docs]: https://formilyjs.org/
## Contributors
Feel free to report any questions as an [issue](https://github.com/ice-lab/icestark/issues/new), we'd love to have your helping hand on `icestark`.
If you're interested in `icestark`, see [CONTRIBUTING.md](https://github.com/alibaba/ice/blob/master/.github/CONTRIBUTING.md) for more information to learn how to get started.
## License
[MIT](LICENSE)
---
_Source: https://npm.io/package/@ice/stark · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._