# Create a React Micro Frontend

# Prerequisites

# Create a React App in an Entando Bundle

# Create the Bundle Project

  1. Initialize a new bundle project with the default files and folders:

    ent bundle init simple-bundle
  2. From the root bundle folder, add an MFE to the bundle project:

    cd simple-bundle
    ent bundle mfe add simple-mfe

# Create a Simple React App

Create React App (opens new window) allows you to generate a simple app in seconds.

  1. Create a React app in /simple-bundle/microfrontends/:

    npx create-react-app microfrontends/simple-mfe --use-npm

    Assign the same bundle name you chose when adding an MFE to overwrite the empty "simple-mfe" folder.

  2. From the root bundle folder, start the new app :

    ent bundle run simple-mfe

    The React app should open in your browser at http://localhost:3000.

# Configure the Custom Element

The steps below wrap the app component with an HTML custom element. The connectedCallback method renders the React app when the custom element is added to the DOM.

  1. In simple-mfe/src, create a directory named custom-elements

  2. In custom-elements, create a new file named public-path.js with the following code. This will enable your React MFE to serve static assets when deployed in Entando. If you use a different name for your custom element, you should change it on the second line.

    if (process.env.NODE_ENV === 'production') {
        let publicpath = window.entando?.widgets['simple-mfe']?.basePath;
        if (publicpath && publicpath.slice(-1) !== '/') {
            publicpath = `${publicpath}/`;
        // eslint-disable-next-line no-undef
        __webpack_public_path__ = publicpath || './';
  3. In the same directory, create WidgetElement.js with this code:

    import './public-path.js';
    import React from 'react';
    import ReactDOM from 'react-dom/client';
    import App from '../App';
    class WidgetElement extends HTMLElement {
        connectedCallback() {
            this.mountPoint = document.createElement('div');
            const root = ReactDOM.createRoot(this.mountPoint);
            root.render(<App />);
    customElements.define('simple-mfe', WidgetElement);

    Custom Element Names

# Display the Custom Element

  1. Replace the entire contents of src/index.js with these two lines:

    import './index.css';
    import './custom-elements/WidgetElement';
  2. In public/index.html, replace <div id="root"></div> with the following:

    <simple-mfe />
  3. Observe your browser automatically redisplay the React app.


You’re now using a custom element to display a React app.

# Display the React MFE in Entando

  1. Publish the bundle project

# View the Widget

Place the React micro frontend onto a page to see it in action.

  1. In the Entando App Builder, go to PagesManagement

  2. Choose an existing page (or create a new one) and select Design from its Actions

  3. Find your widget in the Widgets sidebar and drag it onto the page

  4. Click Publish

  5. Click on View Published Page


You now have a React micro frontend running in Entando!

Next Steps