benx4-bee-hive v0.3.3

benx4-bee-hive

This module is a very basic framework to create a micro-frontend.

Usage:

To create a page by using this module, you must give out a json to the beehive, as follow:

    const pages = {
        "/home": [
            {
                "mount": "#top",
                "script": "_scripts_main-top.js"
            },
            {
                "mount": "#center",
                "script": "_scripts_main-center.js"
            },
            {
                "mount": "#bottom",
                "script": "_scripts_main-bottom.js"
            }
        ],
        "/detail": [
            {
                "mount": "#top",
                "script": "_scripts_detail-top.js"
            },
            {
                "mount": "#center",
                "script": "_scripts_detail-center.js"
            },
            {
                "mount": "#bottom",
                "script": "_scripts_detail-bottom.js"
            }
        ],
        "/profile": [
            {
                "mount": "#center",
                "script": "_scripts_profile-center.js"
            }
        ]
    }

The json is mainly to describe the page of whose the partial view included.

After the json created. Here is the example:

    const beeHive = BeeHive.createInstance(pages);
    beeHive.init();

    window.addEventListener("load", function () {
        document.querySelector("#btnDetail").onclick = function () {
            beeHive.attach(“_detail”);	/_dynamically attach the page on the mount point.
        }

        document.querySelector("#btnProfile").onclick = function () {
            beeHive.attach(“/profile”);
        }
        document.querySelector("#btnHome").onclick = function () {
            beeHive.attach(“/home”);
        }
    });

and don’t forget if you wanna by using this method to complete the micro-frontend, you must set the nginx etc. server to accept the request, here I provide the nginx.conf which maybe needed.

    worker_processes 1;

    events {
        worker_connections 1024;
    }

    http {
        server {
            server_name localhost;
            listen 8050;

            location / {

                root _xxx_hive-path;
                index index.html;

                try_files $uri $uri/ /index.html; # the index.html is the page you need to set to accept the param or query sting
            }
        }
    }