kpkpkpkpk v1.0.0

Getting Started with Create React App and rescripts.js Microfrontend template

Running project:

yarn

yarn start

Adding new micro frontend module:

Search for "config MF" or open all TODO to find all steps for adding remote frontend module.

By default following steps are necessary:

• add url for the dev & prod json config at "src/modules/config"
• add a new object with type IRemoteModuleConfig at "src/modules/config/configData.ts"
• use a new module as typical react component

Exposing current app / component as micro frontend:

• change .env file and write a new HOST and PORT
• change name in package.json
• add exported component by changing name and path in "root/modules.js"

Adding new alias:

• add a new field to "alias.json" at compilerOptions.paths

Usage:

src/modules/config/configData.ts

// It is the map for remote modules
export const MODULE_NAME_MAP = {
  EXAMPLE_MODULE: 'EXAMPLE_MODULE',
};

// example module
export const EXAMPLE_MODULE: IRemoteModuleConfig = {
  url: getRemoteModuleAPI(process.env, 'EXAMPLE_MODULE'), // in devmode it is localhost with any port, which you choose, in prodmode it's url on server, which contain remoteEntry.js in the end
  scope: 'lorem', // it is your package.json name of remote module
  module: './name', // it is your name in exported object by path root/modules.js (in remote module)
};

_________________________________________
and than you can create your component with the remote module

import { ReactElement } from 'react';
import RemoteModule, { EXAMPLE_MODULE } from '@app/modules';

const Example = (): ReactElement => (
    <RemoteModule config={EXAMPLE_MODULE} />
);

export default Example;


// so you can pass any props 

const Example = (): ReactElement => {
    const props = {
        id: 'lorem'
    }

    return (
        <RemoteModule config={EXAMPLE_MODULE} props={props} />
    );
}