dahliacreative / appletizer

A lightweight framework for creating micro frontend applications with react

About

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.

Install

NPM

npm i appletizer

Yarn

yarn add appletizer

API

Configuring Applets

configureApplets(config: {
  [key: string]: IAppletConfig
})

IAppletConfig {
  host: string
  context?: any
}

Initializing Applets

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)

Usage Example

Prerequisite

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"
  }
}

Spine Application (with router)

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

Applet

import { initializeApplet, useAppletContext } from "appletizer";

const App = () => {
  const { user } = useAppletContext();
  return <h1>Hi {context.user}. Welcome to this cool applet!</h1>;
};

initializeApp("Home", App, {});

Developing applets in isolation

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 initialized
• REACT_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"

Contributing

We welcome contibutions, if you would like to contribute, please read our guidelines

License

MIT Licensed. Copyright © dahliacreative.

appletizer's Issues

[Bug]: Isolation mode runs true even if set to false in env

Describe the bug

Setting REACT_APP_ISOLATED_APPLET to false doesn't work as value comes in as a string and returns truthy.

To Reproduce

No response

Additional context

No response