My Micro Frontend

The My Micro Frontend is used to generate framework templates from the micro frontend which can be used directly. For the configuration of the My Micro Frontend which will be used to create a micro frontend directly from the .env file. This My Micro Frontend is already available in several frameworks such as React, Vue and will likely continue to grow again.

npx create-my-microfrontend [project-name] [project-framework]

Example:

npx create-my-microfrontend main --vue

or

npm i -g create-my-microfrontend
npx create-my-microfrontend [project-name] [project-framework]

Example:

npm i -g create-my-microfrontend
npx create-my-microfrontend main --vue

No | Command | Description | Default --- | --- | --- | --- 1 | project-name | To determine the name of the project you will create | micro 2 | project-framework | To determine the framework to be used, you can use --react --vue | --react

Internal App

No | Name --- | --- 1 | APP_NAME 2 | PORT_APP_DEV 3 | PORT_APP_PROD 4 | ENDPOINT_DEV 5 | ENDPOINT_PROD 6 | FILE_NAME 7 | NAME_COMPONENT_EXPOSE 8 | SRC_COMPONENT_EXPOSE

External App

No | Name --- | --- 1 | REMOTE_NAME 2 | REMOTE_PORT_APP_DEV 3 | REMOTE_PORT_APP_PROD 4 | REMOTE_ENDPOINT_DEV 5 | REMOTE_ENDPOINT_PROD 6 | REMOTE_FILE

===========================

APP_NAME=main

PORT_APP_DEV=8080

PORT_APP_PROD=8000

ENDPOINT_DEV=http://localhost

ENDPOINT_PROD=http://prod.com

FILE_NAME=remoteEntry.js

NAME_COMPONENT_EXPOSE_1=./Navbar
NAME_COMPONENT_EXPOSE_2=./Footer
NAME_COMPONENT_EXPOSE_3=./Sidebar

SRC_COMPONENT_EXPOSE_1=./src/components/Navbar
SRC_COMPONENT_EXPOSE_2=./src/components/Footer
SRC_COMPONENT_EXPOSE_3=./src/components/Sidebar

===========================

REMOTE_NAME_1=app2

REMOTE_PORT_APP_DEV_1=8081

REMOTE_PORT_APP_PROD_1=8001

REMOTE_ENDPOINT_DEV_1=http://localhost

REMOTE_ENDPOINT_PROD_1=http://prod.com

REMOTE_FILE_1=remoteEntry.js

===============================

npx create-my-microfrontend main

src/App.js

import React, { lazy } from "react";

const Navbar = lazy(() => import("app2/Navbar"));
const Footer = lazy(() => import("app2/Footer"));

function App() {
    return (
        <div>
            <React.Suspense fallback={null}>
                <Navbar/>
            </React.Suspense>
            Hello Microfrontend
            <React.Suspense fallback={null}>
                <Footer/>
            </React.Suspense>
        </div>
    );
}

export default App;

.env

# ======== For Internal App ===========
# === Initial name app ===
APP_NAME=main
# === Port of app on dev mode === 
PORT_APP_DEV=8080
# === Port of app on prod mode if any === 
PORT_APP_PROD=8000
# === Endpoint dev ===
ENDPOINT_DEV=http://localhost
# === Endpoint prod ===
ENDPOINT_PROD=http://prod.com


# ======== For External app or remote app ========
# === For remote name ===
REMOTE_NAME_1=app2
# === Port of app on dev mode === 
REMOTE_PORT_APP_DEV_1=8081
# === Port of app on prod mode if any === 
REMOTE_PORT_APP_PROD_1=8001
# === Endpoint dev ===
REMOTE_ENDPOINT_DEV_1=http://localhost
# === Endpoint prod ===
; REMOTE_ENDPOINT_PROD_1=http://prod.com
# === File remote ====
REMOTE_FILE_1=remoteEntry.js

npm start

npx create-my-microfrontend app2

Create components "src/components/Navbar"

import React from 'react'

export default function Navbar() {
  return (
    <div>Navbar from app2</div>
  )
}

Create components "src/components/Footer"

import React from 'react'

export default function Footer() {
  return (
    <div>Footer from app2</div>
  )
}

.env

# ======== For Internal App ===========
# === Initial name app ===
APP_NAME=app2
# === Port of app on dev mode === 
PORT_APP_DEV=8081
# === Port of app on prod mode if any === 
PORT_APP_PROD=8001
# === Endpoint dev ===
ENDPOINT_DEV=http://localhost
# === Endpoint prod ===
ENDPOINT_PROD=http://prod.com
# === File name of remote file ===
FILE_NAME=remoteEntry.js
# === File name of file expose to another app ===
NAME_COMPONENT_EXPOSE_1=./Navbar
NAME_COMPONENT_EXPOSE_2=./Footer

# === Src component of file expose to another app ===
SRC_COMPONENT_EXPOSE_1=./src/components/Navbar
SRC_COMPONENT_EXPOSE_2=./src/components/Footer

npm start

Open on browser http://localhost:8080

Live preview

https://github.com/my-microfrontend/create-my-microfrontend/issues

By: Ugi Ispoyo Widodo