Create a CLI tool for bootstrap MFEs

The idea is to create a tool that bootstraps MFEs, configuring what framework the dev will use. Something like npm create vite@latest but installing lint, adding Docker, DevContainer, Tests, etc.

Here's a draft of the process:

yarn create vite
- Vanilla (ou framework da sua preferência)
- TS
- [name]-mfe
yarn

Add dockerfile

Com scratch + nginx
nginx.conf:
```
worker_processes 1;
```

events { worker_connections 1024; }

http { include mime.types;

server {
    listen 3031;

    root /usr/share/nginx/html/;
    index index.html;
    server_name localhost;
}

}


- Dockerfile

```docker
FROM node:20 AS build

ARG SOURCE_DIRECTORY
ARG NGINX_VERSION=1.23.3  

RUN apt update && \
  apt-get install -y build-essential \
  libpcre3        \
  libpcre3-dev    \
  zlib1g          \
  zlib1g-dev      \
  libssl-dev      \
  libgd-dev       \
  libxml2         \
  libxml2-dev     \
  uuid-dev        \
  wget            \
  gnupg

RUN set -x                                                                             && \
  cd /tmp                                                                              && \
  wget -q http://nginx.org/download/nginx-${NGINX_VERSION}.tar.gz                      && \
  wget -q http://nginx.org/download/nginx-${NGINX_VERSION}.tar.gz.asc                  && \
  tar -xvf nginx-${NGINX_VERSION}.tar.gz

WORKDIR /tmp/nginx-${NGINX_VERSION}

RUN ./configure --with-ld-opt="-static" --with-http_sub_module                    && \
  make install                                                                    && \
  strip /usr/local/nginx/sbin/nginx

RUN ln -sf /dev/stdout /usr/local/nginx/logs/access.log                             && \
  ln -sf /dev/stderr /usr/local/nginx/logs/error.log

WORKDIR /app

COPY ./${SOURCE_DIRECTORY}/package.json .
COPY ./${SOURCE_DIRECTORY}/yarn.lock .
RUN yarn

COPY ./${SOURCE_DIRECTORY} .

RUN yarn build

FROM scratch 

COPY --from=build /etc/passwd /etc/group /etc/
COPY --from=build /usr/local/nginx /usr/local/nginx
COPY --from=build /app/dist /usr/share/nginx/html/
COPY --from=build /app/nginx.conf /usr/local/nginx/conf/

STOPSIGNAL SIGQUIT

EXPOSE 80

ENTRYPOINT ["/usr/local/nginx/sbin/nginx"]

CMD ["-g", "daemon off;"]

Vite config:

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        "match-mfe": "./index.html",
      },
      output: {
        entryFileNames: "[name].js",
      },
    },
  },
  worker: {
    format: "es",
    rollupOptions: {
      output: {
        entryFileNames: "[name].js",
      },
    },
  },
  preview: {
    port: 3031,
    strictPort: true,
    host: "0.0.0.0",
  },
  server: {
    port: 3031,
    strictPort: true,
    host: "0.0.0.0",
  },
});

Add README
Troque as portas default (3031), se quiser. No final vai mapear pelo docker

Pode usar um boilerplate no index.html (só importa o mfe.js):


<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/robocin.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Player Micro-frontend | SSL Core</title>
<script type="module" src="/src/main.ts"></script>
<style>
  html, body {
    margin: 0;
    padding: 0;
    background-color: #000000;
    height: 100%;
    width: 100%;
    overflow: hidden;
  }

  main {
    height: calc(100% - 2rem);
    width: calc(100% - 2rem);
    padding: 1rem;
  }

  .fragment {
    position: relative;
    height: 100%;
    width: 100%;
    border-radius: 0.75rem;
    overflow: hidden;
    background-color: #1a1a1a;
  }
</style>
</head>
<body>
<main>
  <section class="fragment">
    <player-mfe></player-mfe>
  </section>
</main>
</body>
</html>

- Add vitest, playwright or cypress, lint and prettier
- Add in main.ts:
```typescript
import PlayerMFE from "./app/player-mfe";

window.customElements.define("player-mfe", PlayerMFE );

class PlayerMFE extends HTMLElement {
  private root: ShadowRoot;

  constructor() {
    super();
    this.root = this.attachShadow({ mode: "open" });
  }

  public connectedCallback() {
  }

  public disconnectedCallback() {
  }
}

export default PlayerMFE;

robocin / ssl-core

Create a CLI tool for bootstrap MFEs #105

Progress Log

May 25

May 28

May 30

June 8