Non-Potable Macchiato

    micro-frontend

    0.0.9 • Public • Published

    中文 | English

    micro-frontend

    ✨🌟✨ A single-SPA solution for frontend, use it only need to learn 3 APIs in 3 minutes.

    • Use multiple projects on the same page without refreshing the page.
    • Write code using a new project, without rewriting your existing app.
    • Lazy load code for improved initial load time with Webpack Code-Splitting.

    Usage

    • step one: Create an host object.

    frontend-host project

    // ...
    import app1 from '../../frontend-1/src/main'
    import app2 from '../../frontend-2/src/main'
    import microfe from 'micro-frontend'
     
    const host = microfe.createHost() // 1
     
    host.createApp({ // 2
      path: '/',
      render() {/*  */}
      // if Vue: new Vue({ render: h => h(App) }).$mount('#app')
      // if React: ReactDOM.render(<App />, document.querySelector('#app'))
      // if Angular: ??
    })
    host.createApp(app1)
    host.createApp(app2)
     
    host.start() // 3
    • step two: Register each child app to the host object:

    forntend-1 project

    // ...
    const host = microfe.createHost()
    const app = {
      path: '/demo1',
      render() {/* your render code*/}
    }
     
    host.createApp(app) // The same app reference or app.path will be called only once too.
     
    /* if u wanna run this child project single, open following code */
    // host.start()
    export default app;

    forntend-2 project

    // ...
    const host = microfe.createHost() // it is a singleton object, so don't worry how many times it be called.
    const app = {
      path: '/demo1',
      render() {/* your render code*/}
    }
     
    host.createApp(app) // The same app reference or app.path will be called only once too.
     
    /* if u wanna run this child project single, open following code */
    // host.start()
    export default app;

    more and more ...

    • step three: Run the host project which one u called host.start() method.

    TODOs

    • Supports any frontend framework, Angular ??
    • lazy load each child app's entry component
    • build each child app independent and separately

    Questions

    The following questions i am not very clear yet or no any good idea about them.

    • how to manage common dependencies of each child app?
    • how to deploy them? Only deploy host project or every portal project? Or a middle layer server?

    Troubleshooting

    • if u met one error like this Error: No ESLint configuration found. when u run this project, may this link github issue can help you.
    INFO  Starting development server... 94% after seal
     
    ERROR  Failed to compile with 1 errors
     
    Module build failed (from ./node_modules/_eslint-loader@2.1.1@eslint-loader/index.js):
      Error: No ESLint configuration found.    at Config.getLocalConfigHierarchy

    Install

    npm i micro-frontend

    DownloadsWeekly Downloads

    9

    Version

    0.0.9

    License

    MIT

    Unpacked Size

    9.32 kB

    Total Files

    8

    Last publish

    Collaborators

    • givingwu