wix / React Module Container

Why?

It's a small library that allows big things. Its main purpose is to enable building large-scale application with lazy-loaded modules based on either React or Angular.

Getting started or 4 simple steps to convert to lazy module

Step 1: Add react-module-container

Add react-module-container npm module as your dependency.

npm install --save react-module-container

Step 2: Create manifest file and register your component

Create a manifest.js file that describe your future lazy module. It can be either Angular or React lazy module.

class NgMainApp extends AngularLazyComponent {
  constructor(props) {
    super(props, {
      files: [
        `${props.topology.staticsBaseUrl}angular-client.css`,
        `${props.topology.staticsBaseUrl}angular-client.bundle.js`
      ],
      module: 'myApp',
      component: 'main-app',
      unloadStylesOnDestroy: true
    });
  }
}

ModuleRegistry.registerComponent('angular.main', () => NgMainApp);

Step 3: Load the manifest file by hosting application

Load manifest.js file in the index.html of your hosting application.

<script src="<path-to-your-manifest-file>/manifest.js"></script>

Step 4: Instantiate your lazy component

Instantiate your lazy component using ModuleRegistry and render it inside hosting application.

class App extends React.Component {
  render() {
    const AngularComponent = ModuleRegistry.component('angular.main');
    const topology = {
      staticsBaseUrl: 'http://localhost:3200'
    };

    return (
      <AngularComponent topology={topology}/>
    );
  }
}

API

• ModuleRegistry
• ReactLazyComponent
• AngularLazyComponent

Demo

• git clone [email protected]:wix/react-module-container.git
• cd react-module-container
• npm install
• npm start
• http://localhost:3200

License

The MIT License.

See LICENSE