You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+5-72Lines changed: 5 additions & 72 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -18,89 +18,24 @@ It will replace:
18
18
19
19
The new frontend framework will completely take over responsibility for the functionality of those libraries, and will also include a "shell" application.
20
20
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.
- 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.
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
-
104
39
## Migrating an MFE to `frontend-base` (Work in progress)
105
40
106
41
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
121
56
122
57
### Latest repository merges
123
58
124
-
- frontend-component-header - Up to date as of 9/12/2024
125
-
- frontend-component-footer - Up to date as of 9/12/2024
126
59
- frontend-build - Up to date as of 9/12/2024
127
-
128
60
- frontend-platform - Up to date as of 9/13/2024
129
61
- 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
130
64
131
65
# Other notable changes
132
66
133
67
- Cease using `AUTHN_MINIMAL_HEADER`, replace it with an actual minimal header.
134
68
- No more using `process.env` in runtime code.
135
69
- 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.
137
71
- Removed `ensureConfig` function. This sort of type safety should happen with TypeScript types in the site config file.
138
72
- Removed `ensureDefinedConfig` function. Similar to ensureConfig, this sort of type safety should be handled by TypeScript.
139
73
- A number of site config variables now have sensible defaults:
Copy file name to clipboardExpand all lines: docs/decisions/0004-frontend-library-migration-to-frontend-base.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -24,7 +24,7 @@ We will move the code from these libraries into `frontend-base`. We decided we
24
24
25
25
### Migration Order
26
26
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.
28
28
29
29
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`.
@@ -136,11 +134,10 @@ With the exception of any custom scripts, replace the `scripts` section of your
136
134
137
135
## 5. Other package.json edits
138
136
139
-
-`main` and `module`
137
+
-`main`
140
138
141
139
```diff
142
140
+ "main": "src/index.ts",
143
-
+ "module": "src/index.ts",
144
141
```
145
142
146
143
-`sideEffects`
@@ -156,30 +153,6 @@ This means that the code from the library can be safely tree-shaken by webpack.
156
153
157
154
// TODO: Maybe put scss and css files in side effects. They have side effects and need to be excluded so they get bundled.
158
155
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
-
183
156
## 6. Add a Type Declaration file (app.d.ts)
184
157
185
158
Create an `app.d.ts` file in the root of your MFE with the following contents:
0 commit comments