RedHat Cloud Services frontend components - webpack config utilities
Chrome render loader
When using chrome 2 and user refreshes a page on your application you may end up with 2 instances of your application in virtual DOM. This loader prevents it by wrapping your app in condition to check if chrome 2 config is enabled.
The appName should be same as is insights.appname
in your package.json
.
{
module: {
rules: [{
test: new RegExp(appEntry),
loader: path.resolve(__dirname, './chrome-render-loader.js'),
options: {
appName: 'name-of-your-app',
}
}]
}
}
Disable chrome 2
When migrating application to chrome 2 you may want to disable this for some time, otherwise you'll have to sync pushes to all branches with CSC.
{
module: {
rules: [{
test: new RegExp(appEntry),
loader: '@redhat-cloud-services/frontend-components-config-utilities/chrome-render-loader',
options: {
appName: 'name-of-your-app',
skipChrome2: true
}
}]
}
}
Chunk mapper
To properly load files in chrome 2 you have to generate mapper to each exported chunk. This webpack plugin will do that for you.
const ChunkMapper = require('@redhat-cloud-services/frontend-components-config-utilities/chunk-mapper');
{
plugins: [
new ChunkMapper({
// prefix: '/some-path/', // optional - defaults to output.publicPath
modules: [], //required
})
]
}
-
prefix
- if you have your federated modules files located under some different path thanoutput.publicPath
-
modules
- either string or an array of strings to indicate which generated files should be picked up (generally yourinsights.appname
- if you have dashes in your name replace them with cammel case)
Federated modules
If you don't want to dig trough webpack's module-federation/ and write custom generator you can use this wrapper.
plugins.push(
require('@redhat-cloud-services/frontend-components-config/federated-modules')({
root: resolve(__dirname, '../'),
// exposes: { './RootApp': './src/AppEntry.js' },
// shared: [{ react: { singleton: true, requiredVersion: 17.0.0 } }],
// debug: true,
// moduleName: 'someAppName',
// useFileHash: false,
// exclude: ['react']
})
);
We've aimed for easy plug and play, but feel free to override any fed mods partials with these arguments:
-
root
- root of you application (to find outpackage.json
) -
exposes
- which files and modules should be exposed -
shared
- federated modules allow for sharing of dependencies, we've added some general dependencies, but feel free to expand them via this prop -
debug
- to see full output what is going to be used -
moduleName
- used to generate the file under this name (generally yourinsights.appname
- if you have dashes in your name replace them with cammel case) -
useFileHash
- in order to prevent caching we are using file hashes, you might want to turn this off in your dev env -
exclude
- if you want to exclude any shared module you can do it trough here (even for general dependencies added by us) -
eager
- if set totrue
, turns eager fetch for shared modules on
Override container ports
The default ports for the RBAC server(4012) and/or the Keycloak server(4001) can be overridden using a corresponding variable in the environment.
Bash examples:
export KEYCLOAK_PORT=4020
export RBAC_PORT=5000
List of shared deps
This packages exposes these federated shared dependencies
-
lodash
- version taken from yourpackage.json
-
axios
- version taken from yourpackage.json
-
redux
- version taken from yourpackage.json
-
react
- version taken from yourpackage.json
, treated as singleton -
react-dom
- version taken from yourpackage.json
, treated as singleton -
react-router-dom
- version taken from yourpackage.json
-
react-redux
- version taken from yourpackage.json
-
redux-promise-middleware
- version taken from yourpackage.json
-
@patternfly/react-table
- version taken from yourpackage.json
-
@patternfly/react-core
- version taken from yourpackage.json
-
@patternfly/react-icons
- version taken from yourpackage.json
-
@patternfly/react-tokens
- version taken from yourpackage.json
-
@redhat-cloud-services/frontend-components
- version taken from yourpackage.json
-
@redhat-cloud-services/frontend-components-utilities
- version taken from yourpackage.json
-
@redhat-cloud-services/frontend-components-notifications
- version taken from yourpackage.json
Extensions plugin
In order to share some code into extension points or to add new extension point we can use ExtensionsPlugin
Simply import it in your webpack config and add it to your plugins
const { resolve } = require('path');
const config = require('@redhat-cloud-services/frontend-components-config');
const ExtensionsPlugin = require('@redhat-cloud-services/frontend-components-config/extensions-plugin');
const { config: webpackConfig, plugins } = config({
rootFolder: resolve(__dirname, '../'),
...(process.env.BETA && { deployment: 'beta/apps' }),
});
plugins.push(
require('@redhat-cloud-services/frontend-components-config/federated-modules')({
root: resolve(__dirname, '../'),
}),
new ExtensionsPlugin({})
);
module.exports = {
...webpackConfig,
plugins
}
Arguments
There are three arguments ExtensionsPlugin
constructor accepts:
pluginConfig
fedModuleConfig
options
pluginConfig
This config contains information about extensions, plugin requirements, its name and description. Most of it (name, description and version) is calculated from your root package.json
. But you can override these values:
-
name
- plugin name (pulled frompackage.json
) -
version
- version of the plugin -
displayName
- display name of the plugin -
description
- description of the plugin (pulled frompackage.json
) -
dependencies
- object of dependencies which will be passed down to module federation (no need to list general react dependencies) -
disableStaticPlugins
- list of static plugins this plugin disables on load -
extensions
- list of extension objects.
extension object
Each extension object requires a type
and properties
. The type can be either custom extension or one of predefined:
-
console.navigation/section
- a section in navigation (identifies secondary nav)-
properties
-
id
- id of the section -
name
- name of the section, this will be shown in the UI
-
-
-
console.page/route
- route passed to react-router-
properties
- in theory any react-router path prop can be used here-
path
- (string, or array) path on which the component will be rendered -
component
-
$codeRef
- federated module used to render on the route
-
-
-
-
console.navigation/href
- navigation href, used to render leafs of navigation-
properties
-
id
- id of the href -
section
- (optional) used to group nav items under section (omit for flat nav) -
name
- name of the href, thiw will be shown in the UI -
href
- used to mutate the URL
-
-