Setting Up A H5P Development Environment #
Let’s set up a H5P development environment using the h5p-cli.
Installing the h5p-cli
#
Uninstall any previous h5p-cli toolkit instance.
npm uninstall -g h5p-cli
npm uninstall -g h5p
Install it via npm
npm install -g h5p-cli
Let’s list all the utlity functions to see if it’s installed properly:
$ h5p utils help
Setting Up Our Working Directory #
Set up a directory you would like to work from:
$ mkdir h5p
$ cd h5p
Install the core H5P libraries.
~/h5p $ h5p core
Set up a simple library such as h5p-true-false
.
~/h5p $ h5p setup h5p-true-false
Let’s run the server to see if we can create the content type.
~/h5p $ h5p server
Navigate to http://localhost:8080/dashboard
to test creating the content type.
Our First Code Change #
Let’s try something simple just to see if the development envrionment works. Open the h5p-true-false
directory with a code editor of your choice:
cd ~/h5p/libraries
# Note that the version number might have changed
cd H5P.TrueFalse-1.8
vim H5P.TrueFalse-1.8
Let’s edit the /styles/h5p-true-false.css
file:
.h5p-true-false-answers {
background-color: orange;
margin: 1em 0 1em;
}
And we can check that it now shows:
That’s it! You’ve successfully edited your first content type.
Have a read through the official docs if you want to learn more about H5P development.
Need help with your H5P integtation or have any other questions?
Find me on LinkedIn.