https://github.com/jails-org/mfe
A repository for Micro Front-end Applications
https://github.com/jails-org/mfe
mfe micro-frontend
Last synced: 11 months ago
JSON representation
A repository for Micro Front-end Applications
- Host: GitHub
- URL: https://github.com/jails-org/mfe
- Owner: jails-org
- License: mit
- Created: 2024-04-08T03:38:56.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-05-03T21:27:01.000Z (about 1 year ago)
- Last Synced: 2025-05-03T21:27:58.434Z (about 1 year ago)
- Topics: mfe, micro-frontend
- Language: TypeScript
- Homepage: https://stackblitz.com/edit/jails-mfe?file=index.html
- Size: 84.6 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# MFE
A Simple way to create and share Micro FrontEnd Applications
This Micro Frontend Monorepo is suposed to be used as an example, you can clone it and host it in your own static cloud.
## Host
### Usage
**Important** : We're using Parceljs to generate static code so there's a bug where you have to have at least 2 MFES so parcel can create folder structure as expected.
Please, ensure that you have at least 2 MFES and you'll be good to go.
Clone repo, install dependencies using `npm` or any other node module package system, and run `yarn dev` in order to see the samples working.
You can access them here :
- http://localhost:1234/mfe-hello-world/page : Hello World Page
- http://localhost:1234/mfe-sample/page : Sample Page
If you want to create a new MFE, there's a command for that:
1. You just have to run: `yarn create:mfe some-name`. This will create a new folder containing all files needed to work.
2. Run `yarn dev` again in order to see you MFE that should be available on: http://localhost:1234/mfe-some-name/page.
### Building
You can run `yarn build` when you're ready. That will generate your static files in the following structure to be used externally:
```
mfe-some-name
- index.html
- index.css
- index.js
```
## Client
### Usage
Once your MFE host is hosted, it's very simple to run them inside your application.
1. You just have to import the `main.js` file generated by building task, it will contain the initialization code and dependencies of your mfes.
2. Instantiate them manually in to the DOMElement you want.
```ts
window.MFE
.add('mfe-sample', '#sample')
.add('mfe-hello-world', '#hello-world')
.start()
```
The script url needs to be present in host package.json in the `host` field. Ex.: https://github.com/jails-org/MFE/blob/8edee8b7d5f7105d299602a491fb3c263595ff56/package.json#L7
So change it to your hosting url after your deploy.
## Live Example
https://stackblitz.com/edit/jails-mfe?file=index.html