React Micro Frontend SDK

This SDK is a collection of tools and utilities that help you build micro frontends using React. It provides a way to create a micro frontend that can be embedded in a host application.

Usage

Install the sdk and optionally but recommended the PAE UI React Core library as development dependencies

npm install --save-dev @bluealba-public/pae-ui-react-sdk
npm install --save-dev @bluealba-public/pae-ui-react-core

Include the following scripts in your package.json

{
  "scripts": {
    "start": "pae-ui-sdk start",
    "start:dev": "pae-ui-sdk start --dev",
    "build": "pae-ui-sdk build",
    "lint": "pae-ui-sdk lint",
    "lint:fix": "pae-ui-sdk lint --fix"
  }
}

Now run these scripts to work with your project. We recommend cloning the PAE React Microfrontend template that already starts with all this and the app skeleton.

Scripts

The SDK provides the following scripts that you can use to build and run your micro frontend.

start

The start script starts a development server that serves your micro frontend. It also watches for changes in the source files and rebuilds the project when a change is detected.

pae-ui-react-sdk start

build

The build script builds your micro frontend for production. It creates a dist directory that contains the built files.

pae-ui-react-sdk build

Overriding webpack configuration

You can override the webpack configuration by creating a webpack.config.js file in the root of the project. The file should export a function that takes the default configuration as an argument and returns the modified configuration.

module.exports = (config) => {
  // Modify the config here
  return config;
};

You can also override the webpack configuration from the scripts in the package.json file. You can use the --config option to specify the path to the configuration file.

{
  "scripts": {
    "start": "pae-ui-react-sdk start --config ./webpack.config.js",
    "build": "pae-ui-react-sdk build --config ./webpack.config.js"
  }
}

Assets folder

By convention the assets folder located at the root of the project (in case it exists) will be copied complete (including all its files) to the output dist folder.