What Is Holocron?
What if I told you that you could deploy parts of your Server Side Rendered React applications without restarting the server?
Discover Holocron: The backbone of One App, a new modular take on web application development.
Independent modules, independent deployments
You probably have heard about Micro Frontends, the new buzz word in the Frontend Community. Its premise is to allow you to split your monolithic frontend applications into small, tested, and individually deployed modules.
Holocron modules allow you to code split your application by default; setting the scope of your micro frontend as well as enabling reusability achieved by module composition.
Let’s create your first Holocron
Head over to your terminal with NodeJS installed and paste the following:
export NODE_ENV=development
npx -p yo -p @americanexpress/generator-one-app-module -- yo @americanexpress/one-app-moduleWhen prompted, choose root module. This will be the entry point of your application where the routing and composition of other Holocron modules will happen.
Once the generator is done, go to your shiny new module and run the default command npm start. This will download the latest version of One App from Docker hub (Docker required).
Go to localhost:3000 and you should see the default welcome message.
Congratulations, you have successfully created your first Holocron module!
How does it work?
Holocron maintains an in-memory registry of Modules that can be updated dynamically without requiring a server restart. The idea is that an application can update Holocron’s module registry whenever a new Holocron Module is to be added to the application’s runtime. The result is an application that can have React components updated/added to it at runtime.
One App is the NodeJS server that acts as the orchestrator and stitches all your modules together as well as Server-Side Render your application.
In Production
Holocron modules are bundled and their static assets deployed to a CDN. The One App Server instance polls the module map periodically for updates to the module versions as well as new modules recently deployed.
The module map is a simple JSON file that contains the list of Holocron modules, their versions, and a link to their CDN location. Think of this file as your package.json, but instead of a list of dependencies, we have a list of modules.
Modules can be deployed to any location and they don’t even have to be on the same CDN.
In Development
Modules are served locally by adding them to the modules array in our package.json.
The npm start command uses Docker to download and start the One App Server locally; It will also start a CDN server that will host and serve our development module map and local modules.
By Passing the moduleMapUrl option in the runner section, the One App Server can download remote modules and serve them alongside the ones you are currently developing on your machine.
Conclusion
One App and Holocron can help you build dynamic quality user experiences, allowing for reusability and reducing bugs by helping you update only what you need.
The video version of this tutorial can be found here:
Now, let’s see how you put assemble multiple modules on a page by using the powerful Holocron Module Composition.
