Micro Frontends

https://tautorn.github.io/micro-frontends
Admin
Explores techniques, strategies, and recipes for building modern web applications with multiple...
Tokens:1,089
Snippets:9
Trust Score:8.3
Update:1 year ago
Show doc for...
Tokens:
Raw
### Clone and Run Micro Frontend Example with Docker Compose

Source: https://tautorn.github.io/micro-frontends/index

Instructions to clone the micro-frontend repository and run the example using Docker Compose. This command will set up the necessary containers for Nginx and the individual micro-frontend applications, making the project accessible locally.

```shell
git clone https://github.com/neuland/micro-frontends.git
cd micro-frontends/2-composition-universal
docker-compose up --build

```

--------------------------------

### Include Server-Rendered Custom Element with SSI

Source: https://tautorn.github.io/micro-frontends/index

This example illustrates how to embed a server-rendered Custom Element within an HTML structure using Server Side Includes (SSI). The `<!--#include virtual="..." -->` directive is replaced by the response of the specified URL before the page is sent to the browser.

```html
<blue-buy sku="t_porsche">
  <!--#include virtual="/blue-buy?sku=t_porsche" -->
</blue-buy>

```

--------------------------------

### Fragmento SSI/ESI com Inclusão SSI (Antes)

Source: https://tautorn.github.io/micro-frontends/index

Este snippet demonstra a inclusão de um fragmento de conteúdo usando SSI (Server Side Includes) antes da otimização. Ele mostra como um fragmento como 'green-recos' era incluído diretamente na marcação.

```html
<green-recos sku="t_porsche">
  <!--#include virtual="/green-recos?sku=t_porsche" -->
</green-recos>

```

--------------------------------

### Fragmento SSI/ESI sem Inclusão SSI (Depois)

Source: https://tautorn.github.io/micro-frontends/index

Este snippet ilustra a modificação após a otimização, onde a inclusão SSI é removida. O fragmento 'green-recos' é deixado como uma tag vazia, indicando que seu conteúdo será carregado assincronamente no navegador.

```html
<green-recos sku="t_porsche"></green-recos>

```

--------------------------------

### Nginx Configuration for Micro Frontend Routing and SSI

Source: https://tautorn.github.io/micro-frontends/index

This Nginx configuration sets up upstream servers for different micro-frontend teams (blue, green, red) and enables Server Side Includes (SSI). It routes incoming requests to the appropriate upstream server based on the URL path and enables SSI for server-side composition.

```nginx
upstream team_blue {
  server team_blue:3001;
}
upstream team_green {
  server team_green:3002;
}
upstream team_red {
  server team_red:3003;
}

server {
  listen 3000;
  ssi on;

  location /blue {
    proxy_pass  http://team_blue;
  }
  location /green {
    proxy_pass  http://team_green;
  }
  location /red {
    proxy_pass  http://team_red;
  }
  location / {
    proxy_pass  http://team_red;
  }
}

```

--------------------------------

### Fetch Custom Element with SSR Data via Curl

Source: https://tautorn.github.io/micro-frontends/index

This snippet shows how to fetch data from a Custom Element endpoint using curl. The URL maps to the Custom Element's tag, and attributes are passed as query parameters. This demonstrates the server-side rendering capability of individual components.

```shell
$ curl http://127.0.0.1:3000/blue-buy?sku=t_porsche
<button type="button">buy for 66,00 €</button>

```

--------------------------------

### Listening for Custom DOM Event in Mini Cart (JavaScript)

Source: https://tautorn.github.io/micro-frontends/index

This code illustrates how a mini cart component listens for the 'blue:basket:changed' custom DOM event globally on the 'window' object. Upon receiving the event, it triggers a refresh function to update its displayed data. This approach facilitates communication between the buying component and the cart component.

```javascript
class BlueBasket extends HTMLElement {
  connectedCallback() {
    window.addEventListener('blue:basket:changed', this.refresh);
  }
  refresh() {
    // fetch new data and render it
  }
  disconnectedCallback() {
    window.removeEventListener('blue:basket:changed', this.refresh);
  }
}
```

--------------------------------

### Page-Level Event Handling for Component Interaction (JavaScript)

Source: https://tautorn.github.io/micro-frontends/index

This JavaScript snippet shows an alternative approach where a page-level script listens for the 'blue:basket:changed' event. When the event occurs, it imperatively calls the 'refresh' method on a 'blue-basket' component instance. This method is useful when direct DOM manipulation or method invocation is necessary.

```javascript
// page.js
const $ = document.getElementsByTagName;

$('blue-buy')[0].addEventListener('blue:basket:changed', function() {
  $('blue-basket')[0].refresh();
});
```

--------------------------------

### Dispatching Custom DOM Event for Cart Update (JavaScript)

Source: https://tautorn.github.io/micro-frontends/index

This snippet demonstrates how a 'buy' button component dispatches a custom DOM event named 'blue:basket:changed' when clicked. This event, configured to bubble up, signals that the shopping cart needs to be updated. It's intended for use within a Web Component's lifecycle.

```javascript
class BlueBuy extends HTMLElement {
  connectedCallback() {
    this.render();
    this.firstChild.addEventListener('click', this.addToCart);
  }
  addToCart() {
    this.dispatchEvent(new CustomEvent('blue:basket:changed', {
      bubbles: true,
    }));
  }
  render() {
    this.innerHTML = `<button type="button">buy</button>`;
  }
  disconnectedCallback() {
    this.firstChild.removeEventListener('click', this.addToCart);
  }
}
```
Tokens:
Raw