Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ice-lab/icestark

:tiger: Micro Frontends solution for large application（面向大型应用的微前端解决方案），站点国内镜像：https://icestark.gitee.io
https://github.com/ice-lab/icestark

frontend micro-frontends micro-frontends-solution microfrontends mpa single-spa spa

Last synced: 4 days ago
JSON representation

:tiger: Micro Frontends solution for large application（面向大型应用的微前端解决方案），站点国内镜像：https://icestark.gitee.io

Host: GitHub
URL: https://github.com/ice-lab/icestark
Owner: ice-lab
License: mit
Created: 2019-05-09T02:39:05.000Z (over 5 years ago)
Default Branch: master
Last Pushed: 2024-08-15T09:26:31.000Z (5 months ago)
Last Synced: 2024-10-29T15:34:17.571Z (2 months ago)
Topics: frontend, micro-frontends, micro-frontends-solution, microfrontends, mpa, single-spa, spa
Language: TypeScript
Homepage: https://micro-frontends.ice.work
Size: 7.79 MB
Stars: 2,033
Watchers: 42
Forks: 174
Open Issues: 142
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

awesome-micro-frontends - @ice/stark
awesome-micro-frontends - Icestark
awesome-github-star - icestark - lab | 1941 | (TypeScript)
awesome-coding-startup - icestark
awesome-micro-frontends - icestark, a micro frontends solution for large application

README

        English | [简体中文](https://ice-lab.github.io/icestark/)

# icestark

> Micro Frontends solution for large application. [Website Chinese docs](https://ice-lab.github.io/icestark/).

[![NPM version](https://img.shields.io/npm/v/@ice/stark.svg?style=flat)](https://npmjs.org/package/@ice/stark) [![build status](https://img.shields.io/travis/ice-lab/icestark.svg?style=flat-square)](https://travis-ci.org/ice-lab/icestark) [![Test coverage](https://img.shields.io/codecov/c/github/ice-lab/icestark.svg?style=flat-square)](https://codecov.io/gh/ice-lab/icestark) [![NPM downloads](http://img.shields.io/npm/dm/@ice/stark.svg?style=flat)](https://npmjs.org/package/@ice/stark) [![David deps](https://img.shields.io/david/ice-lab/icestark.svg?style=flat-square)](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/[email protected]

```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/)

## Contributors

    

        

            

            


            _那吒

        

    

    

        

            

            


            _ClarkXia

        

    

    

        

            

            


            _daysai

        

    

    

        

            

            


            _大果

        

    

    

        

            

            


            _站稳

        

    

    

        

            

            


            _许文涛

        

    

    

        

            

            


            _Skylor.Min

        

    

    

        

            

            


            _liqupan

        

    

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`.

## License

[MIT](LICENSE)