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.
Recommended development setup
The H5P toolkit is purposefully built to streamline the development experience. It automates setup of H5P core, content types and dependencies. Follow the instructions at the github repository to get started.
Working with libraries
When working with existing default libraries, they can be setup using the quick start guide.
When working with private libraries, creating new libraries or when having other customization needs, follow the setup instructions.
Alternative setups
While the H5P toolkit streamlines the development experience, you can use any environment that supports H5P. A few examples:
- Run any of our free, self-hosted integrations.
- In a virtual machine
- Containerized
Comments
koda
Tue, 04/04/2017 - 21:33
Permalink
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?
Thanks
thomasmars
Wed, 04/05/2017 - 10:25
Permalink
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.
- Thomas
koda
Thu, 04/06/2017 - 02:05
Permalink
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.
library.json
{ "machineName": "H5P.MyLib", "title": "MyLib", "description": "My library", "license": "MIT", "author": "Koda", "majorVersion": 1, "minorVersion": 0, "patchVersion": 0, "runnable": 1, "fullscreen": 0, "embedTypes": [ "div" ], "coreApi": { "majorVersion": 1, "minorVersion": 11 }, "preloadedJs": [ { "path": "scripts/track.js" }, { "path": "scripts/mylib.js" } ], "preloadedCss": [ { "path": "styles/mylib.css" } ], "preloadedDependencies": [ { "machineName": "FontAwesome", "majorVersion": 4, "minorVersion": 5 }, { "machineName": "H5P.JoubelUI", "majorVersion": 1, "minorVersion": 2 }, { "machineName": "H5P.Transition", "majorVersion": 1, "minorVersion": 0 }, { "machineName": "H5P.Question", "majorVersion": 1, "minorVersion": 2 } ], "editorDependencies": [ { "machineName": "H5PEditor.VerticalTabs", "majorVersion": 1, "minorVersion": 3 }, { "machineName": "H5PEditor.UrlField", "majorVersion": 1, "minorVersion": 2 } ] }thomasmars
Thu, 04/06/2017 - 10:04
Permalink
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.
koda
Fri, 04/07/2017 - 00:27
Permalink
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.
thomasmars
Fri, 04/07/2017 - 09:22
Permalink
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.
koda
Sat, 04/08/2017 - 00:58
Permalink
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.
https://github.com/skilld-labs/docker-php/blob/master/.ht.router.php
Thanks
thomasmars
Mon, 04/10/2017 - 09:42
Permalink
Glad to hear it worked out
Glad to hear it worked out
papi Jo
Sat, 11/25/2017 - 23:42
Permalink
development mode in Drupal 8?
Will this be available any time soon?
thomasmars
Mon, 11/27/2017 - 16:13
Permalink
Hi,Setting "dev_mode" to true
Hi,
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.
papi Jo
Tue, 11/28/2017 - 14:28
Permalink
OK, I'll continue to use
OK, I'll continue to use drupal 7 for my H5P dev, then, no problem!
lalilulelost
Mon, 09/09/2019 - 19:01
Permalink
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.