Skip to content

πŸ–– πŸ‘©πŸ½β€πŸš€ Expanding the Frontier of Micro Frontends. ⭐️ Star to support our work!

License

Notifications You must be signed in to change notification settings

picardjs/picard

Repository files navigation

Picard.js Logo

Picard.js Β· GitHub License

Build Status npm GitHub tag GitHub issues Community Chat

The next generation of micro frontend orchestrators.

A micro frontend orchestrator is a library that helps you loading, mounting, and unmounting micro frontends incl. their exposed functionality such as components.

What Picard.js allows you to do is to include micro frontends in any web application that you create - from server-side pages rendered with PHP to progressive web applications using Next.js.

Getting Started

Include a script in your website:

<script src="https://unpkg.com/picard-js"></script>

Alternatively, if you don't like unpkg you can also use jsdelivr:

<script src="https://cdn.jsdelivr.net/npm/picard-js"></script>

Now start creating regions for the components of the micro frontends you'd like to display:

<pi-component
  name="column"
  source="https://feed.piral.cloud/api/v1/pilet/picard-demos/latest/mf-simple-html/"
  format="module"
  remote-name="simplehtml">
</pi-component>

The name denotes the name of the exposed component, while the source is used to tell Picard where the micro frontend resides. In the previous example we tell Picard that we want to use a micro frontend using Module Federation (format attribute set to module) with the remote named simplehtml.

In case your Module Federation-built micro frontend is actually using a library.type being set to module, you'd also need to specify remote-type:

<pi-component
  name="column"
  source="https://feed.piral.cloud/api/v1/pilet/picard-demos/latest/mf-simple-html/"
  format="module"
  remote-name="simplehtml"
  remote-type="esm">
</pi-component>

The two remote types are var (refers to a normal script) and esm (refers to a script with type set to module).

For Native Federation a similar syntax is used:

<pi-component
  name="column"
  source="https://feed.piral.cloud/api/v1/pilet/picard-demos/latest/nfsimplehtml/"
  format="native">
</pi-component>

The major difference is that the format is set to native for Native Federation.

Note: Here we don't need to know any remote-name as this is fully defined by the referenced JSON file.

Further Information

πŸ‘‰ For more information visit the documentation.

You can also reach us in the Piral community chat πŸ’».

License

Picard.js is released using the MIT license. For more information see the license file.