❤
npm
Sign UpSign In

create-my-microfrontend

1.1.7 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i create-my-microfrontend

Weekly Downloads

1

Version

1.1.7

License

MIT

Unpacked Size

27.2 kB

Total Files

5

Last publish

Collaborators

  • ugiispoyo
Try on RunKit
Report malware