ext-loader

Loading external components from other application

Install

npm install --save ext-loader

Usage

Use case: App2 will load two components from App1

App1:

Define two components as normal

const AddTodo = function(){}
const TodoList = function(){}

Define app component

function App1(props: any) {

  return (
    <Provider store={store}>
      <React.StrictMode>
        {props.children}
      </React.StrictMode>
    </Provider>
  );
}

Export the components with the App1

import { exportToExternal } from 'ext-loader';

exportToExternal('app1', ReactDOM.render, App1,
  {
    'AddTodo': AddTodo,
    'TodoList': TodoList
  });

Source code https://github.com/ppout102/demo-app-1

App2:

index.html

<-! js output of from App1 -->
<script src="http://localhost:3000/static/js/bundle.js"></script>
<script src="http://localhost:3000/static/js/vendors~main.chunk.js"></script>
<script src="http://localhost:3000/static/js/main.chunk.js"></script>

<-! js output of from App2 -->
<script src="/static/js/bundle.js"></script><script src="/static/js/vendors~main.chunk.js"></script><script src="/static/js/main.chunk.js"></script></body>

Load App1 components

import LoadFromExternal from 'ext-loader';

<LoadFromExternal appName="app1" comName="AddTodo" comProps={{...}} />
<LoadFromExternal appName="app1" comName="TodoList"  />

Source code https://github.com/ppout102/demo-app-2

License

MIT © Blue Moon