Using Picard.js with Bundlers for SPAs

Using Picard.js with bundlers to produce a SPA works by importing the initializePicard function from the picard-js/client module.

Installation

First, make sure to install the picard-js package from npm:

npm i picard-js

You can also use some other package manager such as:

# Yarn
yarn add picard-js

# PNPM
pnpm add picard-js

Configuration

Unlike the browser variant you will need to start Picard explicitly.

The following shows how this is done.

import { initializePicard } from 'picard-js/client';

const picard = initializePicard({
  // configure here
});

The configuration is fully typed. For instance, to load the micro frontends from a micro frontend discovery service you can set the feed option:

import { initializePicard } from 'picard-js/node';

const picard = initializePicard({
  feed: 'https://feed.piral.cloud/api/v1/pilet/tractor-ssr-demo',
});

The feed can be supplied as

• a string (URL of a micro frontend discovery service),
• an array of pilet definitions following PiletMetadata,
• an object representing the result of calling a micro frontend discovery service (either following the Piral Feed Service or the MFEWG schema),
• an object representing a map of names to (native federation) manifest definitions,
• a function returning a promise leading to one of the previous objects.

So, if you want to provide some custom headers when making the request to the micro frontends discovery service you should implement a function:

import { initializePicard } from 'picard-js/node';

const picard = initializePicard({
  feed: () =>
    fetch('https://feed.piral.cloud/api/v1/pilet/tractor-ssr-demo', {
      headers: {
        // your custom headers here
      }
    }).then(res => res.json()),
});