feat: add frontend-base sibling alongside legacy FPF plugin

Introduce frontend-app-sample/ next to the existing frontend-plugin-sample/.
The new directory is a frontend-base app, written in TypeScript, that
contributes a widgetReplace operation against the learner-dashboard's
CourseList slot on the bundled tutor-mfe site.  The legacy directory stays
put, unchanged, and keeps targeting the per-MFE env.config.jsx flow.

Have tutor-contrib-sample register both. The operator picks which one
fires by enabling (or not) the frontend-base learner-dashboard app in
tutor-mfe.

Co-Authored-By: Claude <noreply@anthropic.com>

Author: arbrandes

.github/workflows/release.yml

@@ -160,3 +160,30 @@ jobs:
           npm run build
           npm publish
         working-directory: './frontend-plugin-sample'
+
+  publish_app_to_npm:
+    runs-on: ubuntu-latest
+    needs: release
+    if: github.ref_name == 'main' && needs.release.outputs.released == 'true'
+    permissions:
+      contents: read
+      id-token: write
+
+    steps:
+      - name: Setup | Checkout Repository on Release Ref
+        uses: actions/checkout@v6
+        with:
+          ref: ${{ github.sha }}
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version-file: './frontend-app-sample/.nvmrc'
+
+      - name: Update the package version and publish
+        run: |
+          npm install
+          npm version ${{ needs.release.outputs.version }}
+          npm run build
+          npm publish
+        working-directory: './frontend-app-sample'

CLAUDE.md

@@ -14,8 +14,9 @@ This is a **sample plugin repository** that demonstrates all major Open edX plug
 
 **Repository Structure:**
 - `backend-plugin-sample/` - Django app plugin with models, APIs, events, and filters
-- `frontend-plugin-sample/` - React component for MFE slot customization  
-- `tutor-contrib-sample/` - Tutor plugin for easy deployment
+- `frontend-plugin-sample/` - React component plugged in via the legacy `frontend-plugin-framework` (FPF) and `env.config.jsx`
+- `frontend-app-sample/` - frontend-base `App` (sibling of `frontend-plugin-sample/`) that registers slot operations on the bundled site
+- `tutor-contrib-sample/` - Tutor plugin that installs one or the other depending on tutor-mfe's `FRONTEND_APPS` state
 - Each directory has comprehensive README.md files with TOCs
 
 **When Making Changes:**
@@ -24,14 +25,19 @@ This is a **sample plugin repository** that demonstrates all major Open edX plug
 - Maintain working integration between all plugin types
 - Keep examples realistic but not overly complex
 
+**Branch context:**
+This branch ships *both* frontend stacks side by side: `frontend-plugin-sample/` (legacy FPF, identical to `main`) and `frontend-app-sample/` (frontend-base App). The Tutor plugin registers both unconditionally; each one self-no-ops when its target stack isn't in play. The FPF `PLUGIN_SLOTS` contribution only renders into the legacy learner-dashboard MFE (which tutor-mfe skips when the frontend-base learner-dashboard App is enabled), and the frontend-base App's slot operation targets a slot that only exists when the frontend-base learner-dashboard App is loaded. The operator picks the active path by flipping `apps["learner-dashboard"]["enabled"]` in tutor-mfe's `FRONTEND_APPS` filter. See [Port a Frontend Plugin from frontend-plugin-framework to frontend-base](https://docs.openedx.org/en/latest/site_ops/how-tos/port-frontend-plugin-to-frontend-base.html) for the conceptual differences between the two stacks.
+
 **Key Files and Their Relationships:**
 - `backend-plugin-sample/openedx_plugin_sample/apps.py` - Plugin registration and Django integration
 - `backend-plugin-sample/openedx_plugin_sample/signals.py` - Open edX Events handlers
 - `backend-plugin-sample/openedx_plugin_sample/pipeline.py` - Open edX Filters implementation
 - `backend-plugin-sample/openedx_plugin_sample/models.py` - CourseArchiveStatus model (business logic)
-- `backend-plugin-sample/openedx_plugin_sample/views.py` - REST API endpoints consumed by frontend
-- `frontend-plugin-sample/src/plugin.jsx` - React component that replaces course list slot
-- `tutor-contrib-sample/tutorsample/plugin.py` - Deployment configuration (currently basic template)
+- `backend-plugin-sample/openedx_plugin_sample/views.py` - REST API endpoints consumed by either frontend
+- `frontend-plugin-sample/src/plugin.jsx` - Legacy FPF React component (imports from `@edx/frontend-platform`)
+- `frontend-app-sample/src/CourseList.tsx` - frontend-base React component, TypeScript (imports from `@openedx/frontend-base`)
+- `frontend-app-sample/src/app.tsx` - frontend-base `App` with slot operations targeting the learner-dashboard, TypeScript
+- `tutor-contrib-sample/tutorsample/plugin.py` - Tutor plugin: backend pip install + unconditional registration of both frontend paths (FPF via `PLUGIN_SLOTS` and frontend-base via `FRONTEND_APPS` + site-config patches); each path self-no-ops when its target stack isn't active
 
 ## Build/Lint/Test Commands
 - Make sure to set the following so that test output is not too verbose: `export PYTEST_ADDOPTS="--disable-warnings --no-header --tb=short"`
@@ -69,6 +75,6 @@ Always run `make quality` and fix issues before creating a PR to ensure consiste
 ### Open edX Plugin Patterns
 - **API Development**: Use `perform_create()`/`perform_update()` in viewsets for business logic
 - **Settings**: Use additive approach for `OPEN_EDX_FILTERS_CONFIG` to avoid plugin conflicts
-- **Frontend**: Use Paragon components and `getAuthenticatedHttpClient()` for platform integration
+- **Frontend**: Use Paragon components and import `getAuthenticatedHttpClient`/`getSiteConfig` from `@openedx/frontend-base` (not `@edx/frontend-platform`). The package's default export is the frontend-base `App`.
 - **Events**: Import signal handlers in `apps.py ready()` method for proper registration
 - **Filters**: Return dictionaries with same parameter names as input, handle all scenarios

README.md

@@ -32,7 +32,8 @@ This sample plugin showcases the **Open edX Hooks Extension Framework**, which a
 | **Django App Plugin** | Add models, APIs, views, and business logic | [How to create a plugin app](https://docs.openedx.org/projects/edx-django-utils/en/latest/plugins/how_tos/how_to_create_a_plugin_app.html) | [`backend-plugin-sample/`](./backend-plugin-sample/) | Adding new functionality, APIs, or data models |
 | **Events (Signals)** | React to platform events | [Open edX Events Guide](https://docs.openedx.org/projects/openedx-events/en/latest/) | [`backend-plugin-sample/openedx_plugin_sample/signals.py`](./backend-plugin-sample/openedx_plugin_sample/signals.py) | Integrating with external systems, audit logging |
 | **Filters** | Modify platform behavior | [Using Open edX Filters](https://docs.openedx.org/projects/openedx-filters/en/latest/how-tos/using-filters.html) | [`backend-plugin-sample/openedx_plugin_sample/pipeline.py`](./backend-plugin-sample/openedx_plugin_sample/pipeline.py) | Customizing business logic, URL redirects |
-| **Frontend Slots** | Customize MFE interfaces | [Frontend Plugin Slots](https://docs.openedx.org/en/latest/site_ops/how-tos/use-frontend-plugin-slots.html) | [`frontend-plugin-sample/`](./frontend-plugin-sample/) | UI customization, adding new components |
+| **Frontend Plugin (FPF)** | Customize MFE interfaces via [frontend-plugin-framework](https://github.com/openedx/frontend-plugin-framework) | [Frontend Plugin Slots](https://docs.openedx.org/en/latest/site_ops/how-tos/use-frontend-plugin-slots.html) | [`frontend-plugin-sample/`](./frontend-plugin-sample/) | UI customization on legacy per-MFE images |
+| **Frontend App (frontend-base)** | Customize MFE interfaces via the [frontend-base](https://github.com/openedx/frontend-base) Apps model | [tutor-mfe Frontend-base site](https://github.com/overhangio/tutor-mfe#frontend-base-site) | [`frontend-app-sample/`](./frontend-app-sample/) | UI customization on the bundled frontend-base site |
 | **Brand Packages** | Customize theming | [Open edX Brand Package Interface](https://github.com/openedx/brand-openedx) | [`brand-sample/`](./brand-sample/) | UI theming |
 | **Tutor Plugin** | Deploy plugins easily | [Tutor Plugin Development](https://docs.tutor.edly.io/) | [`tutor-contrib-sample/`](./tutor-contrib-sample/) | Simplified deployment and configuration |
 
@@ -49,14 +50,26 @@ This sample plugin showcases the **Open edX Hooks Extension Framework**, which a
 tutor mounts add "$PWD/backend-plugin-sample"
 
 # Rebuild image, run migrations, reboot containers:
-tutor dev launch  
-
-# Frontend Plugin Setup (for learner-dashboard MFE development)
-# Add env.config.jsx and module.config.js (see frontend-plugin-sample/README.md)
-# Then, install and run.
+tutor dev launch
+
+# Frontend setup. The tutor-contrib-sample plugin registers both frontend
+# siblings.
+#
+# Legacy FPF: set up env.config.jsx and module.config.js,
+# then install and run the learner-dashboard MFE (see
+# frontend-plugin-sample/README.md for details).
 cd path/to/frontend-app-learner-dashboard && npm ci && npm run dev
+#
+# Frontend-base: flip apps["learner-dashboard"]["enabled"] = True
+# in your own Tutor plugin, set up a fork of frontend-template-site
+# with frontend-app-sample in packages/ (see frontend-app-sample/README.md
+# for details), then:
+cd path/to/frontend-site && npm i && npm run dev:packages
 ```
 
+> [!NOTE]
+> This carries both the legacy `frontend-plugin-sample/` (frontend-plugin-framework) and a `frontend-app-sample/` sibling that targets tutor-mfe's [frontend-base site](https://github.com/overhangio/tutor-mfe#frontend-base-site). The Tutor plugin in `tutor-contrib-sample/` registers both. For the conceptual differences between the two stacks, see [Port a Frontend Plugin from frontend-plugin-framework to frontend-base](https://docs.openedx.org/en/latest/site_ops/how-tos/port-frontend-plugin-to-frontend-base.html).
+
 ### Option 2: Development without Tutor
 
 ```bash
@@ -91,7 +104,8 @@ Use the table above to identify which type of plugin matches your needs. You can
 - **Backend**: Start with [`backend-plugin-sample/openedx_plugin_sample/apps.py`](./backend-plugin-sample/openedx_plugin_sample/apps.py) to understand plugin registration
 - **Events**: Examine [`backend-plugin-sample/openedx_plugin_sample/signals.py`](./backend-plugin-sample/openedx_plugin_sample/signals.py) for event handling patterns
 - **Filters**: Review [`backend-plugin-sample/openedx_plugin_sample/pipeline.py`](./backend-plugin-sample/openedx_plugin_sample/pipeline.py) for behavior modification
-- **Frontend**: Explore [`frontend-plugin-sample/src/plugin.jsx`](./frontend-plugin-sample/src/plugin.jsx) for UI customization
+- **Frontend (FPF)**: Explore [`frontend-plugin-sample/src/plugin.jsx`](./frontend-plugin-sample/src/plugin.jsx) for the legacy React component plugged into `env.config.jsx`
+- **Frontend (frontend-base)**: Explore [`frontend-app-sample/src/app.tsx`](./frontend-app-sample/src/app.tsx) for the App declaration and [`frontend-app-sample/src/CourseList.tsx`](./frontend-app-sample/src/CourseList.tsx) for the React component
 
 ### 4. Run This Sample
 Follow the [Quick Start Guide](#quick-start-guide) to see everything working together.
@@ -115,15 +129,22 @@ sample-plugin/
 │   │   ├── settings/                  # Plugin settings configuration
 │   │   └── urls.py                    # URL routing
 │   └── tests/                         # Comprehensive test examples
-├── frontend-plugin-sample/
-│   ├── README.md                      # Frontend plugin detailed guide
+├── frontend-plugin-sample/             # Legacy FPF version (env.config.jsx)
+│   ├── README.md
+│   ├── src/
+│   │   ├── plugin.jsx                 # React component for the FPF slot
+│   │   └── index.jsx                  # Named exports
+│   └── package.json
+├── frontend-app-sample/                # frontend-base version (site config; TypeScript)
+│   ├── README.md
 │   ├── src/
-│   │   ├── plugin.jsx                 # React component for MFE slot
-│   │   └── index.jsx                  # Export configuration
-│   └── package.json                   # NPM package configuration
-└── tutor-contrib-sample/
+│   │   ├── CourseList.tsx             # React component
+│   │   ├── app.tsx                    # frontend-base App with slot operations
+│   │   └── index.ts                   # Default-exports the App
+│   └── package.json
+└── tutor-contrib-sample/               # Registers both siblings; each self-no-ops when inactive
     ├── README.md                      # Tutor deployment guide
-    └── sample.py               # Tutor plugin configuration
+    └── tutorsample/plugin.py          # Tutor plugin configuration
 ```
 
 ## Development Workflows

frontend-app-sample/.gitignore

@@ -0,0 +1,199 @@
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+cover/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+.pybuilder/
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+#   For a library or package, you might want to ignore these files since the code is
+#   intended to run in multiple environments; otherwise, check them in:
+# .python-version
+
+# pipenv
+#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+#   However, in case of collaboration, if having platform-specific dependencies or dependencies
+#   having no cross-platform support, pipenv may install dependencies that don't work, or not
+#   install all needed dependencies.
+#Pipfile.lock
+
+# UV
+#   Similar to Pipfile.lock, it is generally recommended to include uv.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#uv.lock
+
+# poetry
+#   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
+#poetry.lock
+
+# pdm
+#   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
+#pdm.lock
+#   pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
+#   in version control.
+#   https://pdm.fming.dev/latest/usage/project/#working-with-version-control
+.pdm.toml
+.pdm-python
+.pdm-build/
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# pytype static type analyzer
+.pytype/
+
+# Cython debug symbols
+cython_debug/
+
+# PyCharm
+#  JetBrains specific template is maintained in a separate JetBrains.gitignore that can
+#  be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
+#  and can be added to the global gitignore or merged into this file.  For a more nuclear
+#  option (not recommended) you can uncomment the following to ignore the entire idea folder.
+#.idea/
+
+# Ruff stuff:
+.ruff_cache/
+
+# PyPI configuration file
+.pypirc
+
+# JS Git Ignore
+.DS_Store
+.eslintcache
+.idea
+*.swp
+*.swo
+node_modules
+npm-debug.log
+coverage
+env.config.*
+
+dist/
+logs
+
+### Editors ###
+*~
+/temp
+/.vscode
+
+# Local package dependencies
+module.config.js
+
+# Local environment overrides
+.env.private

frontend-app-sample/.nvmrc

@@ -0,0 +1 @@
+24