From 999469d26d5960d32f447e3168a27725d63f51ad Mon Sep 17 00:00:00 2001 From: Kyle D McCormick Date: Thu, 14 May 2026 14:35:20 -0400 Subject: [PATCH 1/2] docs: hacky docs on latest frontend setup --- README.md | 4 +-- frontend-plugin-sample/README.md | 58 +++++++++++++++----------------- 2 files changed, 30 insertions(+), 32 deletions(-) diff --git a/README.md b/README.md index fe57c61..8a2f418 100644 --- a/README.md +++ b/README.md @@ -52,9 +52,9 @@ tutor mounts add "$PWD/backend-plugin-sample" tutor dev launch # Frontend Plugin Setup (for learner-dashboard MFE development) -npm install $PWD/frontend-plugin-sample # Add env.config.jsx and module.config.js (see frontend-plugin-sample/README.md) -npm start +# Then, install and run. +cd path/to/frontend-app-learner-dashboard && npm ci && npm run dev ``` ### Option 2: Development without Tutor diff --git a/frontend-plugin-sample/README.md b/frontend-plugin-sample/README.md index 4092fe1..49feccd 100644 --- a/frontend-plugin-sample/README.md +++ b/frontend-plugin-sample/README.md @@ -306,29 +306,34 @@ if (response.data && Array.isArray(response.data)) { ### Prerequisites -1. **MFE Setup**: Have a learner dashboard MFE running locally +1. **Tutor & Tutor-MFE Setup**: Tutor is installed and launched in `dev` mode. 2. **Backend Plugin**: Install the backend plugin (see [`../backend-plugin-sample/README.md`](../backend-plugin-sample/README.md)) 3. **Node.js**: Version 16+ with npm or yarn ### Local Development Setup -#### Step 0: Build Plugin +#### Step 1: Create module.config.js -```bash -cd /path/to/sample-plugin/frontend-plugin-sample -npm run build -``` +Create `module.config.js` in your MFE root, not committed to the repo. +This tells the MFE to use install the `@openedx/sample-plugin` package +as a source (non-built) distribution . -#### Step 1: Install Plugin Package - -```bash -# In your MFE directory (e.g., frontend-app-learner-dashboard) -npm install /path/to/sample-plugin/frontend-plugin-sample +```javascript +module.exports = { + localModules: [ + { + moduleName: '@openedx/plugin-sample', + dir: '/path/to/sample-plugin/frontend-plugin-sample', + dist: 'src' + }, + ], +}; ``` #### Step 2: Create env.config.jsx -Create `env.config.jsx` in your MFE root (not committed to repo): +Create `env.config.jsx` in your MFE root, not committed to the repo. +This plugs the sample widget into the course list slot. ```javascript import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework'; @@ -355,29 +360,22 @@ const config = { export default config; ``` - -#### Step 3: Create module.config.js - -Create `module.config.js` for local development: - -```javascript -module.exports = { - localModules: [ - { - moduleName: '@openedx/plugin-sample', - dir: '/path/to/sample-plugin/frontend-plugin-sample' - }, - ], -}; -``` - **Purpose**: Webpack uses your local plugin code instead of the installed package. -#### Step 4: Start Development +#### Step 3: Start Development + +Now, from the MFE repository root, install requirements and run the dev server. ```bash -# In your MFE directory +# Install requirements npm ci + +# If running Tutor: +tutor mounts add . # Instruct tutor-mfe to redict requests to this local MFE devserver +tutor dev reboot -d mfe +npm run dev + +# If not running Tutor: npm start ``` From 3c27c45623b900efbf5fd51752c1d8b481cb746c Mon Sep 17 00:00:00 2001 From: Kyle McCormick Date: Thu, 14 May 2026 14:57:30 -0400 Subject: [PATCH 2/2] docs: typo Co-authored-by: Feanil Patel --- frontend-plugin-sample/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend-plugin-sample/README.md b/frontend-plugin-sample/README.md index 49feccd..f44b193 100644 --- a/frontend-plugin-sample/README.md +++ b/frontend-plugin-sample/README.md @@ -315,7 +315,7 @@ if (response.data && Array.isArray(response.data)) { #### Step 1: Create module.config.js Create `module.config.js` in your MFE root, not committed to the repo. -This tells the MFE to use install the `@openedx/sample-plugin` package +This tells the MFE to load/use the `@openedx/sample-plugin` package as a source (non-built) distribution . ```javascript