This repository illustrates how to use the the packages of h5p-nodejs-library in a Single Page Application with a REST backend in TypeScript.
Naturally the application is separated into a client, which uses React as a
framework. The server implements the @lumieducation/h5p-server
using
Express. You are not bound to using React or Express in your own application, as
@lumieducation/h5p-server
is framework agnostic.
Check out the architecture overview that describes which parts of the application are provided by which package:
h5p-nodejs-library
. While @lumieducation/h5p-server
is also a dev dependency of the client, this is only the case to use the TypeScript interface definitions exported by it. The dependency (which can be rather large) is only required at build time and not at runtime.@lumieducation/h5p-react
. The React components wrap around the web components from @lumieducation/h5p-webcomponents
, which in turn wrap the actual core h5p player and editor JavaScript and simplify instantiation, loading, saving and event handling.download-core.sh
. They must be served as static files by the server and are added to the page by the web components as needed.npm install
in the root. This will install all dependencies of the example packages and internally link the packages inside the monorepo.npm start
for the server. (Must be up and running before you start the client!)npm start
for the client (the server must still be running).The client was bootstrapped with Create React App. For more information see its documentation page.
This work obtained financial support for development from the German BMBF-sponsored research project "lea.online -" (FKN: 41200147).
Read more about them at the following websites: