Skip to content

Commit ccc9a1d

Browse files
authored
docs: hacky docs on latest frontend setup (#43)
1 parent f889918 commit ccc9a1d

2 files changed

Lines changed: 30 additions & 32 deletions

File tree

README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,9 +52,9 @@ tutor mounts add "$PWD/backend-plugin-sample"
5252
tutor dev launch
5353

5454
# Frontend Plugin Setup (for learner-dashboard MFE development)
55-
npm install $PWD/frontend-plugin-sample
5655
# Add env.config.jsx and module.config.js (see frontend-plugin-sample/README.md)
57-
npm start
56+
# Then, install and run.
57+
cd path/to/frontend-app-learner-dashboard && npm ci && npm run dev
5858
```
5959

6060
### Option 2: Development without Tutor

frontend-plugin-sample/README.md

Lines changed: 28 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -306,29 +306,34 @@ if (response.data && Array.isArray(response.data)) {
306306
307307
### Prerequisites
308308
309-
1. **MFE Setup**: Have a learner dashboard MFE running locally
309+
1. **Tutor & Tutor-MFE Setup**: Tutor is installed and launched in `dev` mode.
310310
2. **Backend Plugin**: Install the backend plugin (see [`../backend-plugin-sample/README.md`](../backend-plugin-sample/README.md))
311311
3. **Node.js**: Version 16+ with npm or yarn
312312
313313
### Local Development Setup
314314
315-
#### Step 0: Build Plugin
315+
#### Step 1: Create module.config.js
316316
317-
```bash
318-
cd /path/to/sample-plugin/frontend-plugin-sample
319-
npm run build
320-
```
317+
Create `module.config.js` in your MFE root, not committed to the repo.
318+
This tells the MFE to load/use the `@openedx/sample-plugin` package
319+
as a source (non-built) distribution .
321320
322-
#### Step 1: Install Plugin Package
323-
324-
```bash
325-
# In your MFE directory (e.g., frontend-app-learner-dashboard)
326-
npm install /path/to/sample-plugin/frontend-plugin-sample
321+
```javascript
322+
module.exports = {
323+
localModules: [
324+
{
325+
moduleName: '@openedx/plugin-sample',
326+
dir: '/path/to/sample-plugin/frontend-plugin-sample',
327+
dist: 'src'
328+
},
329+
],
330+
};
327331
```
328332
329333
#### Step 2: Create env.config.jsx
330334
331-
Create `env.config.jsx` in your MFE root (not committed to repo):
335+
Create `env.config.jsx` in your MFE root, not committed to the repo.
336+
This plugs the sample widget into the course list slot.
332337
333338
```javascript
334339
import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
@@ -355,29 +360,22 @@ const config = {
355360

356361
export default config;
357362
```
358-
359-
#### Step 3: Create module.config.js
360-
361-
Create `module.config.js` for local development:
362-
363-
```javascript
364-
module.exports = {
365-
localModules: [
366-
{
367-
moduleName: '@openedx/plugin-sample',
368-
dir: '/path/to/sample-plugin/frontend-plugin-sample'
369-
},
370-
],
371-
};
372-
```
373-
374363
**Purpose**: Webpack uses your local plugin code instead of the installed package.
375364
376-
#### Step 4: Start Development
365+
#### Step 3: Start Development
366+
367+
Now, from the MFE repository root, install requirements and run the dev server.
377368
378369
```bash
379-
# In your MFE directory
370+
# Install requirements
380371
npm ci
372+
373+
# If running Tutor:
374+
tutor mounts add . # Instruct tutor-mfe to redict requests to this local MFE devserver
375+
tutor dev reboot -d mfe
376+
npm run dev
377+
378+
# If not running Tutor:
381379
npm start
382380
```
383381

0 commit comments

Comments
 (0)