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.
How to install
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 |
.env File Configuration
There are two configurations, the first is a configuration for the app itself, and the second is a configuration for remote apps or taking components from other apps
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 |
===========================
Configuration for internal app
for configuration from internal app
APP_NAME
For naming from app if going to export component to other app, this is mandatory
For example:APP_NAME=main
PORT_APP_DEV
To determine the development port that will be used, do not use a port that is already in use by other applications, this is mandatory
For example:PORT_APP_DEV=8080
PORT_APP_PROD
To determine the production port that will be used, do not use a port that is already in use by other applications
For example:PORT_APP_PROD=8000
ENDPOINT_DEV
Used to determine the endpoint during the development process
For example:ENDPOINT_DEV=http://localhost
ENDPOINT_PROD
Used to determine the endpoint during the production process, this is mandatory
For example:ENDPOINT_PROD=http://prod.com
FILE_NAME
To specify a file name to call or remote from another app if this app is used for remote file. Mandatory if you want to expose component
For example:FILE_NAME=remoteEntry.js
NAME_COMPONENT_EXPOSE
For naming files from js files that will be remote by other apps, for file naming must be prefixed with "./" for example "./Foo". And this can be more than one file to be remote, by simply adding the prefix _1, _2 and so on. Mandatory if you want to expose component
For example:NAME_COMPONENT_EXPOSE_1=./Navbar
NAME_COMPONENT_EXPOSE_2=./Footer
NAME_COMPONENT_EXPOSE_3=./Sidebar
SRC_COMPONENT_EXPOSE
To call the place where the js file is stored that will be remote by other apps, for file calling must be prefixed with "./" for example "./src/components/Navbar". And this can be more than one file to be remote, by simply adding the prefix _1, _2 and so on. Mandatory if you want to expose component
For example:SRC_COMPONENT_EXPOSE_1=./src/components/Navbar
SRC_COMPONENT_EXPOSE_2=./src/components/Footer
SRC_COMPONENT_EXPOSE_3=./src/components/Sidebar
===========================
Configuration for External app or remote app
This configuration is used to call or remote file from outside app or second app or other app. for this configuration it always ends with a "_" or underscore then followed by a number indicating the number of apps being called
REMOTE_NAME
The name of the remote application. this is mandatory
For example:REMOTE_NAME_1=app2
REMOTE_PORT_APP_DEV
Port of app development the remote application. this is mandatory
For example:REMOTE_PORT_APP_DEV_1=8081
REMOTE_PORT_APP_PROD
Port of app production the remote application.
For example:REMOTE_PORT_APP_PROD_1=8001
REMOTE_ENDPOINT_DEV
Endpoint of app development the remote application. this is mandatory
For example:REMOTE_ENDPOINT_DEV_1=http://localhost
REMOTE_ENDPOINT_PROD
Endpoint of app production the remote application. this is mandatory
For example:REMOTE_ENDPOINT_PROD_1=http://prod.com
REMOTE_FILE
Filename the remote application. this is mandatory
For example:REMOTE_FILE_1=remoteEntry.js
===============================
Usage examples
We will create 2 sample projects, the first app is as the main app, and the second app is the component that will be used by the first app
========= Main 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
========= Second app =========
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
Note: Can only run on node js version 14 and above
Report bugs
https://github.com/my-microfrontend/create-my-microfrontend/issues
By: Ugi Ispoyo Widodo