Build-Time, End to End - From federation.config to remoteEntry.json
Part 3 of an 8-part series on Native Federation v4 for enterprise architecture teams. New to the series? Start with Part 1: The Mental Model, Revisited . In Part 2, we mapped the four layers of Native Federation v4 and saw that one file, remoteEntry.json , connects the build to the browser. This article zooms in on the build side and answers three questions: What do you write in…
Build-Time, End to End - From federation.config to remoteEntry.json
In the final part of the eight-part series on Native Federation v4 for enterprise architecture teams, we dive into the build process and explore how the federation.config.mjs file influences the creation of remoteEntry.json and other essential files.
What is contained in federation.config.mjs?
The federation.config.mjs file is a crucial part of a federated project. It provides configuration for Native Federation v4 and includes settings such as name, exposes, shared, skip, features, etc. For example, the Angular adapter's ng add schematic generates a default configuration for a remote, which is then customized as per project requirements.
What happens during a federated build?
A federated build is different from a normal Angular build. In a traditional build, all libraries are bundled together, causing redundancy in the number of Angular downloads. However, in a federated build, each shared library is split into its own file, allowing browsers to download them only once and reuse them across applications. Additionally, two small description files, remoteEntry.json and importmap.json, are generated. These files help the browser understand what is available for loading.
What is the role of remoteEntry.json?
remoteEntry.json is the file that connects the build process to the browser. It contains information about the shared libraries, their URLs, and other necessary details for the browser to load the required components. RemoteEntry.json is created during the build process through the federated build workflow.
How does the browser find remote libraries it hasn't seen before?
When the federated build is complete, the browser needs to discover remote libraries that are required for the application to function properly. To achieve this, it relies on the manifest, which is a list of remote names and their corresponding remoteEntry.json file URLs. With this information, the browser can dynamically request and load the necessary remote libraries from the host application.
In summary, the federation.config.mjs file plays a significant role in the Native Federation v4 build process. It defines the shared libraries, their configurations, and other settings that ultimately influence the creation of remoteEntry.json and other essential files. By understanding the inner workings of this configuration file and the build process, enterprise architecture teams can better utilize Native Federation v4 to optimize their applications for better performance and resource sharing.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
