Host-spike NPM

Microfrontend-Application

Micro-Frontend basic template.

Please read the Wiki documentation for more information about the basic concepts: Raisin Wiki Page: Frontend Composition Strategy

Pre-requesites

Node v12.18.3 or higher.
NPM v6.14.6 or higher.
Yarn v1.22.4 or higher.

Usage

To run/start the project run.
```
$ yarn start
```
To build the project run.
```
$ yarn build
```
To run the tests.
```
$ yarn test
```
To run the test on watch mode.
```
$ yarn test:watch
```
To run eslint on the project.
```
$ yarn lint
```

These are the available scripts:

"start": "cross-env NODE_ENV=development webpack-dev-server --config ./webpack/webpack.development.js",
"build": "cross-env NODE_ENV=production webpack --config ./webpack/webpack.production.js",
"lint": "eslint --ext .ts,.tsx,.js,.jsx --no-error-on-unmatched-pattern src/",
"lint:fix": "eslint --ext .ts,.tsx,.js,.jsx --no-error-on-unmatched-pattern --quiet --fix",
"pretest": "yarn test:clean && yarn lint",
"test:clean": "rimraf ./coverage",
"test": "cross-env NODE_ENV=test jest --config jest.config.js --coverage",
"test:watch": "cross-env NODE_ENV=test jest --watchAll",
"prettify": "prettier . --write"

Getting Started

Install project dependencies:
```
$ yarn install
```

Create an .env file and add the following variables.

// .env

# Name of the application
APP_NAME=CAP

# Name of the Webpack Module Federation bundle
MF_NAME=host

# Application port
PORT=3002

#  Use as output public path for webpack (DEVELOPMENT)
HOST=localhost

# Use as output public path for webpack (PRODUCTION)
PUBLIC_PATH_PROD=/

# React Global Variables
RAISIN_FE_API_BASE_URL=https://customer-administration-service-cap.raisin-dev.network/v1/

# Webpack Module Federation Remote
WP_MF_REMOTE_AUTH=auth@http://localhost:3001/mfAuth/remoteEntry.js

Start the project running the command.
```
$ yarn start
```

Expose/Export assets through Webpack Module Federation (Plugin).

To expose any type of assets or element using the MF plugin, first check that your local project runs properly locally. After this, you can share/expose any asset or element in the following way.

Open the webpack/moduleFederation.js file, should look like this:

const { includePathFromSrc } = require('./paths');

/**
* Object where will be include all
* components, logic and shared files
* e.g './Button': includePathFromSrc('component/Button/index.js')
*/
const exposes = {};

/**
* Object with the names of remotes files
* module federation bundle files to include
* in the application.
* e.g <remote name>: '<MF_NAME>@http://localhost:<PORT>/js/remoteEntry.js'
* e.g mfRemote: 'mfRemote@http://localhost:3002/js/remoteEntry.js'
*/
const remotes = {};

module.exports = {
	exposes,
	remotes,
};

Edit the file and add the list or assets inside the exposes object:

/**
* Object where will be include all
* components, logic and shared files
* e.g './Button': includePathFromSrc('component/Button/index.js')
*/
const exposes = {
	'./<asset name>': includePathFromSrc('path/of/your/element'),
	'./<asset name>': includePathFromSrc('path/of/your/element'),
};

NOTE: Please be sure to add always a dot and slash before the asset name. e.g ./MyButton and the elements to share will be always inside src/ directory.

Restart the application.
To confirm that the assets are properly exposed through the MF plugin, the project should run properly locally and see if the module was created properly run the URL.
```
http://localhost:3001/js/remoteEntry.js
```
NOTE: The port is the same value that you set in the .env file and the remote entry file should load without any problem. For more details please check the How to ensure that the remote application is exposing the module?

Consume/Import assets through Webpack Module Federation (Plugin).

Confirm that the project is running properly locally.

Open the webpack/moduleFederation.js file, should look like this:

const { includePathFromSrc } = require('./paths');

/**
* Object where will be include all
* components, logic and shared files
* e.g './Button': includePathFromSrc('component/Button/index.js')
*/
const exposes = {};

/**
* Object with the names of remotes files
* module federation bundle files to include
* in the application.
* e.g <remote name>: '<MF_NAME>@http://localhost:<PORT>/js/remoteEntry.js'
* e.g mfRemote: 'mfRemote@http://localhost:3002/js/remoteEntry.js'
*/
const remotes = {};

module.exports = {
	exposes,
	remotes,
};

Edit the file and add inside the remotes object the reference to the assets you need to import.
```
/**
* Object with the names of remotes files
* module federation bundle files to include
* in the application.
* e.g <remote name>: '<MF_NAME>@http://localhost:<PORT>/js/remoteEntry.js'
* e.g mfRemote: 'mfRemote@http://localhost:3002/js/remoteEntry.js'
*/
const remotes = {
	 <module federation name>: '<module federation name>@<URL>:<port>/remoteEntry.js'
 };
```
NOTE: The module federation name, is the name used for the other micro-frontend application inside the .env file, the variable name is MF_NAME. In case you are pointing to the production URL, you need to use the module federation name, domain and the remoteEntry.js, like this: mfApp1: 'mfApp1@<production URL>/remoteEntry.js'
Restart the application and confirm the application is still running properly.
To start using the remote entry in your application go to the file that you need to import the assets and import it in the following way
```
const <asset name> = React.lazy(() => import('mfApp1/<asset name>'));
```
Remember: mfApp1 is the value that you assign to the remote entry in your application inside the webpack/moduleFederation.js file in the remotes section. For more details please check How to know that the host application is consuming the remote module?

Deployment

Currently, we are using AWS Amplify for deployments and setting it up as a monorepo. For monorepo setup, Amplify expects a single amplify.yml file at root folder of the repository in which we can mention all project which needs deployment. But due to some reason AWS Amplify is not behaving as expected.

So for now, we are putting amplify.yml file inside each project (packages/**') and you need to specify these files manually if you are setting up Amplify yourself.

Webpack Module Federation javascript generator cli

@aws-amplify/ui-react @reduxjs/toolkit aws-amplify aws-amplify-react axios bootstrap clean-webpack-plugin prop-types react react-dom react-intl react-redux react-router-dom styled-components webpack webpack-merge

1.2.0

3 years ago