create-il-app

Usage

npx create-il-app

Micro-Frontends

1({
2  type: 'Application',
3  typeweb: 'SPA',
4  os: 'Linux',
5  toolsbuild: 'Webpack5',
6  protocol: 'REST',
7  name: 'host',
8  port: '9001',
9  framework: 'react',
10  language: 'javascript',
11  css: 'css',
12})

💃 Motivation

A quick recap about the concept of Micro Frontends:

Techniques, strategies and recipes for building a modern web app with multiple teams using different JavaScript frameworks. — Micro Frontends

📦 Structura

1. Module Federation Webpack 5 (MFW)
   1. SPA
      1. React 18 (js/ts)
      2. VUE 3 (js/ts)
      3. Angular (ts)
      4. Svelte (js/ts)
   2. SSR
      1. Next 13 (js)
2. Vite
   1. SPA
      1. React 18 (ts)
      2. VUE 3 (js)
   2. SSR
      1. Nuxt 3 (js)
3. Single-Spa + MFW
   1. React 18 (js)
4. StoryBook (storybook-module-federation)
   1. React 18 (js/ts)
   2. Vue 3 (js)
5. Packages (wsrun)
6. Protocol
   1. WebSocket
   2. REST
7. Futter build (Webpack) - experimental

Styles

1. SCSS architecture
2. Tailwind
3. Bootstrap

Сomponent example

• Example VUE btn => REACT
• Example REACT btn => VUE
• Single-Spa + Module Federation (host/remote)

✨ Features

• ⚡ Remix js (react)
• ⚡ Protocol
• ⚡ FSD