front-hub.config.js
All Micro Frontend configurations are made through the front-hub.config.js file in the package root.
FrontHub intentionally requires a configuration file per micro frontend, so configuring one does not interfere with the configuration of the other, leaving each micro frontend completely independent. Any global settings, common to all micro frontends, are defined directly in the Application Host.
Options
All properties explained below are used in front-hub.config.js file or in your application host using the FrontHub configure function
Context
Host Context settings.
Use an object, function or class to define context data between your application host and micro frontend. This configuration should be applied in the host application, note that you can use it in your micro frontend during the development process, but it will be overwrite in production mode.
Check the Context Data documentation to know more.
module.exports = {
context: {},
}
Metadata
Defines metadata for managing microfrontends.
Maintainers
Data from the teams that maintain the micro frontend.
module.exports = {
metadata: {
maintainers: [
{
/**
* Name of responsible team. (required)
* This field is used as a key to group and search in FrontHub Admin.
*/
name: '',
/**
* Email to get in touch.
*/
email: '',
/**
* Any link to help find or meet the maintainer.
* Suggestion: put the link to the team's Slack channel.
*/
url: '',
},
],
},
}
Application Hosts
Connect the micro frontend to the Application Host registered on FrontHub Admin.
module.exports = {
metadata: {
applicationHosts: [
{
/**
* Code registered on FrontHub Admin. (required)
*/
code: '',
/**
* List of routes used in Application Host to load the micro frontend.
*/
routes: [
{
/**
* Rule used in Application Host routing.
*/
path: '',
/**
* List of files used to load the micro frontend.
* We recommend using the URL of the file in the
* repository to make it easier to find.
*/
files: [''],
},
],
},
],
},
}
For example, on a micro frontend for comments on a blog:
module.exports = {
metadata: {
applicationHosts: [
{
code: 'my-blog',
routes: [
{
path: '/:category/:post-name',
files: [
'http://my-git-service.com/my-blog/controllers/posts.js',
'http://my-git-service.com/my-blog/views/posts.html',
],
},
{
path: '/pages/:id',
files: [
'http://my-git-service.com/my-blog/controllers/pages.js',
'http://my-git-service.com/my-blog/views/pages.html',
],
},
{
path: '/about/projects',
files: ['http://my-git-service.com/my-blog/public/project.html'],
},
],
},
],
},
}
Intl
The FrontHub works with i18next providing you an easy way to configure it. Check the documentation to know more
Language
Language to be used. Make sure is in correct format, check the documentation.
module.exports = {
intl: {
language: 'pt-BR',
},
}
Fallback Language
Language to be used if translations in user language are not available.
module.exports = {
intl: {
fallbackLng: 'pt-BR',
},
}
Debug
Logs info level to console output. Helps finding issues with loading not working.
module.exports = {
intl: {
debug: false,
},
}
Locales
Pattern to be matched for all locales files on microfrontend. It should a string
module.exports = {
intl: {
locales: '{,!(node_modules)/**/}locales/*.json',
},
}
Features
Provides an array of features available for users/accounts. Every micro frontend can access these features and hide or shown some functionality.
You can provide a function which should return a Promise. Check the documentation to know more.
module.exports = {
features: ['your-feature'],
}
RBAC
Role-based access control settings. Check the documentation to know more.
Role
This property should be a function or a string with the current role value. If you choose to use it as a function, it will receive a context object as a parameter. This context is the same object declared in the application host which has useful data to handle and return the desired role (string)
module.exports = {
rbac: {
role: () => 'admin',
},
}
Permission
This property should be an object which allows you to manage and create kinds of permission according to your project. You use each permission propriety to assign for a feature in your project, the value of this property should be an array including all kinds of permissions for that feature.
module.exports = {
rbac: {
permission: {
article: ['create', 'delete'],
},
},
}
Grants
This object allows you to create grants for access (role) and assign it to some permission resource.
module.exports = {
rbac: {
grants: {
admin: ['article:*'],
},
},
}
Events
Communication between micro frontends settings. Check the documentation to know more.
module.exports = {
events: {
/**
* Array containing all events to be listened on your micro frontend
*/
listeners: [],
/**
* Array containing all events to emitted from your micro frontend
*/
emitters: [],
},
}
Services
Array of objects containing service settings. Use the Fake API documentation to know more.
module.exports = {
services: [
{
name: 'service-name',
rootDir: '<rootDir>/fake-api',
endpoints: {
production: 'https://api.my-project.com',
},
},
],
}
MFE Dependencies
Array of micro frontends that this micro frontend depends on. Check the documentation to know more.
module.exports = {
mfeDependencies: ['MFE_NAME@SEM_VER_VERSION', 'OTHER_MFE_NAME@latest'],
}
Public Path
Function responsible to resolve the path publicly for microfrontend assets.
It receives an object containing the microfrontend repository, name and version ({ repository, name, version }) => {}
module.exports = {
publicPath: ({ repository, name, version }) =>
`${repository}/assets/${name}/${version}/`,
}
Commons
Common dependencies settings
Name
Name of the installed package on microfrontend containing the commons dependencies located on package.json
module.exports = {
commons: {
name: '@resultadosdigitais/front-hub-commons',
},
}
Assets
Assets resolution settings
Timeout
The time, in milliseconds that the timer should wait before to complete the assets loading dependencies.
module.exports = {
assets: {
timeout: 12000,
},
}
Dev
Development environment settings
Host
Application host file path used which is useful to customize the requireMicrofrontend render method.
module.exports = {
dev: {
host: './applicationHost.js',
},
}
This file should return a function which receives the FrontHub function as parameter:
module.exports = fronthub => {
return fronthub.requireMicrofrontend(MICROFRONTEND_NAME, hub =>
hub.renderAt('#target-id-element'),
)
}
Log
Instrumentation settings
Level
Provide the logging level according to the documentation
module.exports = {
log: {
level: 'debug',
},
}
Host Application Configuration
You can use some options above to configure your host application by using the FrontHub configure function.
fronthub('configure', {
context: {
user: {
name: 'Name',
email: 'name.surname@company.com',
},
},
})