Chapter 08

Prerequisites

The following software is required to run the sample:

Git
Node.js
NPM
Bash
Docker

Running

Clone the repository:

git clone https://github.com/ArtOfMicrofrontends/08-edge-side-composition.git

Go to the repository's directory and run the application:

./run.sh

Running the application will first install all required package dependencies.

Steps

Follow these steps to implement the same from scratch.

Copy over the MFs (blue, red, green) from the previous chapter (e.g., 07-blue)
Change paths in the HTML files to resolve directly, e.g., in blue you change ./basket-info.css to /blue/basket-info.css
Also prefix the URLs in the server, e.g., in blue you change app.use(express.static("public")); to app.use("/blue", express.static("public"));
Keep in mind to migrate URLs for use outside of the MF, too, for instance change res.redirect(`/buy-button?sku=${sku}`); to res.redirect(`http://localhost:1234/red/product-page?sku=${sku}`);
Create a new directory for the edge-side service
Fill it with a Dockerfile using the nginx:latest image containing a local nginx.conf configuration file
In the server have a section for each MF, e.g., for the red microfrontend you should have

location /red {
    ssi on;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-NginX-Proxy true;
    proxy_pass http://host.docker.internal:2001;
    proxy_ssl_session_reuse off;
    proxy_set_header Host $http_host;
    proxy_cache_bypass $http_upgrade;
    proxy_redirect off;
}

Change the URLs of the MFs respectively. In the sample we refer to host.docker.internal to access localhost from the Docker container.

Modify the used ESI tags with SSI, e.g., in the red microfrontend replace

<esi:include src="/mf-blue/buy-button?sku=<%= current.sku %>" />

with

<!--# include virtual="/blue/buy-button?sku=<%= current.sku %>" -->

Extend the fragment in the red MF to be a full HTML document