https://github.com/nikhil12894/myeditorapp-micro_frontend
Host app using Editor app
https://github.com/nikhil12894/myeditorapp-micro_frontend
argocd docker github-actions k8s micro-frontend react tailwindcss
Last synced: 6 months ago
JSON representation
Host app using Editor app
- Host: GitHub
- URL: https://github.com/nikhil12894/myeditorapp-micro_frontend
- Owner: Nikhil12894
- Created: 2024-07-18T04:19:50.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-01-12T17:44:57.000Z (over 1 year ago)
- Last Synced: 2025-02-11T17:54:56.498Z (over 1 year ago)
- Topics: argocd, docker, github-actions, k8s, micro-frontend, react, tailwindcss
- Language: TypeScript
- Homepage: https://micro-frontend-editor.learnwithnk.in/l
- Size: 5.41 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
### How to create Micro Frontend Using React Vite app and vite-plugin-federation
### Remote app
### *Demo*: [Editor app](https://app-editor.learnwithnk.in/)
1. Create a remote app from which will host the actual component.
Install vite-plugin-federation plugin
```sh
npm install -D @originjs/vite-plugin-federation
```
2. Create your components. ie `DemoComponent`
3. add this demo component in vite config to be exported algo with other config
In `vite.config.ts`
```ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import federation from "@originjs/vite-plugin-federation";
export default defineConfig({
plugins: [
react(),
federation({
name: "microFrontend",
filename: "remoteEntry.js",
exposes: {
"./DemoComponent": "./src/components/DemoComponent",
},
shared: ["react", "react-dom"],
}),
],
build: {
modulePreload: false,
target: "esnext",
minify: false,
cssCodeSplit: false,
},
});
```
4. now run `npm run build`
5. run `npm run preview`
I'm importing as default the federation of the plugin, and we need to provide some properties:
- name: the name of our object of module federation
- filename: This is very important, because the build of the app will generate a single file that will be our manifest to expose the componets. (I recommended to use remoteEntry.js as default)
- filename: This is very important, because the build of the app will generate a single file that will be our manifest to expose the componets.
- exposes: The object where we will let's say what we're going to expose. In the example the atom of jotai and the PokemonList component.
- shared: It's important because when we have other applications running our MF, we need to provide what is needed to render the MF. In this case, react and react-dom.
And even if the other application that consumes it is in react, the module federations plugin will define the import and if you already have it, it will not reimport.
---
### Host App
### *Demo*: [Host-app](https://micro-frontend-editor.learnwithnk.in/)
6. Now create Host app using vite
7. run `npm install -D @originjs/vite-plugin-federation`
8. add blow config in `vite.config.ts`
```ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import federation from "@originjs/vite-plugin-federation";
export default defineConfig({
plugins: [
react(),
federation({
name: "",
remotes: {
microFrontend: "http://localhost:4173/assets/remoteEntry.js",
},
shared: ["react", "react-dom"],
}),
],
build: {
modulePreload: false,
target: "esnext",
minify: false,
cssCodeSplit: false,
},
});
```
9. Now use `microFrontend/DemoComponent` in your host app
#### example --
```ts
import DemoComponent from "microFrontend/DemoComponent";
import "./App.css";
function App() {
return (
<>
Created using Vite + vite-plugin-federation
>
);
}
export default App;
```
10. run `npm run dev`
---