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
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.
- 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
- Go to the H5P settings page and enable "H5P development mode" and "H5P development directory"
- 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:
- Download nodejs
- Make sure npm is working
- 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
- Create working directories.
- Copy/link existing libs.
- Write/modify library code, remember to update patchVersion.
- Write/modify package content.json and other content files.
- Create package H5P file.
- Upload to the web.
- Repeat from 3.
H5P command line interface
To make it easier to work with multiple repositories we've created the H5P CLI:
Tue, 04/04/2017 - 21:33
No such file or directory
I'm getting No such file or directory when developing locally in drupal.
When I add the my libary to sites/default/files/h5p/development/h5p-mylibrary I get initialization errors becasue the machine name and folder names don't match. Shouldn't it work with proper H5P.MyLibrary naming convention? Am i missing something?
The library i'm working on requires a few libraries.
Do I add libraries before or after?
Do I put them in sites/default/files/h5p/development?
Wed, 04/05/2017 - 10:25
It seems like the plugin is
It seems like the plugin is looking for your library in the libraries folder instead of in the development folder, so something must be wrong with the library you're using or the library.json of your development folder library.
Make sure you have added your library to development folder and enabed the development folder option in settings, what does your library.json look like ? Then make sure you select the correct library from the drop-down, it should have the same title as you have specified in library.json.
You do not have to put the dependencies inside the development folder if you already have them installed in your libraries folder. However they must be part of the preloadedDependencies property of the library.json specification in h5p-mylibrary in your development folder.
Thu, 04/06/2017 - 02:05
Here is what i got
In my development folder, I have the folder h5p-mylib with the file library.json. The machineName is H5P.MyLib and title MyLib. When I select it in the Content type dropdown. Loading, please wait... appears continuously and the browser has a 404 error for /h5peditor/9701e74206b40/0/libraries/H5P.MyLib/1/0 - No such file or directory.
based on my looking the code base, the machine name and the folder need to match. This shouldn't be the case since its ment to be written like H5P.Mylib and the scripts would have to be rewritten.
Thu, 04/06/2017 - 10:04
Uninstall H5P.MyLib from your
Uninstall H5P.MyLib from your libraries, so that it only exist in your development folder and make sure you have enabled "
The folder name in your development directory should not matter, development mode scans all directories in the development folder and adds them. However there could be some conflict since you have the library both installed and in development folder, if your installed library has a higher version number than the development folder library that will be used. So make sure that the installed version of MyLib is removed first.
Fri, 04/07/2017 - 00:27
I've done all that. MyLib is
I've done all that. MyLib is in the development folder. I only have one version that is in the development folder called H5P.MyLib. It still doesn't work.
Fri, 04/07/2017 - 09:22
Good, can you check your
Good, can you check your server error log ? Your setup seems to be correct, so perhaps your server is having trouble fetching the data.
Sat, 04/08/2017 - 00:58
I was able to get it working.
I was able to get it working. I'm using the php dev server, using the .ht.router.php router fixed it.
Mon, 04/10/2017 - 09:42
Glad to hear it worked out
Glad to hear it worked out
Sat, 11/25/2017 - 23:42
development mode in Drupal 8?
Will this be available any time soon?
Mon, 11/27/2017 - 16:13
Hi,Setting "dev_mode" to true
Setting "dev_mode" to true in drupal config (e.g. through Drupal CLI) will allow you to overwrite libraries with the same patch version when you upload them, this is the standard development mode for the platform integrations and this is already supported.
If you mean the development folder, then that is not supported in any other integrations than Drupal 7, I can't give you any timeline for when this will be prioritized since it is not currently much used.
Tue, 11/28/2017 - 14:28
OK, I'll continue to use
OK, I'll continue to use drupal 7 for my H5P dev, then, no problem!
Mon, 09/09/2019 - 19:01
Details on manual development lifecycle
Is there any documentation that provides more details on the "manual development lifecycle"?
Right now I have H5P installed on Wordpress, but with library translations in the editor and in the hub not quite working (specifically, for Brazilian Portuguese). In investigating why translations don't seem to work, I would like to tinker with library code, H5P code (plugin as well as core), and translation files, yet upon making changes I've only been able to see effects from changes in some of the Wordpress plugin's PHP code.
In the "manual development lifecycle" part of this page, step 3 mentions the need to "remember to update patchVersion", not going much further into details. Is this as simple, in Wordpress, as increasing the patch numbers in the library.json file for each "unit" of tinkering I make? Is there any command I should do to make H5P recognize the version change?
I have seen mention of a developer mode in Drupal. However, is it at all possible to avoid having to deal with setting up Drupal just to make a few changes in code? Since I am just attempting to set up translations in Wordpress, there's a good chance that what needs to be changed isn't even accessible in Drupal.