Dev environment setup frustration
Hi all,
I have been trying to setup a development environment for H5P content the recent two weekends I am frustated with the result.
I startet out with a, granted a few years old, youtube video of the h5p.org channel, using the h5p cli server option. After spending some time setting that up, while reading the documentation about setting up a development environment and reading some forums posts I found out that the server has not been maintained for a while and will produce error messages.
My second approach was the Docker container provided recently by serettig. After setting up the develpment path and starting the container I used again h5p cli to get the h5p-drag-text library only to figure out after a while, that the h5p cli has also not been maintained and will not download all necessary dependancies. So ended up cloning the missing library with the git command, however, now not all path are matching when looking in the drupal log I am getting error messages like:
page not found: sites/default/files/h5p/development/h5p-drag-text/dist/h5p-drag-text.css
The problem seems to be the dist folder, which was not created with the h5p get h5p-drag-text command.
Can anybody point me to a description, how to setup up the environment in a quick and correct way?
Thanks for your help.
Regards,
Günter
otacke
Sun, 01/26/2020 - 20:33
Permalink
Hi Günter!The h5p-cli-tool is
Hi Günter!
The h5p-cli-tool is virtually just a bunch of scripts (on top of git) that can make some steps more convenient, but it's not really a requirement. For example, I just use it for handling translation files and packaging libraries.
So, what does git do? It pulls the source files from github (as it's mostly used by developers), not distribution files required to run. It works with some older content types, but most of them use a build chain nowadays, e.g. for using Babel to transpile code (a kneefall to IE11 for still not being dead, essentially), to bundle files, to minify code etc. That's what webpack/node.js is used for.
So, you will first have to use npm to get the modules required for building:
You can then run
which will continuously build the distribution files in the background. It's great to always have a built version in your dev directory ready to test while you're coding.
When you think you're done, use
to build files for production.
Best,
Oliver
gutleut
Sat, 02/01/2020 - 16:42
Permalink
Thanks Oliver. I have some
Thanks Oliver. I have some experience in software development, however, node.js is still something new to me.
If I understand that correct, I have to use git clone to get the h5p library I want to use. Then run npm install inside the library to get all the node.js dependencies. Finally run npm run watch to get the development files. I would clone the repository direct to the drupal development folder?
When I understand it right, the npm install will only get node.js dependencies. However, for the h5p-drag-text library I need also other h5p libraries. How do I know, which libraries are a dependencies to a h5p library? I looked into the h5p cli script and found the file it downloads and uses to know the dependencies. However, my understanding is, that this file is outdated. Is the error message from drupal the only way to find out the dependencies?
Thanks for your help.
Günter
otacke
Mon, 02/03/2020 - 08:17
Permalink
Hi Günter!The core of H5P
Hi Günter!
The core of H5P first tries to find the libraries inside the development folder, then in the regular library folder. So, if you have installed the current version of a content type, you should be good to go in most cases.
If you're working on the master branch that might be ahead of the release and it require newer libraries, H5P should complain you can look up dependencies inside the library.json file and clone the appropriate repository as well.
You may find more relevant information inside the. h5p specification at https://h5p.org/documentation/developers/h5p-specification
Cheers,
Oliver