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

Experimenting with Microfrontends #9194

Closed
wants to merge 28 commits into from
Closed
Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
1637e00
WIP Microfrontends; Add few shadcn components
gigincg Nov 10, 2024
2918119
Merge branch 'develop' into microfrontend
gigincg Nov 10, 2024
c910111
Cleanup Meta field
gigincg Nov 22, 2024
4497313
Merge develop into microfrontend
gigincg Nov 22, 2024
b0b0880
Solve Compilation Issues
gigincg Nov 23, 2024
4ebd325
WIP: Microfrontends without Shared Deps
gigincg Nov 24, 2024
92f24fd
PoC: Dynamic Loaded Microfrontends with Dynamic import
gigincg Nov 25, 2024
4d5fae7
Experimenting with Builds
gigincg Nov 25, 2024
20754eb
Merge branch 'develop' into microfrontend
gigincg Nov 25, 2024
94c8217
Disable Deps sharing
gigincg Nov 25, 2024
efbf43c
Configure rollup as platform-deps
gigincg Nov 25, 2024
ca3e118
Switch out of SWC
gigincg Nov 25, 2024
9b982c1
Revert to pre-mf config
gigincg Nov 25, 2024
dbc9443
Fix Microfrontend URL; Update build command
gigincg Nov 25, 2024
cba055f
Reinclude the setup script for the sake of the pluginMap
gigincg Nov 25, 2024
2bf352e
Add optional deps for rollup
gigincg Nov 25, 2024
dd1cdf9
add postinstall
gigincg Nov 25, 2024
5900873
Reconfigure platform deps script
gigincg Nov 25, 2024
29ba23c
Switch Microfrontend url to https
gigincg Nov 25, 2024
d94bd4d
Share: Plausible, hooks, icons
gigincg Nov 26, 2024
ae364be
Few more shared components
gigincg Nov 26, 2024
79e2910
Merge branch 'develop' into microfrontend
gigincg Nov 26, 2024
a9b39f2
Testing Remote MFE Setup
gigincg Dec 6, 2024
e1b0608
Update env; Remove typedef
gigincg Dec 6, 2024
6279488
Update Scripts; Vite
gigincg Dec 6, 2024
a52cdc0
Remove Custom Build Configs
gigincg Dec 6, 2024
c601ae5
Switch back to build folder
gigincg Dec 6, 2024
34858e9
Merge branch 'develop' into microfrontend
gigincg Dec 9, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 35 additions & 5 deletions .cursorrules
Original file line number Diff line number Diff line change
@@ -1,18 +1,48 @@
Care is a React Typescript Project, built with Vite and styled with TailwindCSS.

Care uses a Plugin Architecture. Apps are installed in /apps.
Pages are defined in /src/pages.

Care uses a custom useQuery hook to fetch data from the API. APIs are defined in the api.tsx file
The React Components for the pages are defined in /src/components. Care primarily uses shadcn/ui components.

Here's an example of how to use the useQuery hook to fetch data from the API:
Routing for the React Pages are defined in /src/Routers/AppRouter.tsx using `raviger`. The AppRouter has a Routes object that maps paths to React Components.

For Icons, Care uses an implementation of Unicons which can be used like this:

```
import CareIcon from "@/CAREUI/icons/CareIcon";

<CareIcon icon="l-hospital" />
```

The main routes are accessible from the BaseNavItems defined within the StatelessSidebar component in /src/components/Common/Sidebar/Sidebar.tsx.

Care uses a custom useQuery hook to fetch data from the API. API routes are defined in the api.tsx file like:

```
useQuery from "@/common/hooks/useQuery";
routes = {
createScribe: {
path: "/api/care_scribe/scribe/",
method: "POST",
TReq: Type<ScribeModel>(),
TRes: Type<ScribeModel>(),
},
...otherRoutes
}
```

Here's an example of how to use the useQuery hook to fetch data from the API

```
import useQuery from "@/Utils/request/useQuery";
const { data, loading, error } = useQuery(routes.getFacilityUsers, {
facility_id: "1",
});
```
Copy link
Contributor

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

API documentation needs type safety improvements

The API route definition example could be enhanced:

  1. The Type<ScribeModel>() syntax seems non-standard
  2. Missing error response type definition
  3. No explanation of the routes object structure

Consider updating to:

interface ApiRoute<TReq, TRes> {
  path: string;
  method: 'GET' | 'POST' | 'PUT' | 'DELETE';
  TReq: TReq;
  TRes: TRes;
}

const routes = {
  createScribe: {
    path: "/api/care_scribe/scribe/",
    method: "POST",
    TReq: ScribeModel,
    TRes: ScribeModel,
  } as ApiRoute<ScribeModel, ScribeModel>,
  // ...otherRoutes
};


Here's an example of how to make a request to the API

request from "@/common/utils/request";
```
import request from "@/Utils/request/request";
const { res } = await request(routes.partialUpdateAsset, {
pathParams: { external_id: assetId },
body: data,
Expand Down
5 changes: 4 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -62,4 +62,7 @@ cypress/fixtures/token.json
# Care Apps
/apps/*
src/pluginMap.ts
/apps_backup/*
/apps_backup/*

# Federation Temp files
/.__mf__temp
6 changes: 3 additions & 3 deletions netlify.toml
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
[build]
publish = "build/"
publish = "build"
command = "CI='' npm run build"

[build.environment]
NODE_VERSION = "20.12.0"
NPM_FLAGS = "--legacy-peer-deps"
NODE_VERSION = "22.11.0"
NPM_FLAGS = "--no-optional"
NODE_OPTIONS = "--max_old_space_size=4096"

[[redirects]]
Expand Down
Loading
Loading