Skip to content

React Components that facilitate loading of other React Components on another server

License

Notifications You must be signed in to change notification settings

jdnarvaez/react-micro-machine

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-micro-machine

React Components that facilitate the dynamic loading of other React Components from another server

See: micro-frontends

Usage

BundledRemoteComponent

Use this component when you are loading a bundled file that is available in the global window context. Using the following options in a Webpack configuration will create a library that is accessible via window.MyComponent:

output: {
  filename: `my-component.js`,
  library: 'MyComponent',
  libraryExport: 'default',
  libraryTarget: 'window'
},

The following props make the assumption that the stylesheet and source routes are available and serve the appropriate assets generated from bundling the component above:

const props = {
  server : 'http://localhost:9000',
  stylesheet : '/api/v1/client/stylesheet', // returns a CSS stylesheet
  source : '/api/v1/client/source', // returns a bundled webpack JS file
  componentName : 'MyComponent' // Name of our component
};

ReactDOM.render(React.createElement(BundledRemoteComponent, props), document.getElementById('root'));

ESMRemoteComponent

Use this component when you are loading a bundled file that is an ES6 Module that can be loaded via dynamic import. In this case we do not need to know what the library name is, as the library is accessible from the dynamic import statement, instead of within the global window context.

const WrapperPlugin = require('wrapper-webpack-plugin')
.
.
.
output: {
  filename: `my-component.js`,
  library: 'MyComponent',
  libraryExport: 'default',
  libraryTarget: 'var'
},
plugins : [
.
.
.
  new WrapperPlugin({
    test: /^my-component.*js$/,
    footer: 'export default MyComponent',
  }),    
  .
  .
  .
]

The following props make the assumption that the stylesheet and source routes are available and serve the appropriate assets generated from bundling the component above:

const props = {
  server : 'http://localhost:9000',
  stylesheet : '/api/v1/client/stylesheet', // returns a CSS stylesheet
  source : '/api/v1/client/source', // returns a valid ES6 Module file
};

ReactDOM.render(React.createElement(ESMRemoteComponent, props), document.getElementById('root'));

About

React Components that facilitate loading of other React Components on another server

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published