Moodle is an open-source Learning Management System built on the principle of modularity. It contains all of the basic structures and features geared toward teaching and learning, however it also contains a long list of libraries/APIs that are useful and relevant to application development in general, such as database abstraction and migration, authentication methods, access control via capabilities, web services, search, job scheduling, caching, messaging, internationalization, file management, logging, debugging, and fundamentally, a plugin architecture with events for inter-plugin communication.

Having developed a number of Moodle plugins for educational institutions, I have found Moodle to be a mature and convenient platform that provides many of the foundational elements needed to develop, run, and manage applications. It occurred to me recently that the standard interface and many of the core features could be divorced from the whole, creating a more generic and headless framework for building applications. This may appeal to institutions that are already familiar with Moodle and anyone who wants to avoid the complex tooling and integration that is often required to establish the same baseline in other backend frameworks.

The plugin architecture of Moodle would be used as the way to add separate systems to the platform without affecting the normal Moodle upgrade path. The normal Moodle interface could be completely averted, allowing you to build systems on top of Moodle using a frontend framework of your choosing, such as Vue or React, which would interact with the platform via web services.

The initial idea:

  • Install Moodle, disable plugins you don’t need.
  • Create a new local plugin to bootstrap the new front-end layer and provide a web service gateway. The purpose of this plugin is to redirect users away from the Moodle interface once they’ve authenticated (using one of Moodle’s auth methods) to one of your custom applications (e.g. a custom dashboard).

The repo:

https://github.com/michaelvangelovski/edutools

Introduction

A collection of modular tools or microsystems for schools built on Moodle as a headless backend.

  • /platform: Bootstraps the microsystem platform and provides core services for other tools
  • /example: An example of a tool
  • /dashboard: The landing page for the platform – just another tool
  • /excursions: The first real world tool and PoC for the platform. Uses Vite, React, Mantine, and TailwindCSS.
Structure

Each tool has the standard local plugin files needed by Moodle. The tool is then divided into:

  • Frontend: the UI layer of the tool, using React for example.
  • Backend: the API layer for the tool
Installation
Pre-requisites
Installation steps
  • cd <moodle_root_dir>/local/
  • rm -rf * #Remove all existing contents from local dir
  • git clone git@github.com:michaelvangelovski/edutools.git .
  • Run the installation of the plugins via the browser.
  • Open <moodle_root_dir>/config.php and add the following line to the bottom:
    • require_once(__DIR__. '/local/platform/setup.php');
Access the example tool
  • Access the example tool: <site_url>/local/example
Development
  • cd local/example/frontend/
  • npm install # this will install all of the front end dependencies
  • npm run dev # this command starts the development server
  • Access the example tool again, dev scripts will be loaded, and live reload will be working: <site_url>/local/example
  • npm run build # this will build the frontend for production into /dist