Applet.izer is a lightweight framework for creating micro frontend applications with react. It allows you to pull applications from multiple hosts into a single "spine" application.
npm i appletizer
yarn add appletizer
configureApplets(config: {
[key: string]: IAppletConfig
})
IAppletConfig {
host: string
context?: any
}
N.B. The third paramater is optional and is for providing static mocked context for when developing your applet in isolation. Providing this option allows you to pass context to your applet without having to have your spine application running at the same time.
initializeApplet(key: string, applet: React.FC, developmentContext?: any)
In order for applet.izer to work, the server for your applets must host an asset-manifest.json
at the root pointing to the main entry point.
{
"files": {
"main.js": "/path/to/your/bundle.js"
}
}
import { configureApplets } from "appletizer";
const App = () => {
const Applets = configureApplets({
Home: {
host: "http://localhost:3001",
context: {
user: "John Smith",
},
},
});
return (
<Router>
<Route path="/" component={Applets.Home} />
</Router>
);
// Without routing
// return <Applets.Home />;
};
import { initializeApplet, useAppletContext } from "appletizer";
const App = () => {
const { user } = useAppletContext();
return <h1>Hi {context.user}. Welcome to this cool applet!</h1>;
};
initializeApp("Home", App, {});
In order to develop your applet in isolation (without the spine app running), you will need to run your applet with the following environment variables:
REACT_APP_ISOLATED_APPLET=true
REACT_APP_ISOLATED_CONTAINER=yourContainerId
REACT_APP_ISOLATED_APPLET
this tells applet.izer that you are developing in isolation and therefore the applet will mount when initializedREACT_APP_ISOLATED_CONTAINER
is optional and is where you want your applet to be mounted, we presume usage of CRA therefore if not set, the default is"root"
We welcome contibutions, if you would like to contribute, please read our guidelines
MIT Licensed. Copyright © dahliacreative.