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

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

Include the following scripts in your package.json

`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.

$3

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.

`bash
pae-ui-react-sdk start
`

$3

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

`bash
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.

`javascript
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.

`json
{
"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`.