Piral is a JavaScript library for creating modular "microfrontends" application based on React.
Microfrontends extend the microservices concept to front-end applications and help developers tackle the ever-growing size and complexity of JavaScript applications by breaking down a single SPA (Single Page Application) into multiple self-contained applications.
A simple microfrontends setup involves a shell application that loads a set of self-contained modules based on the current route.
In Piral, the shell application is called a "Piral instance". The self-contained modules are called "Pilets," both of which can be generated through the Piral CLI.
The Piral instance manages three aspects of the application:
- The application layout (e.g., footer, header, etc...)
- Shared components that can be shared between the individual Pilets
- Manages how Pilets are loaded and defines where they could integrate the shared components
The Pilets are individual web applications that manage different aspects of the website. While the Piral CLI defaults to React, developers can build Pilets using other libraries such as Angular or Vue.js using the provided plugins.
To get started with Piral, first install the Piral CLI globally using:
npm I piral-cli -g
Once the Piral CLI is installed, a new Piral application can be generated by running:
piral new --target app-name
This will generate a simple shell application that includes the base layout. Before generating the Pilets, we first need to run piral build, which generates a dist folder that contains two packages - release and emulator.
The emulator package is used to generate the Pilets and will generally be published to a private NPM registry to ensure all modules use the latest layout.
To generate the Pilet, run:
pilet new emulator-name --target pilet-name
Where the emulator name can either be the npm package or the local path to the emulator instance. To start the newly created Pilet, run pilet debug, which will be served from http://localhost:1234/.
Piral relies on a feed service that hosts the Pilet instances. Developers can set their own feed service based on the supplied example or use the free feed service provided by Piral.
Once a feed is set up, the Piral instance needs to be configured to pull Pilets from the created feed. This can be done by modifying the 'feedUrl' found in the 'index.tsx' of the Piral application.
Piral is an open-source library that is available under the MIT license. Contributions are encouraged to participate in the Piral GitHub project and should follow the Contributor Covenant Code of Conduct.
