https://github.com/entria/react-app-loader
Production ready library for handling Microfrontends
https://github.com/entria/react-app-loader
app apploader higher-order-component hoc microfrontends react react-dom
Last synced: 11 months ago
JSON representation
Production ready library for handling Microfrontends
- Host: GitHub
- URL: https://github.com/entria/react-app-loader
- Owner: entria
- License: mit
- Created: 2018-04-01T19:06:46.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-04-03T17:14:37.000Z (almost 8 years ago)
- Last Synced: 2025-04-12T09:12:15.763Z (11 months ago)
- Topics: app, apploader, higher-order-component, hoc, microfrontends, react, react-dom
- Language: JavaScript
- Homepage: https://entria.github.io/react-app-loader/
- Size: 635 KB
- Stars: 75
- Watchers: 19
- Forks: 2
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# react-app-loader [](https://github.com/entria/react-app-loader/issues)
Production ready library for handling Microfrontends.
## [Demo](https://entria.github.io/react-app-loader/) and [Example](https://github.com/jgcmarins/react-app-loader/tree/master/example/my-awesome-app)
## How to use
### Create a config file for each external app:
```
$ touch AnyExternalApp.js
```
### Then, wrap it with `withAppLoader` [HOC](https://reactjs.org/docs/higher-order-components.html):
```jsx
// @flow
import withAppLoader from '@entria/react-app-loader';
const elementId = 'github';
const appUrl = 'https://github.com/';
const AppLoader = withAppLoader({ elementId, appUrl });
export default AppLoader;
```
#### Or you can try a more complex way, passing some `props`:
```jsx
// @flow
import React from 'react';
import withAppLoader from '@entria/react-app-loader';
const elementId = 'github';
const appUrl = 'https://github.com/';
type Props = {
externalUrl: string,
};
const AnyExternalApp = (props: Props) => {
const { externalUrl } = props;
const AppLoader = withAppLoader({
elementId,
appUrl: externalUrl != null && externalUrl.length > 0 ? externalUrl : appUrl
});
return ;
};
export default AnyExternalApp;
```
### Import it on your React app:
```jsx
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import AnyExternalApp from './AnyExternalApp';
class App extends Component {
render() {
return (
);
}
}
export default App;
```
### Import `babel-polyfill` on your `index.js`
```jsx
import 'babel-polyfill';
```
### Run \o/
## Handling cors during development
On Google Chrome, just install this extension: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi
## License
[MIT](https://github.com/entria/react-app-loader/blob/master/LICENSE.md)