https://github.com/fdmediagroep/test-mfe
Testing FD Micro-frontends
https://github.com/fdmediagroep/test-mfe
mfe micro-frontend nextjs vercel
Last synced: 2 months ago
JSON representation
Testing FD Micro-frontends
- Host: GitHub
- URL: https://github.com/fdmediagroep/test-mfe
- Owner: FDMediagroep
- Created: 2023-04-26T14:24:15.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-04-26T14:54:32.000Z (about 3 years ago)
- Last Synced: 2025-06-18T08:48:39.135Z (about 1 year ago)
- Topics: mfe, micro-frontend, nextjs, vercel
- Language: TypeScript
- Homepage: https://test-mfe-fdmediagroep.vercel.app
- Size: 82 KB
- Stars: 0
- Watchers: 6
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# FD Micro-frontend test
Testing FD Micro-frontends
## Prerequisites
The micro frontends themselves don't include fonts. The page which include the micro-frontends need to make the fonts available.
## Running this application
### Getting started
After cloning this repository.
1. Make sure you've installed `node` and `npm`. [nodejs.org](https://nodejs.org/)
1. Run `npm i` in the application folder root to install dependencies required by this application
1. Run `npm run dev` to start the local development server. Use the information in the terminal to open the page in a webbrowser.
## Micro-frontend includes
The MFE includes happen in `pages/index.tsx`:
```
export const getStaticProps: GetStaticProps = async () => {
const footerPromise = fetch("https://fd.nl/mfe/footer").then((res) =>
res.text()
);
const menuPromise = fetch("https://fd.nl/mfe/menu").then((res) => res.text());
const [footerHtml, menuHtml] = await Promise.all([
footerPromise,
menuPromise,
]);
return {
props: {
footerHtml,
menuHtml,
},
};
};
```
The `footer` and `menu` are fetched server-side as HTML and passed as `string` to the page as `props`. The page then renders the strings as inline-HTML.
### Caveats
- Micro-frontends can contain links with relative URL's. These need to be handled correctly.
- Fonts are not included so they need to be loaded separately. In this application that happens in `pages/_document.tsx`