Create a widget

This tutorial asumes that you already bootstrapped an extension as explained here.

After the bootstrap is done, change directory to the extension you've just created and add a new folder src

Now let's create the entry file for the widget.

touch src/index.ts

Open the index file and create and export the registration function

export widget's registration function

export const register = () => {
  return {}
}

Next, we'll need to add the following properties to the config object:

	Required	Description
loadingFn	true	the loading function
mountsIn	true	where to show this widget

Let's create a simple React component in a new file in the src folder.

touch src/my-widget-component.tsx

This file will be dynamically imported using the loadingFn and must export single-spa-react lifecycle methods:

src/my-widget-component.tsx

import React from 'react';
import ReactDOMClient from 'react-dom/client';
import singleSpaReact from 'single-spa-react';

const MyWidget = () => {
  return <div>Hello World</div>
}

export const {bootstrap, mount, unmount} = singleSpaReact({
  React,
  ReactDOMClient,
  rootComponent: MyWidget,
  errorBoundary: () => {
    return (
      <div>Error in widget</div>
    )
  }
})

Now we are ready to complete the configuration of our widget:

export const register = (options: IntegrationRegistrationOptions) => {
  return {
    loadingFn: () => import('my-widget-component'),
    mountsIn: options.layoutSlots.widgetSlotId,
  }
}

Well done! Now if you rebuild the project you will see the widget in the right side of the page.