Skip to content
Production ready library for handling Microfrontends
JavaScript HTML
Branch: master
Clone or download
Cannot retrieve the latest commit at this time.
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example/my-awesome-app
src
.babelrc
.eslintignore
.eslintrc
.flowconfig
.gitignore
.npmignore
.prettierignore
LICENSE.md
README.md
package.json
rollup.config.js
yarn.lock

README.md

react-app-loader github

Production ready library for handling Microfrontends.

Demo and Example

Preview

How to use

Create a config file for each external app:

$ touch AnyExternalApp.js

Then, wrap it with withAppLoader HOC:

// @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:

// @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 <AppLoader />;
};

export default AnyExternalApp;

Import it on your React app:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import AnyExternalApp from './AnyExternalApp';

class App extends Component {
  render() {
    return (
      <div className="App">
        <AnyExternalApp />
      </div>
    );
  }
}

export default App;

Import babel-polyfill on your index.js

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

You can’t perform that action at this time.