create-react-microfrontend

    0.1.1 • Public • Published

    Create React MicroFrontEnd

    Library that provides the ability to render a Create React App project within another React app.

    Setup

    1. Install

    yarn add or npm install create-react-microfrontend

    2. In the Create React App you want to be the micro frontend, in index.js:

    import { createMicroFrontend } from 'create-react-microfrontend'
    
    const reactRender = (renderProps, container) => {
        ReactDOM.render(
            <Router history={customHistory}>
                <App {...renderProps} />
            </Router>,
            container
        )
    }
    
    createMicroFrontend(
        reactRender,
        'POP', // App name
        false, // noMFE
        props, // localProps
        'root' // containerId
    )
    

    The reactRender function needs to be created to allow applying props from the parent app, and which component to apply them to. If, for instance, you had some further HOCs which wrapped around <App />. It also allows for the flexibility of applying props locally, for development pruposes.

    To develop locally, in the third argument, pass true (the noMFE option), and it will render the app to the containerId provided, and will apply the supplied localProps to the reactRender function. This noMFE option would be a good place to use process.env.NODE_ENV === 'development'.

    The appName will need to match the appName in the next step to retrieve the matching MFE.

    3. useMicroFrontendReact in the parent application

    Example :

    import { useMicrofrontendReact } from 'create-react-microfrontend';
    
    const [isLoaded, POP] = useMicrofrontendReact('POP', 'http://localhost:3000');
    
     React.useEffect(() => {
        if (!isLoaded) {
          return;
        }
        const { render, unmount } = POP;
    
        render(id, POPProps);
        return () => unmount(id);
      },              [isLoaded]);
    
    

    useMicrofrontendReact(appName, microFrontendURL) returns isLoaded and the application functions of render(id, props) and unmount(id). Once the application is fetched, isLoaded returns true and the app can be rendered, and then unmount can be used in the cleanup as a returned function to a useEffect.

    Keywords

    none

    Install

    npm i create-react-microfrontend

    DownloadsWeekly Downloads

    1

    Version

    0.1.1

    License

    ISC

    Unpacked Size

    15.1 kB

    Total Files

    14

    Last publish

    Collaborators

    • cavaloni