This gets you most of the advantages of a microfrontend:
1) Monorepo with multiple workspaces
2) With several separate independently deployed applications, each maintained by a separate team
3) That share a set of common packages for common stuff (auth, etc) with full typescript definitions
4) Add CI to typecheck if any shared package changes types you get errors
5) Preferably with the packages being able to be independently run for development (something like storybook, although I don't recommend it)
6) Preferably with the packages being kept small, lean, with limited number of external dependencies (ie, settle on the cross-team deps to use, so framework, routing, data-fetching, etc)
7) Some kind of pre-commit git hook or CI script to validate a set of core shared dependencies used by packages are kept in sync (ie, everyone is running the EXACT SAME React version). I use this one:
https://gist.github.com/DanielHoffmann/a456aadb2f27880d59241...
8) Shared build configuration and tools, all apps are validated, built and bundled by the same code.
9) NO PACKAGE PUBLISHING/VERSIONING, all dependencies are workspace:*
For example:
folder-structure:
/apps/{team1-app-name}/
/apps/{team2-app-name}/
/packages/auth/
/packages/some-util-lib/
/package.json
"scripts": (test, lint, format, typecheck all done at the top level package.json)
"workspaces": [
"apps/*",
"packages/*",
],
/packages/auth/package.json
"scripts": (dev to run in development mode)
"devDependencies": { "some-util-lib": "workspace:*", "react": "^18.0.0" }
"peerDependencies": { "some-util-lib": "*", "react": "*" }
/apps/{team1-app-name}/package.json
"scripts": (dev to run in development mode, build for production builds)
"dependencies": {
"auth": "workspace:*"
"some-util-lib": "workspace:*"
}
This doesn't give you 100% of the independence of microfrontends, but it does give you quite a lot of bang for your buck. Depending how much independence or reuse you want you might want more or less shared external dependencies (for example your shared packages could be framework agnostic and just use raw JS)
The build/bundling configuration can set up separate chunks for the core set of shared dependencies (react, router, etc) to improve build times, load speeds and caching*