# Select version of import-maps-mfe to use when building. Pull down the latest version of your docker image and modify it to contain the new version of the microfrontend, along with updating the import map to point to that new version:.Retrieve the dist artifact from the build step.Store the dist directory as a CI/CD artifact, to be used later during deployments.
This often involves npm install & npm run build Build the frontend static assets to the dist directory within the CI runner.To deploy a microfrontend to a production environment, the CI/CD process for that microfrontend should do the following: Build steps Http :7400/libs/navbar/v1.0.0/navbar.js Build / Deploy a Microfrontend You'll need to modify this to match your file names and version numbers # The following commands uses HTTPie, which is an easier-to-use alternative to curl. With this in mind, a microfrontend server might host files with the following structure:ĭocker run -d -it -name local-mfe-server -p 7400:80 $DOCKER_ORG_NAME/import-maps-mfe-server The server must continue hosting old versions of static assets even after a deployment, since users will continue requesting old versions of the files until they reload the page and/or their browser cache busts for the import map file. This is because the import map serves as a manifest file that tracks the currently deployed versions of all microfrontends.
The one exception to this rule is the import map file itself - that file should be modified in-place on the server, and CDNs and browsers should not cache the file for very long. In other words, the versions of frontend assets should be locked at the beginning of a page load, and the user should always receive those versions of files until a page reload occurs. Additionally, this is important for the consistency of the system during deployments: users who lazy load assets after a deployment has occurred should receive the version of the assets that is guaranteed to work with the assets they already have downloaded. This is important for performance, as a server can instruct browsers and CDNs to cache versioned files forever, but cannot do the same for files that are modified in place. It is best for the deployment of a microfrontend to include uploading new static frontend assets (JS, CSS, HTML) to a server, rather than modifying existing files. It is intended to integrate with your CI/CD processes to facilitate building and deploying of microfrontends.
It is intended for use in deployed environments, not for local development. This project hosts all microfrontends in a single docker container, along with an import map used by the browser to discover the microfrontends and the latest version of them. However, for some organizations, a docker container is required or preferred, and docker-import-maps-mfe-server exists for that situation. Generally, it is simplest and best for performance (since cloud object stores have global edge locations and availability) to host static frontend assets in a cloud object store, such as AWS S3, GCP Storage, Azure Storage, or Digital Ocean Spaces, rather than in a Docker container. This repository exists for single-spa users who wish to host their microfrontends and import map in a docker container. Docker image, utilities, and examples for docker container hosting of frontend assets for microfrontends with import maps.