@appshell/manifest-webpack-plugin
Emits an appshell manifest template for building micro-frontends with Appshell and Webpack Module Federation. The appshell manifest template is subseqently processed to generate an appshell manifest.
Working examples can be found here.
Getting Started
To begin, you'll need to install @appshell/manifest-webpack-plugin:
npm install @appshell/manifest-webpack-plugin --save-devor
yarn add -D @appshell/manifest-webpack-pluginor
pnpm add -D @appshell/manifest-webpack-pluginThen add the plugin to the webpack config of each remote app module. For example:
webpack.config.js
const { AppshellManifestPlugin } = require('@appshell/manifest-webpack-plugin');
module.exports = {
plugins: [
new AppshellManifestPlugin({
config: './path/to/appshell.config.yaml',
}),
],
};What is appshell.config.yaml?
A configuration file consumed by the plugin to provide additional information and context to the Appshell host about remote entrypoints, routing, display names, etc.
Sample appshell.config.yaml
remotes:
TestModule/Foo: # Must match the scope/module defined in ModuleFederationPlugin
url: ${APPS_TEST_URL}/remoteEntry.js # Environment variables will be expanded when the global runtime manifest is generated.
metadata: # Use metadata to provide additional information
route: ${FOO_ROUTE}
displayName: Foo App
displayGroup: main
order: 10
icon: ViewList
TestModule/Bar:
url: ${APPS_TEST_URL}/remoteEntry.js
metadata:
route: /bar
displayName: Bar App
displayGroup: main
order: 20
icon: ViewList
BizModule/Biz:
url: http://localhost:4040/remoteEntry.js
metadata:
route: /biz
displayName: Biz App
displayGroup: auxiliary
order: 30
icon: ViewList
environment:
RUNTIME_ARG_1: ${RUNTIME_ARG_1}
RUNTIME_ARG_2: ${RUNTIME_ARG_2}
RUNTIME_ARG_3: ${RUNTIME_ARG_3}Note the variable expansion syntax
${CRA_MFE_URL}. When theappshell manifestis generated the actual runtime environment values are injected.
Note the
environmentsection defines runtime environment variables that are injected into the global namesapcewindow.__appshell_env__[module_name]when a federated component is loaded. See the examples for a use case.
What happens at build time?
The plugin emits a manifest template file that is subsequently used to generate the
appshell manifestat runtime.
Sample output
{
"remotes": {
"CraModule/App": {
"url": "${CRA_MFE_URL}",
"metadata": {
"route": "/cra",
"displayName": "Example App",
"displayGroup": "${CRA_MFE_DISPLAY_GROUP}",
"order": 10,
"icon": "ViewList"
},
"id": "3eb81a0c"
}
},
"module": {
"exposes": {
"./App": "./src/App"
},
"filename": "remoteEntry.js",
"name": "CraModule",
"shared": {
"react": {
"singleton": true,
"requiredVersion": "^18.2.0"
},
"react-dom": {
"singleton": true,
"requiredVersion": "^18.2.0"
}
}
}
}How do I generate the appshell manifest?
Use @appshell/cli in a startup script:
appshell generate manifest --template appshell.template.jsonSample appshell manifest:
{
"remotes": {
"CraModule/App": {
"id": "3eb81a0c",
"url": "http://localhost:3000/remoteEntry.js",
"scope": "CraModule",
"module": "./App",
"metadata": {
"route": "/cra",
"displayName": "Example App",
"displayGroup": "main",
"order": 10,
"icon": "ViewList"
}
},
"VanillaModule/Vanilla": {
"id": "8232ce86",
"url": "http://localhost:5000/remoteEntry.js",
"scope": "VanillaModule",
"module": "./Vanilla",
"metadata": {
"route": "/vanilla",
"displayName": "Example React App",
"displayGroup": "main",
"order": 10,
"icon": "ViewList"
}
}
},
"modules": {
"Appshell": {
"name": "Appshell",
"shared": {
"react": {
"singleton": true,
"requiredVersion": "^18.2.0"
},
"react-dom": {
"singleton": true,
"requiredVersion": "^18.2.0"
}
}
},
"CraModule": {
"exposes": {
"./App": "./src/App"
},
"filename": "remoteEntry.js",
"name": "CraModule",
"shared": {
"react": {
"singleton": true,
"requiredVersion": "^18.2.0"
},
"react-dom": {
"singleton": true,
"requiredVersion": "^18.2.0"
}
}
},
"VanillaModule": {
"exposes": {
"./Vanilla": "./src/App"
},
"filename": "remoteEntry.js",
"name": "VanillaModule",
"shared": {
"react": {
"singleton": true,
"requiredVersion": "^18.2.0"
},
"react-dom": {
"singleton": true,
"requiredVersion": "^18.2.0"
}
}
}
},
"environment": {
"CraModule": {
"RUNTIME_ARG_1": "Foo",
"RUNTIME_ARG_2": "Biz"
},
"VanillaModule": {
"RUNTIME_ARG_1": "Bar"
}
}
}Options
The plugin's signature:
webpack.config.js
const { AppshellManifestPlugin } = require('@appshell/manifest-webpack-plugin');
module.exports = {
plugins: [
new AppshellManifestPlugin({
config: './path/to/appshell.config.yaml',
}),
],
};Options
config
Type:
type config = string;Default: appshell.config.yaml
Location of the appshell.config.yaml file.