Skip to content
This repository has been archived by the owner on Sep 24, 2024. It is now read-only.

Setup app to be loaded as MFE #11

Merged
merged 4 commits into from
Mar 6, 2024
Merged

Setup app to be loaded as MFE #11

merged 4 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.

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:55
pfferrari
pfferrari previously approved these changes Mar 6, 2024
@@ -13,7 +13,7 @@ export const ListEmptyState: FC = () => {
const { canUser } = useTokenProvider()

const [, params] = useRoute<{ stockLocationId: string }>(
appRoutes.newStockItem.path
appRoutes.stockLocation.path
Copy link
Contributor

Choose a reason for hiding this comment

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

Thanks for this fix.. The issue here is that the ListEmptyState is shared between two pages:

  • stock items list
  • new stock items
    both sharing the logic to have a stockLocationId param in the URL.
    I should fix this by differentiating the behavior of the component with a brand new type prop like in orders app.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

fixed, thanks for pointing this out

@pfferrari pfferrari self-requested a review March 6, 2024 15:49
@gciotola gciotola merged commit b67b773 into main Mar 6, 2024
4 checks passed
@gciotola gciotola deleted the mfe-setup branch March 6, 2024 16:40
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants