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
feat: support npm workspaces for local development
Decouple clean from build in the Makefile so that watch mode can
rebuild without wiping dist/. Add nodemon.json and watch:build,
watch:docs, watch:pack scripts to standardize file watching.
Part of #184
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Copy file name to clipboardExpand all lines: docs/how_tos/migrate-frontend-app.md
+141-2Lines changed: 141 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -134,7 +134,7 @@ With the exception of any custom scripts, replace the `scripts` section of your
134
134
"i18n_extract": "openedx formatjs extract",
135
135
"lint": "openedx lint .",
136
136
"lint:fix": "openedx lint --fix .",
137
-
"prepack": "npm run build",
137
+
"prepack": "npm run clean && npm run build",
138
138
"snapshot": "openedx test --updateSnapshot",
139
139
"test": "openedx test --coverage --passWithNoTests"
140
140
},
@@ -158,11 +158,13 @@ Also:
158
158
159
159
Last but not least, add `clean:` and `build:` targets to your `Makefile`. The build target compiles TypeScript to JavaScript, copies all SCSS and asset files from `src/` into `dist/` preserving directory structure, and finally uses `tsc-alias` to rewrite `@src` path aliases to relative paths:
160
160
161
+
Note that `build` intentionally does *not* depend on `clean`. This allows incremental rebuilds during development (especially in workspace mode, where a watcher triggers `build` on every change). The `prepack` script in `package.json` runs `clean && build` explicitly, so published packages always start fresh.
162
+
161
163
```makefile
162
164
clean:
163
165
rm -rf dist
164
166
165
-
build: clean
167
+
build:
166
168
tsc --project tsconfig.build.json
167
169
find src -type f \( -name '*.scss' -o -path '*/assets/*'\) -exec sh -c '\
168
170
forfin"$$@";do \
@@ -250,6 +252,9 @@ node_modules
250
252
npm-debug.log
251
253
coverage
252
254
dist/
255
+
packages/
256
+
/.turbo
257
+
/turbo.json
253
258
/*.tgz
254
259
255
260
### i18n ###
@@ -958,3 +963,137 @@ Refactor slots
958
963
First, rename `src/plugin-slots`, if it exists, to `src/slots`. Modify imports and documentation across the codebase accordingly.
959
964
960
965
Next, the frontend-base equivalent to `<PluginSlot />` is `<Slot />`, and has a different API. This includes a change in the slot ID, according to the [new slot naming ADR](../decisions/0009-slot-naming-and-lifecycle.rst) in this repository. Rename them accordingly. You can refer to the `src/shell/dev` in this repository for examples.
966
+
967
+
968
+
Set up npm workspaces for local development
969
+
===========================================
970
+
971
+
Frontend apps support `npm workspaces <https://docs.npmjs.com/cli/using-npm/workspaces>`_ so that developers can work on the app and its dependencies (such as ``frontend-base``) simultaneously, with changes reflected automatically.
972
+
973
+
Add the workspaces field to package.json
974
+
-----------------------------------------
975
+
976
+
```diff
977
+
+ "workspaces": [
978
+
+ "packages/*"
979
+
+ ],
980
+
```
981
+
982
+
This tells npm to look in ``packages/`` for local overrides of published packages. The ``packages/`` directory is gitignored (see the `.gitignore` step above), since it contains development-only bind-mounted checkouts.
983
+
984
+
Add a turbo.site.json file
985
+
--------------------------
986
+
987
+
Create a ``turbo.site.json`` at the repository root. This configures `Turborepo <https://turbo.build/>`_ to build workspace packages in dependency order and run persistent tasks (watch and dev server) concurrently:
988
+
989
+
```json
990
+
{
991
+
"$schema": "https://turbo.build/schema.json",
992
+
"tasks": {
993
+
"build": {
994
+
"dependsOn": ["^build"],
995
+
"outputs": ["dist/**"],
996
+
"cache": false
997
+
},
998
+
"clean": {
999
+
"cache": false
1000
+
},
1001
+
"watch:build": {
1002
+
"dependsOn": ["^build"],
1003
+
"persistent": true,
1004
+
"cache": false
1005
+
},
1006
+
"//#dev:site": {
1007
+
"dependsOn": ["^build"],
1008
+
"persistent": true,
1009
+
"cache": false
1010
+
}
1011
+
}
1012
+
}
1013
+
```
1014
+
1015
+
The file is named ``turbo.site.json`` rather than ``turbo.json`` to avoid conflicts with turbo v2's workspace validation. When a site repository includes your app as an npm workspace, turbo scans for ``turbo.json`` in each package directory and rejects root task syntax (``//#``) and configs without ``"extends"``. By using a different filename, the config is invisible to turbo during workspace runs, and only activated via the Makefile when running standalone (see below).
1016
+
1017
+
Add a nodemon.json file
1018
+
------------------------
1019
+
1020
+
Create a ``nodemon.json`` at the repository root. This configures the ``watch:build`` script to rebuild automatically when source files change:
1021
+
1022
+
```json
1023
+
{
1024
+
"watch": [
1025
+
"src"
1026
+
],
1027
+
"ext": "js,jsx,ts,tsx,scss"
1028
+
}
1029
+
```
1030
+
1031
+
Add workspace-aware scripts
1032
+
----------------------------
1033
+
1034
+
Install ``turbo`` and ``nodemon`` as dev dependencies:
1035
+
1036
+
```sh
1037
+
npm install --save-dev turbo nodemon
1038
+
```
1039
+
1040
+
Then add the following scripts to ``package.json``:
# turbo.site.json is the standalone turbo config for this package. It is
1056
+
# renamed to avoid conflicts with turbo v2's workspace validation, which
1057
+
# rejects root task syntax (//#) and requires "extends" in package-level
1058
+
# turbo.json files, such as when running in a site repository. The targets
1059
+
# below copy it into place before running turbo and clean up after.
1060
+
turbo.json: turbo.site.json
1061
+
cp $<$@
1062
+
1063
+
build-packages: turbo.json
1064
+
$(TURBO) run build; rm -f turbo.json
1065
+
1066
+
clean-packages: turbo.json
1067
+
$(TURBO) run clean; rm -f turbo.json
1068
+
1069
+
dev-packages: turbo.json
1070
+
$(TURBO) run watch:build dev:site; rm -f turbo.json
1071
+
```
1072
+
1073
+
-``watch:build`` uses ``nodemon`` to watch for source changes (as configured in ``nodemon.json``) and re-runs ``npm run build`` on each change. Turbo runs this in each workspace package that defines it.
1074
+
-``build:packages`` builds all workspace packages in dependency order (e.g., ``frontend-base`` before the app).
1075
+
-``clean:packages`` runs the ``clean`` script in each workspace package.
1076
+
-``dev:site`` is an alias for ``npm run dev`` that turbo uses as a root-only task (``//#dev:site``).
1077
+
-``dev:packages`` builds dependencies, then concurrently watches workspace packages for changes and starts the dev server.
1078
+
1079
+
The Makefile targets copy ``turbo.site.json`` to ``turbo.json`` before invoking turbo, then remove the copy afterward. This ensures turbo finds its expected config when running standalone, without leaving a ``turbo.json`` that would conflict in a workspace context. The ``--dangerously-disable-package-manager-check`` flag and ``TURBO_TELEMETRY_DISABLED=1`` are also set here, keeping turbo invocation details in one place.
1080
+
1081
+
Using workspaces
1082
+
-----------------
1083
+
1084
+
Todevelopagainstalocal``frontend-base``:
1085
+
1086
+
```sh
1087
+
mkdir -p packages/frontend-base
1088
+
sudo mount --bind /path/to/frontend-base packages/frontend-base
1089
+
npm install
1090
+
npmrundev:packages
1091
+
```
1092
+
1093
+
Bind mounts are used instead of symlinks because Node.js resolves symlinks to real paths, which breaks hoisted dependency resolution. Docker volume mounts work equally well (and are what ``tutor dev`` uses).
0 commit comments