GithubHelp home page GithubHelp logo

dahliacreative / appletizer Goto Github PK

View Code? Open in Web Editor NEW
0.0 2.0 0.0 894 KB

A lightweight framework for creating micro frontend applications with react

License: MIT License

JavaScript 11.10% TypeScript 88.90%
microfrontend-architecture microfrontends react reactjs

appletizer's Introduction

applet.izer

GitHub license npm version CircleCI Codacy Badge Codacy Badge

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 People

Contributors

dahliacreative avatar

Watchers

 avatar  avatar

appletizer's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.