create-my-microfrontend v1.1.7

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

External App

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

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

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

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