Mashroom Server

How does it work?

Mashroom Server is basically just a plugin loader that scans npm packages for plugin definitions (in package.json or mashroom.json) and loads them at runtime. Such a plugin could be an Express webapp or a SPA or more generally all kind of code it knows how to load, which is determined by the available plugin loaders. Plugin loaders itself are also just plugins, so it is possible to add any type of custom plugin type.

Additionally, Mashroom Server provides a plugin context on the server-side and client-side with access to (extensible services), security, logging facility and more.

Example: Integrate a SPA

First of all you need a bootstrap that will be called by Mashroom Portal with a host element to integrate into and a context (user, ...):

import React from 'react';
import {render, unmountComponentAtNode} from 'react-dom';
import App from './App';

import type {MashroomPortalAppPluginBootstrapFunction} from '@mashroom/mashroom-portal/type-definitions';

const bootstrap: MashroomPortalAppPluginBootstrapFunction = (portalAppHostElement, portalAppSetup, clientServices) => {
    const {appConfig, user} = portalAppSetup;
    const {messageBus} = clientServices;

    render(<App appConfig={appConfig} messageBus={messageBus}/>, portalAppHostElement);

    return {
        willBeRemoved: () => {
            unmountComponentAtNode(portalAppHostElement);
        }
    };
};

(global as any).startReactDemoApp = bootstrap;

And then you need to add some metadata to package.json or in a separate mashroom.json file:

{
    "$schema": "https://www.mashroom-server.com/schemas/mashroom-plugins.json",
    "devModeBuildScript": "build",
    "plugins": [
        {
            "name": "Mashroom Portal Demo React App",
            "type": "portal-app2",
            "clientBootstrap": "startReactDemoApp",
            "resources": {
                "js": ["bundle.js"]
            },
            "local": {
                "resourcesRoot": "./dist",
            },
            "defaultConfig": {
                "title": "Demo React App",
                "category": "Demo",
                "appConfig": {
                    "markdownMessage": "Some message",
                    "pingButtonLabel": "Send Ping"
                }
            }
        }
    ]
}