Holocron Modules or "Modules" are self contained Web Experiences that consist of React Components, Redux Reducers and Actions as well as Routes. In practice, Modules are developed, bundled, and operate in isolation to one another. The One App Server uses a Module Map containing URLs to Module bundles (e.g. my-module.browser.js) to load and serve bundles upon request. When the Server receives an HTTP request, it renders one or more Modules on the Server. Similar to React Components, Modules are composable (e.g. Modules may load other Modules). The first or entrypoint Module is called the "Root Module". The Root Module loads other "Child Modules". Overall, this development pattern in One App may be characterized as the Micro Front End pattern.
Holocron Modules have their own Module Lifecycle Hooks:
Shape
function HelloWorldModule() {
return (
<h1>Hello World</h1>
);
}
// See "Routing" section
HelloWorldModule.childRoutes = (store) => {
// return Route Components
};
// See "Loading Data" section
HelloWorldModule.holocron = {
loadModuleData: async ({
store, fetchClient, ownProps, module,
}) => {
// Async Requests on Module Load
},
};
// See "App Configuration" section
if (!global.BROWSER) {
HelloWorldModule.appConfig = {
// appConfig directives
};
}
export default HelloWorldModule;Contents
The One App Server, one-app, provides a runtime for serving an HTML document with asset tags (Style tags, Script tags etc.) and preloaded Redux state required to bootstrap a Holocron Module driven Single Page Application (SPA). The one-app server enables a full development environment locally as well as an efficient production environment able to be deployed and scaled on cloud infrastructure.
Contents