Security News
Fluent Assertions Faces Backlash After Abandoning Open Source Licensing
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
@softarc/native-federation
Advanced tools
Native Federation is a "browser-native" implementation of the successful mental model behind wepback Module Federation for building Micro Frontends and plugin-based solutions. It can be **used with any framework and build tool** for implementing **Micro F
Native Federation is a "browser-native" implementation of the successful mental model behind wepback Module Federation for building Micro Frontends and plugin-based solutions. It can be used with any framework and build tool for implementing Micro Frontends and plugin-based architectures.
This library allows to augment your build process, to configure hosts (Micro Frontend shells) and remotes (Micro Frontends), and to load remotes at runtime.
While this core library can be used with any framework and build tool, there is a higher level API on top of it. It hooks into the Angular CLI and provides a builder and schematics:
Please find the Angular-based version here.
Please find the vite plugin here.
Also, other higher level abstractions on top of this core library are possible.
The underlying mental model allows for runtime integration: Loading a part of a separately built and deployed application into your's. This is needed for Micro Frontend architectures but also for plugin-based solutions.
For this, the mental model introduces several concepts:
Big thanks to:
npm i @softarc/native-federation
As Native Federation is tooling agnostic, we need an adapter to make it work with specific build tools. The package @softarc/native-federation-esbuild
contains a simple adapter that uses esbuild:
npm i @softarc/native-federation-esbuild
In some situations, this builder also delegates to rollup. This is necessary b/c esbuild does not provide all features we need (yet). We hope to minimize the usage of rollup in the future.
You can also provide your own adapter by providing a function aligning with the BuildAdapter
type.
Just call three helper methods provided by our federationBuilder
in your build process to adjust it for Native Federation.
import * as esbuild from 'esbuild';
import * as path from 'path';
import * as fs from 'fs';
import { esBuildAdapter } from '@softarc/native-federation-esbuild';
import { federationBuilder } from '@softarc/native-federation/build';
const projectName = 'shell';
const tsConfig = 'tsconfig.json';
const outputPath = `dist/${projectName}`;
/*
* Step 1: Initialize Native Federation
*/
await federationBuilder.init({
options: {
workspaceRoot: path.join(__dirname, '..'),
outputPath,
tsConfig,
federationConfig: `${projectName}/federation.config.js`,
verbose: false,
},
/*
* As this core lib is tooling-agnostic, you
* need a simple adapter for your bundler.
* It's just a matter of one function.
*/
adapter: esBuildAdapter
});
/*
* Step 2: Trigger your build process
*
* You can use any tool for this. Here, we go
* with a very simple esbuild-based build.
*
* Just respect the externals in
* `federationBuilder.externals`.
*/
[...]
await esbuild.build({
[...]
external: federationBuilder.externals,
[...]
});
[...]
/*
* Step 3: Let the build method do the additional tasks
* for supporting Native Federation
*/
await federationBuilder.build();
The method federationBuilder.build
bundles the shared and exposed parts of your app.
The withNativeFederation
function sets up a configuration for your applications. This is an example configuration for a host:
// shell/federation.config.js
const {
withNativeFederation,
shareAll,
} = require('@softarc/native-federation/build');
module.exports = withNativeFederation({
name: 'host',
shared: {
...shareAll({
singleton: true,
strictVersion: true,
requiredVersion: 'auto',
includeSecondaries: false,
}),
},
});
The API for configuring and using Native Federation is very similar to the one provided by our Module Federation plugin @angular-architects/module-federation. Hence, most the articles on it are also valid for Native Federation.
The shareAll
-helper used here shares all dependencies found in your package.json
. Hence, they only need to be loaded once (instead of once per remote and host). If you don't want to share all of them, you can opt-out of sharing by using the skip
option:
module.exports = withNativeFederation({
[...]
// Don't share my-lib
skip: [
'my-lib'
]
[...]
}
Paths mapped in your tsconfig.json
are shared by default too. While they are part of your (mono) repository, they are treaded like libraries:
{
"compilerOptions": {
[...]
"paths": {
"shared-lib": [
"libs/shared-lib/index.ts"
]
}
}
}
If you don't want to share (all of) them, put their names into the skip array (see above).
When configuring a remote, you can expose files that can be loaded into the shell at runtime:
const {
withNativeFederation,
shareAll,
} = require('@softarc/native-federation/build');
module.exports = withNativeFederation({
name: 'mfe1',
exposes: {
'./component': './mfe1/component',
},
shared: {
...shareAll({
singleton: true,
strictVersion: true,
requiredVersion: 'auto',
includeSecondaries: false,
}),
},
});
On startup, call the initFederation
method. It takes a mapping between the names of remotes and their remoteEntry.json
. This is a file containing meta data generated by the augmented build process (see above).
import { initFederation } from '@softarc/native-federation';
(async () => {
await initFederation({
mfe1: 'http://localhost:3001/remoteEntry.json',
});
await import('./app');
})();
You can also pass the name of a file with the key data about your remotes:
import { initFederation } from '@softarc/native-federation';
(async () => {
await initFederation('assets/manifest.json');
await import('./app');
})();
Following the ideas of our friends at Nrwl, we call such a file a manifest:
{
"mfe1": "http://localhost:3001/remoteEntry.json"
}
Manifests allow to adjust your application to different environments without any recompilation.
For initializing a remote, also call initFederation
. If you don't plan to load further remotes into your remote, you don't need to pass any parameters:
import { initFederation } from '@softarc/native-federation';
(async () => {
await initFederation();
await import('./component');
})();
To load a remote, just call the loadRemoteModule
function:
const module = await loadRemoteModule({
remoteName: 'mfe1',
exposedModule: './component',
});
If you know the type of the loaded module (perhaps you have a shared interface), you can use it as a type parameter:
const module = await loadRemoteModule<MyRemoteType>({
remoteName: 'mfe1',
exposedModule: './component',
});
This library uses Import Maps. As currently not all browsers support this emerging browser feature, we need a polyfill. We recommend the polyfill es-module-shims
which has been developed for production use cases:
<script type="esms-options">
{
"shimMode": true,
"mapOverrides": true
}
</script>
<script src="https://ga.jspm.io/npm:es-module-shims@1.5.17/dist/es-module-shims.js"></script>
<script type="module-shim" src="main.js"></script>
The script with the type esms-options
configures the polyfill. This library was built for shim mode. In this mode, the polyfill provides some additional features beyond the proposal for Import Maps. These features, for instance, allow for dynamically creating an import map after loading a first EcmaScript module. Native Federation uses this possibility.
To make the polyfill to load your EcmaScript modules (bundles) in shim mode, assign the type module-shim
.
Native Federation uses Web Standards like EcmaScript Modules. Most libs and frameworks support them meanwhile. Unfortunately, React still uses CommonJS (und UMD). We do our best to convert these libs to EcmaScript Modules. In the case of React there are some challenges due to the dynamic way the React bundles use the exports
object.
As the community is moving to EcmaScrpt Modules, we expect that these issues will vanish over time. In between, we provide some solutions for dealing with CommonJS-based libraries using exports
in a dynamic way.
One of them is fileReplacemnts
:
import { reactReplacements } from '@softarc/native-federation-esbuild/src/lib/react-replacements';
import { createEsBuildAdapter } from '@softarc/native-federation-esbuild';
[...]
createEsBuildAdapter({
plugins: [],
fileReplacements: reactReplacements.prod
})
Please note that the adapter comes with fileReplacements
settings for React for both, dev
mode and prod
mode. For similar libraries you can add your own replacements. Also, using the compensateExports
property, you can activate some additional logic for such libraries to make sure the exports are not lost
createEsBuildAdapter({
plugins: [],
fileReplacements: reactReplacements.prod,
compensateExports: [new RegExp('/my-lib/')],
});
The default value for compensateExports
is [new RegExp('/react/')]
.
Find out more about our work including Micro Frontends and Module Federation but also about alternatives to these approaches in our blog.
In our Angular Architecture Workshop, we cover all these topics and far more. We provide different options and alternatives and show up their consequences.
FAQs
Native Federation is a "browser-native" implementation of the successful mental model behind wepback Module Federation for building Micro Frontends and plugin-based solutions. It can be **used with any framework and build tool** for implementing **Micro F
The npm package @softarc/native-federation receives a total of 17,313 weekly downloads. As such, @softarc/native-federation popularity was classified as popular.
We found that @softarc/native-federation demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.