Skip to content

Commit 419f1b4

Browse files
committed
feat: Remove module federation
We decided not to move forward with module federation during the Mini Summit, so all related functionality is removed here.
1 parent bfc1aff commit 419f1b4

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+2601
-7095
lines changed

README.md

Lines changed: 5 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -18,89 +18,24 @@ It will replace:
1818

1919
The new frontend framework will completely take over responsibility for the functionality of those libraries, and will also include a "shell" application.
2020

21-
It will enable Open edX frontends to be loaded as "module plugins" via Webpack module federation, or as "direct plugins" as part of a single, unified application. It will also support creation of "project" repositories as a central place to check in an Open edX instance's frontend customizations and extensions.
21+
It will enable Open edX frontends to be loaded as "direct plugins" as part of a single, unified application. It will also support creation of "project" repositories as a central place to check in an Open edX instance's frontend customizations and extensions.
2222

2323
## Further reading
2424

25-
- [Frontend Glossary](./docs/frontend-glossary.md)
2625
- [OEP-65: Frontend composability](https://open-edx-proposals.readthedocs.io/en/latest/architectural-decisions/oep-0065-arch-frontend-composability.html)
2726
- [ADR 0001: Create a unified platform library](https://github.com/openedx/open-edx-proposals/pull/598)
2827
- [Discourse discussion on frontend projects](https://discuss.openedx.org/t/oep-65-adjacent-a-frontend-architecture-vision/13223)
2928

3029
## Communication
3130

32-
This project uses the [#module-federation](https://openedx.slack.com/archives/C06HRLTP3E0) channel in Open edX Slack.
33-
3431
You can follow ongoing progress on the project's [Github project board](https://github.com/orgs/openedx/projects/65/views/1).
3532

36-
Feel free to reach out to David Joy ([Github](https://github.com/davidjoy), [Slack](https://openedx.slack.com/team/UFM4FEN0J)) with any questions.
33+
Feel free to reach out in [#wg-frontend on Slack](https://openedx.slack.com/archives/C04BM6YC7A6) with any questions.
3734

3835
## Development
3936

4037
This library is under development and has not yet been published to npm.
4138

42-
Its functionality can be tested with a few other companion repositories that have been built to work with it:
43-
44-
- https://github.com/davidjoy/frontend-app-base-test
45-
- https://github.com/davidjoy/frontend-project-test
46-
- https://github.com/davidjoy/frontend-project-module-test
47-
48-
To start the whole thing together:
49-
50-
- Check out https://github.com/davidjoy/frontend-base and the above three repositories as siblings.
51-
- Run `npm install` on all of them.
52-
- Run `npm run temp:refresh-all` in frontend-base.
53-
- Run `npm run pack frontend-project-test` in frontend-app-base-test.
54-
- Run `npm run pack frontend-project-module-test` in frontend-app-base-test.
55-
- You'll need 3 terminal windows.
56-
- Run `npm run dev` in `frontend-project-test`
57-
- Run `npm run dev:module` in `frontend-app-base-test`
58-
- Run `npm run dev:module` in `frontend-project-module-test
59-
- Visit `http://localhost:8080` in your browser to see the unified site.
60-
61-
What this site is showing you:
62-
63-
- The shell (header, footer, app initialization) is being loaded from `frontend-base` through `frontend-project-test`. The `site.config.dev.tsx` file in `frontend-project-test` has configured the site.
64-
- `ModuleOne` from `frontend-app-base-test` is being loaded _through_ the `site.config.dev.tsx` file in `frontend-project-test` as an imported dependency.
65-
- `ModuleTwo` is being loaded at runtime from the module federation dev server in `frontend-app-base-test`.
66-
- `ModuleThree` is being loaded at runtime from the module federation dev server in `frontend-project-module-test`.
67-
68-
Read below for more details about the companion repositories.
69-
70-
### frontend-app-base-test
71-
72-
https://github.com/davidjoy/frontend-app-base-test
73-
74-
This is an "MFE" repository with three modules in it which can be loaded into a shell. It can be tested in a few different ways.
75-
76-
- `npm run dev:module` - This will run a dev server and build the app as modules for module federation.
77-
- `npm run dev` - This will run the a dev server and build the app as part of a shell with three imported modules.
78-
- `npm run pack <frontend-project-test|frontend-project-module-test>` - this will package the library into an npm compatible `.tgz` file for use with the project repositories below.
79-
80-
### frontend-project-test
81-
82-
This is a "project" repository, which is a new thing. A project is where you put your customizations to the frontend.
83-
84-
The `frontend-project-test` project has been configured in its `site.config.dev.tsx` file to load the three modules from `frontend-app-base-test` in three different ways:
85-
86-
- Module One is loaded as an imported app, using frontend-app-base-test as a dependency of the project installed via `npm run pack` above.
87-
- Module Two is loaded via module federation from the `npm run dev:module` dev server in `frontend-app-base-test`
88-
- Module Three is loaded via module federation from the `npm run dev:module` dev server in `frontend-project-module-test`.
89-
90-
It can be tested with:
91-
92-
- `npm run dev` - This will start up a dev server with the new shell application and load the three modules into it via the methods described above.
93-
94-
### frontend-project-module-test
95-
96-
This is also a "project" repository, demonstrating that you can use module federation with a released library version of `frontend-app-base-test`, rather than by cloning the app and running a dev server in it. This is more appropriate for customizations of the app because you can check all your customizations in to the project, rather than needing to copy/paste them into the frontend-app-* repository at build time, which is awkward.
97-
98-
It can be tested with:
99-
100-
- `npm run dev:module` - This starts up a dev server that serves the modules from `frontend-app-base-test` for module federation, the same as running `npm run dev:module` in the `frontend-app-base-test` repository itself.
101-
102-
It's worth noting that this project has a new type of file: `build.dev.config.js` which is necessary to configure webpack to understand what modules it should be packaging for module federation. We can't use `site.config.dev.tsx` for this purpose, since that's runtime code.
103-
10439
## Migrating an MFE to `frontend-base` (Work in progress)
10540

10641
See the [Frontend App Migration How To](./docs/how_tos/migrate-frontend-app.md).
@@ -121,19 +56,18 @@ Then move the files out of the way (move src to some other sub-dir, mostly) to m
12156

12257
### Latest repository merges
12358

124-
- frontend-component-header - Up to date as of 9/12/2024
125-
- frontend-component-footer - Up to date as of 9/12/2024
12659
- frontend-build - Up to date as of 9/12/2024
127-
12860
- frontend-platform - Up to date as of 9/13/2024
12961
- frontend-plugin-framework - Up to date as of 9/13/2024
62+
- frontend-component-header - Up to date as of 9/12/2024
63+
- frontend-component-footer - Up to date as of 9/12/2024
13064

13165
# Other notable changes
13266

13367
- Cease using `AUTHN_MINIMAL_HEADER`, replace it with an actual minimal header.
13468
- No more using `process.env` in runtime code.
13569
- Removed dotenv. Use site.config.tsx.
136-
- Removed Purge CSS. We do not believe that Purge CSS works properly with Paragon in general, and it is also fundamentally incompatible with module federation as an architecture.
70+
- Removed Purge CSS. We do not believe that Purge CSS works properly with Paragon in general.
13771
- Removed `ensureConfig` function. This sort of type safety should happen with TypeScript types in the site config file.
13872
- Removed `ensureDefinedConfig` function. Similar to ensureConfig, this sort of type safety should be handled by TypeScript.
13973
- A number of site config variables now have sensible defaults:
@@ -188,7 +122,6 @@ MFE_CONFIG = {
188122
"""
189123
)
190124
)
191-
192125
```
193126

194127
Customizing the MFE config API:

docs/decisions/0004-frontend-library-migration-to-frontend-base.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ We will move the code from these libraries into `frontend-base`. We decided we
2424

2525
### Migration Order
2626

27-
We chose to move `frontend-build` first as the foundation upon which all the others will be built. A modified version of `frontend-build` will be used to build the shell and provide build scripts to the frontend apps which support webpack module federation, amongst other things.
27+
We chose to move `frontend-build` first as the foundation upon which all the others will be built. A modified version of `frontend-build` will be used to build the shell, amongst other things.
2828

2929
Following frontend build, we will move `frontend-platform` and validate that this repository can act as a replacement for `frontend-build` and `frontend-platform` together. At this point, micro-frontend repositories could be migrated to use this library instead of `frontend-build` and `frontend-platform`.
3030

docs/how_tos/migrate-frontend-app.md

Lines changed: 1 addition & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -112,9 +112,7 @@ With the exception of any custom scripts, replace the `scripts` section of your
112112
"scripts": {
113113
"build": "PORT=YOUR_PORT openedx build",
114114
"build:legacy": "openedx build:legacy", // TODO: Does this target exist?
115-
"build:module": "PORT=YOUR_PORT openedx build:module",
116115
"dev": "PORT=YOUR_PORT openedx dev",
117-
"dev:module": "PORT=YOUR_PORT openedx dev:module",
118116
"dev:legacy": "PORT=YOUR_PORT openedx dev:legacy",
119117
"i18n_extract": "openedx formatjs extract",
120118
"lint": "openedx lint .",
@@ -136,11 +134,10 @@ With the exception of any custom scripts, replace the `scripts` section of your
136134
137135
## 5. Other package.json edits
138136

139-
- `main` and `module`
137+
- `main`
140138

141139
```diff
142140
+ "main": "src/index.ts",
143-
+ "module": "src/index.ts",
144141
```
145142

146143
- `sideEffects`
@@ -156,30 +153,6 @@ This means that the code from the library can be safely tree-shaken by webpack.
156153

157154
// TODO: Maybe put scss and css files in side effects. They have side effects and need to be excluded so they get bundled.
158155

159-
- `config`
160-
161-
You must add a "config" section to package.json that describes the modules that the library exports. This includes a camelCase `name` for the remote that hosts all your packages. This name must be unique across all the libraries in a frontend, and so including your organization name is encouraged. For an Open edX default library called `frontend-app-my-library`, a good name would be `openedxMyLibrary`.
162-
163-
The config block must also include an `exposes` configuration that describes your modules.
164-
165-
```diff
166-
+ "config": {
167-
+ "name": "openedxMyLibrary",
168-
+ "exposes": {
169-
+ "./ModuleOne": "./src/module-one",
170-
+ "./ModuleTwo": "./src/module-two",
171-
+ "./ModuleThree": "./src/module-three"
172-
+ }
173-
+ },
174-
```
175-
176-
If you used the "exports" field in package.json it changes the way importing/requiring/TS/node works and everything starts to break.
177-
178-
The entries in `exposes` are:
179-
180-
1. A key that is compatible with the [Package entry points](https://nodejs.org/api/packages.html#package-entry-points) specification. Generally the name of your module prefixed with `./`.
181-
2. The actual path to the module in your source code. In the above example, `./ModuleOne` is the name that module federation will refer to, and `./src/module-one` is pointing to an `./src/module-one/index.tsx` file that exports the module. It is also acceptable to point at a non-index file such as `./src/module-one/ModuleOne.tsx` if that's how your code is structured.
182-
183156
## 6. Add a Type Declaration file (app.d.ts)
184157

185158
Create an `app.d.ts` file in the root of your MFE with the following contents:

0 commit comments

Comments
 (0)