Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Setup app to be loaded as MFE #9

Merged
merged 2 commits into from
Mar 6, 2024
Merged

Setup app to be loaded as MFE #9

merged 2 commits into from
Mar 6, 2024

Conversation

gciotola
Copy link
Contributor

@gciotola gciotola commented Mar 6, 2024

What I did

This PR aims to change the way the React app is initialized so it can be loaded as micro front-end calling an init method available from the global window.

To do so I've applied the following changes:

  • Updated to the latest version of app-elements.
  • Updated required node version in pnpm and ci to 20.11.0 (with other toolings that relies on package.json's engines we have a more relaxed >=18).
  • Updated CI config to use latest AWS orbs
  • Added rollup-plugin-external-global package to have react and react-dom as externals.
  • Updated vite.config to generate manifest.json.
  • Updated index.html to load React from a CDN and initialize the app via window.clApp_${appName}.init with initial settings retrieved from env vars.
  • .env file is now versioned and distributed with default values (or empty, but they must exist). This is to allows vite to replace real content in the index.html (see point above).
  • Updated main.tsx to use createApp method from app-elements,
  • and moved all context providers from App.tsx to main.tsx to avoid unnecessary props drilling (except for routerBase).
  • Removed global.d.ts since is now part of app-elements.
  • Updated app home page to use HomePageLayout from app-elements.
  • Updated Metrics API fetcher functions to accept a domain as an argument instead of reading it from window.clAppConfig

How to test

Checklist

  • Make sure your changes are tested (stories and/or unit, integration, or end-to-end tests).
  • Make sure to add/update documentation regarding your changes.
  • You are NOT deprecating/removing a feature.

@gciotola gciotola self-assigned this Mar 6, 2024
@gciotola gciotola added the enhancement New feature or request label Mar 6, 2024
@gciotola gciotola requested a review from pfferrari March 6, 2024 11:29
pfferrari
pfferrari previously approved these changes Mar 6, 2024
Copy link
Contributor

@pfferrari pfferrari left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯

@gciotola gciotola merged commit ef94f2e into main Mar 6, 2024
1 check passed
@gciotola gciotola deleted the mfe-setup branch March 6, 2024 16:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants