H5P Guides

Development environment

H5P development does not require any specific development environment. All you need is a framework installed with H5P support and a code editor of choice. The Drupal integration framework, however, includes two special development modes to make development a bit easier.

This guide will teach you about:

  • Recommended development setup
  • The normal development cycle for H5P content and libraries

If you want to run your development environment in a VirtualBox VM, you should have a look here.

Recommended development setup

This setup must not be done on a production site. It must be done on a site that is dedicated to developing H5P libraries.

  1. Use Drupal 7 with the H5P module - we will add development mode and folder to Wordpress and other platforms as well, but currently they're only available for Drupal
  2. Go to the H5P settings page and enable "H5P development mode" and "H5P development directory"
  3. In your file folder go to sites/default/files/h5p/development and place the libraries you want to develop in this folder. So for instance if you want to work on interactive video you'll have interactive video's library.json in sites/default/files/h5p/development/h5p-interactive-video/library.json.

The semantics and library.json files from these folders will now be read on every request, and the js, CSS and other files will also be read on every request. .There are some cases where development mode fails to clear drupal's cache. We will fix this, but if you find that your updates haven't taken effect clear Drupal's cache.

Working with existing libraries

If you're going to work with existing libraries you should install the H5P CLI like this:

  1. Download nodejs
  2. Make sure npm is working
  3. Install H5P npm by using the following command:
    npm -g install h5p

For a list of all command and a tutorial on using the H5P CLI head over to the Command Line Interface guide.

The latest stable version of the libraries is found in the stable branch. The latest "stable" development version is in the master branch, and ongoing work are in feature branches.

Manual development cycle

  1. Create working directories.
  2. Copy/link existing libs.
  3. Write/modify library code, remember to update patchVersion.
  4. Write/modify package content.json and other content files.
  5. Create package H5P file.
  6. Upload to the web.
  7. Repeat from 3.

H5P command line interface

To make it easier to work with multiple repositories we've created the H5P CLI: