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-module

When 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.

--

--

--

👨‍💻Staff Engineer at Postman 🔈 Conference Speaker. ⚛️ Writing about Micro-Frontends and Frontend Architecture at Scale. ❤️ We rise by lifting others.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Create Native Apps for Android and iOS using React Native — Part 1

How To Build Tabs only with CSS

Things I Would Have Done Differently

How to Use Redux as a Beginner

Creating A REST API with Node Js & Express Js and test it using Postman

CSS Position Sticky - How It Really Works!

Making a Node/Express API in a blink of an eye!

Fully Functional Todo App with Vanilla js

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ruben Casas

Ruben Casas

👨‍💻Staff Engineer at Postman 🔈 Conference Speaker. ⚛️ Writing about Micro-Frontends and Frontend Architecture at Scale. ❤️ We rise by lifting others.

More from Medium

Changelog: 🦄 Console

Webpack Module Federation usage with Create React App

Improve your Storybook workflows with Chromatic

Modernising our frontend, from monolith to micro-frontend — Part 2

NASA rocket launching during the day.