Skip to content

Commit 9a232d3

Browse files
committed
feat: Remove module federation
We decided not to move forward with module federation during the Mini Summit, so go ahead and remove all related-functionality.
1 parent bfc1aff commit 9a232d3

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

+2606
-7056
lines changed

README.md

Lines changed: 10 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -18,64 +18,54 @@ 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

4239
Its functionality can be tested with a few other companion repositories that have been built to work with it:
4340

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
41+
- https://github.com/arbrandes/frontend-app-base-test
42+
- https://github.com/arbrandes/frontend-project-test
4743

4844
To start the whole thing together:
4945

50-
- Check out https://github.com/davidjoy/frontend-base and the above three repositories as siblings.
46+
- Check out https://github.com/openedx/frontend-base and the above three repositories as siblings.
5147
- Run `npm install` on all of them.
5248
- Run `npm run temp:refresh-all` in frontend-base.
5349
- 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.
5550
- You'll need 3 terminal windows.
5651
- 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
5952
- Visit `http://localhost:8080` in your browser to see the unified site.
6053

6154
What this site is showing you:
6255

6356
- 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.
6457
- `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`.
6758

6859
Read below for more details about the companion repositories.
6960

7061
### frontend-app-base-test
7162

72-
https://github.com/davidjoy/frontend-app-base-test
63+
https://github.com/arbrandes/frontend-app-base-test
7364

7465
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.
7566

76-
- `npm run dev:module` - This will run a dev server and build the app as modules for module federation.
7767
- `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.
68+
- `npm run pack frontend-project-test` - this will package the library into an npm compatible `.tgz` file for use with the project repositories below.
7969

8070
### frontend-project-test
8171

@@ -84,23 +74,11 @@ This is a "project" repository, which is a new thing. A project is where you pu
8474
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:
8575

8676
- 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`.
8977

9078
It can be tested with:
9179

9280
- `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.
9381

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-
10482
## Migrating an MFE to `frontend-base` (Work in progress)
10583

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

122100
### Latest repository merges
123101

124-
- frontend-component-header - Up to date as of 9/12/2024
125-
- frontend-component-footer - Up to date as of 9/12/2024
126102
- frontend-build - Up to date as of 9/12/2024
127-
128103
- frontend-platform - Up to date as of 9/13/2024
129104
- frontend-plugin-framework - Up to date as of 9/13/2024
105+
- frontend-component-header - Up to date as of 9/12/2024
106+
- frontend-component-footer - Up to date as of 9/12/2024
130107

131108
# Other notable changes
132109

133110
- Cease using `AUTHN_MINIMAL_HEADER`, replace it with an actual minimal header.
134111
- No more using `process.env` in runtime code.
135112
- 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.
113+
- Removed Purge CSS. We do not believe that Purge CSS works properly with Paragon in general.
137114
- Removed `ensureConfig` function. This sort of type safety should happen with TypeScript types in the site config file.
138115
- Removed `ensureDefinedConfig` function. Similar to ensureConfig, this sort of type safety should be handled by TypeScript.
139116
- A number of site config variables now have sensible defaults:

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)