This Project uses Typescript and react to create a micro frontend architecture. Most over engineered project in the history of projects. Run npm install and npm run build:minimal-required --workspaces --if-present to build local files.
Here the different packages are described. Please see the picture below for the high level architecture. All of our diffrent packages can contain both UI and or API code.
We consist of main parts:
- ui-core
- ui-registy
- ui-library
- main-application
Contains contracts/framework for app shell and core data services + reference to any singletons that are needed across the app. Will contain no view code.
Self explaintory - register of ui features. Here features are registered on the "global" name scope. Think of it as the DNS of the our main-application.
Our Design System folder including common utils
There are three components to our main application. This is the configuration of our main application from all of our other packages.
- bootstrap
- routes
- layout
Reference to boostrap code from features as needed. Example reference (to be implemented) is the bootstrap code to implement the Authorization service from the auth feature.
Routes based on the paths in our registry with references to views from a feature.
The purpose of a layout is to do view orchastration. A Layout will have a router which contains a set of routes. While a layout in general only display one View (matched route) it may also display view fragments. View fragment will in general not require a route and won't take up the entire screen. View Fragments could for example be a nav bar.
We have created a scaleable naming convention:
- feature-namespace_feature-name
Features don't need a name space, but as features invovle they a namespace may evolve as complexity grows. Examples of this could be feature-auth which over time may split into feat-auth_login and feat-auth_register.
https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API/Using_channel_messaging https://tsh.io/blog/micro-frontend-tutorial/ https://github.com/hasanayan/craco-module-federation
export NODE_OPTIONS=--openssl-legacy-provider
To indentfy which package has changed since a commit and hence which you should consider to merge into your branch and build from master you can run the following command:
node ./tasks/getChangedPackages
- Implement a tasks folder with tasks like:
- Create new features easily
- CI/CD Detect workspace changes and only build those needed
git push github