Development environment in a VirtualBox VM
This article provides detailed instructions for setting up a development environment for H5P Content Types by using VirtualBox and a Virtual Machine running Ubuntu. We will create a brand new VM and install Ubuntu 18.04, and then add Apache, MySQL, PHP and finally Drupal 7 with the H5P plugin. We'll also see how we can configure port forwarding and shared folders so that we can use our favorite editor and browser straight from our primary (host) environment.
You should be able to follow these instructions on any system that can run VirtualBox.
Download and install VirtualBox
Download the latest version of VirtualBox from the official website: https://www.virtualbox.org. There are installation instructions for all supported OSes.
Download the desktop image for Ubuntu 18.04 LTS from http://releases.ubuntu.com/18.04
The reason for using Ubuntu 18.04 even after 20.04 is already out is due to Drupal 7 and compatibility concerns with the default packages (mysql-server). You are of course free to choose the server image instead, but the article will assume you have a desktop environment.
Create a new VM. Default settings are mostly fine, but you might want to increase the disk size to something more than the default 10GB. Everything else can easily be modified after. Start the VM and then mount the installation image for Ubuntu you just downloaded in the previous step. Install Ubuntu and reboot as necessary.
I believe the VirtualBox GUI is so simple that even if you haven't used it before you can probably figure out what to do. You can learn all there is to know (and more) about creating VMs in VirtualBox from the official documentation: https://www.virtualbox.org/manual/ch01.html#gui-createvm
Upon successful installation, a reboot and logging back in, make sure the system is up-to-date by executing the following commands in a terminal:
sudo apt update sudo apt upgrade
At this point we are ready to install all the software we need.
sudo apt install apache2
sudo apt install mysql-server
I recommend executing
mysql_secure_installationafter installing which will guide you through changing some defaults that will dramatically improve the security of your database installation. This is entirely optional, but I really think you should have a good reason for NOT doing it.
Connect to the MySQL server
and create a new database and a new user (this is needed later when we install Drupal). You are free to come up with a more secure password than 'password' (and you might even be forced to if you did the mysql_secure_installation procedure and activated password validation).
create database drupal character set utf8mb4 collate utf8mb4_general_ci; create user drupal@localhost identified by 'password'; grant all on drupal.* to drupal@localhost;
Disconnect from the database by sending EOF (Ctrl+D) or by typing exit or quit.
Verify that you can connect with the user you just created by executing
mysql -u drupal -pand then type the password when prompted. If you're able to connect and execute
show tables;you should see the drupal database.
Install PHP and a set of extensions that Drupal 7 expects
sudo apt install php php-mysql php-gd php-mbstring php-xml php-zip
You can confirm that php has been installed by running
php -v. You should see version 7.2.*
We need to increase some size limits in Apache's default php.ini. We do this by editing the
/etc/php/7.2/apache/php.ini file and changing the following two values to 128M.
upload_max_filesize = 128M
post_max_size = 128M
We've installed new apache modules (automatically added as part of installing php) and also changed Apache's php configuration, so we must restart Apache for these changes to take effect
sudo service apache2 restart
We are simply going to use the default site already preconfigured with Apache, so we download Drupal and extract to
Find the latest version of Drupal 7 by visiting this page: https://www.drupal.org/project/drupal/releases?version=7 and modify the commands below accordingly.
cd /var/www/html sudo rm index.html sudo apt install wget sudo wget https://ftp.drupal.org/files/projects/drupal-7.71.tar.gz sudo tar -xvzf drupal-7.71.tar.gz sudo mv drupal-7.71/* drupal-7.71/.htaccess drupal-7.71/.gitignore ./ sudo cp /var/www/html/sites/default/default.settings.php /var/www/html/sites/default/settings.php sudo rm drupal-7.71.tar.gz
We now need to grant the www-data user ownership of the folder structure so that it can read and modify content as needed.
sudo chown -R www-data ./
VirtualBox Machine port forwarding
Before proceeding, we will configure port forwarding so that we can access the Drupal site straight from our host OS. With the guest VM window active, press right ctrl + s to open machine settings. Open the Network tab, expand Advanced and click Port forwarding.
Create a new rule to forward host port 8888 to guest port 80. This means that traffic sent to port 8888 on your host machine will be forwarded to the guest. These port forwarding settings of the VirtualBox VM can be changed at any time, while running.
The drupal site is now available at http://localhost:8888 on your host machine. You can still access it at port 80 from within your guest VM, if you need to.
We can now visit our Drupal site and perform the installation right from the browser. The installation wizard is self-explanatory. If we did everything right up until now this should be a quick process. If something went wrong, double check that you followed all the steps.
Find the URL to the most recent H5P plugin at the bottom of the following page: https://www.drupal.org/project/h5p and copy it to your clipboard.
As of June 17 2020 the latest module can be found at https://ftp.drupal.org/files/projects/h5p-7.x-1.46.tar.gz
The module can be installed through the Drupal admin interface by navigating to Modules > Install new module
Provide the URL to the module and install. If your network configuration prevents this, you have the option of uploading the file manually.
Upon successful installation, follow the link to be taken directly to modules page to enable it. You'll find it at the bottom. Enable both H5P and H5P Editor and save.
Navigate to Configuration > H5P to enable development mode as well as the development folder.
We have to install VirtualBox Guest Additions in order to use the Shared Folders feature. For this we must first install some packages to enable building external kernel modules.
sudo apt update sudo apt install build-essential dkms linux-headers-$(uname -r)
With that done, we insert the Guest Additions media from the Devices menu on the toolbar of the VirtualBox window of our guest and then run it.
If you're using Ubuntu Server instead of Desktop, see the following article for instructions on how to mount: https://linuxize.com/post/how-to-install-virtualbox-guest-additions-in-ubuntu/
Open the VM settings again by pressing right ctrl + s, and then open the Shared Folders tab.
Locate an existing folder on your host OS that you want to share with the VM. The mount point is the path within the VM where this folder will be made available. We want to make this permanent.
After doing this, we must grant our self and www-data permission to the folder within the VM, and we do this by adding both to the vboxsf group.
sudo adduser $USER vboxsf sudo adduser www-data vboxsf
And finally, we need to log out and back in to access the folder.
We are almost ready to start coding, I promise. Let's just create a working directory for our content type.
We'll get a head start on the H5P Hello World tutorial by creating the folder itself and then creating a symbolic link to it in the h5p development folder of our drupal site.
cd /mnt/h5pdev2 && mkdir h5p-greeting-card cd /var/www/html/sites/default/files/h5p/development sudo ln -s /mnt/h5pdev2/h5p-greeting-card ./h5p-greeting-card
That's it! Now we can just leave our VM running and use our host OS to edit the project files in the folder we shared.