Easy Steps For Adding HTML5 Modules Manually To An Internet-In-A-Box Server [Latest 2022]

Promoting teaching and learning in fragile environments has been the vision of many education technologies companies, nongovernmental organizations, and governments all around the globe. One way of realizing this has been through content distribution systems that could operate in offline and off-grid environments. Several hardware and software solutions have been developed by different entities. I have interacted with several and currently I am customizing the internet-in-a-box (IIAB) platform hosted in a Linux Mint 20.3 Xfce Edition mini PC. Most of the learning content that I have developed, collated, and curated is in HTML5 format that needs some work to display in the IIAB platform. Through research and many trials, I have streamlined the process of doing this in eight easy steps. It may be a little technical for non-Linux users, but once you get the hang of it, it will be very easy from then onward.

Perquisites

Before following through the steps below, you should:

Have a suitable hardware device. This could be Raspberry Pi 4, Intel NUC, other mini PC competitors, ARM mini PCs, or a standard laptop/desktop computer with Intel Wi-Fi adapters.
Install a compatible operating system. These include 32-bit Raspberry Pi OS, Ubuntu 21.04 (Hirsute Hippo; caution: not LTS!), Ubuntu 20.04 LTS (security updates until April 2025, end-of-life ~2030), Debian 11 “Bullseye” (security updates until June 2026?; experimental pre-releases!), or Linux Mint 20 (security updates until April 2025).
Internet-in-a-box installed.
PuTTY SSH client and FileZilla FTP client installed in a separate computer.

8 Easy Steps For Adding HTML5 Modules To Internet-In-A-Box Servers

Step 1: Prepare Your Module

Get your module files ready in your computer (for example: en-wL_iLearnabout). A file named index.html is required in the root directory. If this is not available, duplicate the php file responsible for loading the homepage and rename it to index.html and remove all php code from it.

Step 2: Update Directory Permissions

Ensure the IIAB server is on and you can access it via a browser. Login into the IIAB server using the PuTTY SSH client, using an admin account. Update the directory permission to 777 for full access (read, write, and execute) by everyone as per the commands below:

sudo chmod 777 /library/www/html/modules/
sudo chmod 777 /library/www/html/home/
sudo chmod 777 /library/www/html/js-menu/menu-files/menu-defs/
sudo chmod 777 /library/www/html/js-menu/menu-files/images/

Step 3: Upload Module

Login into the IIAB server using the FileZilla FTP client, using an admin account. These are the credentials of the IIAB server. Upload the module into the modules directory.

Step 4: Create A Menu Entry

Create a backup of the menu.json file (in /library/www/html/home/). Before making changes by duplicating and renaming it, create a menu entry of the module in menu.json. To do this, download menu.json into your computer, and enter the menu entry (e.g., en-wL_iLearnabout) following json format. Delete menu.json in the IIAB server, and then re-upload the edited copy.

Step 5: Add Module-Name.json File

Navigate into /library/www/html/js-menu/menu-files/menu-defs/ and upload a json file named as your module (e.g., en-wL_iLearnabout). The module-name.json file follows these rules:

“menu_item_name” : // Optional, and can be used to document the file, but is no longer required.
“moddir” : “”, // For html modules this is the directory under /module.
“start_url” : // This is the optional suffix to base href without leading slash.
“zim_name”: “”, // This is the generic zim name without YYYY-MM version suffix.
“title”: “”, // Localized title for link.
“description”:””, // Expanded text for link.
“extra_html”:”.html”, // Optional free form html for submenu or other use.
“apk_file”:”” // Optional.
Be careful of embedded quotes, brackets, or other characters that will break json.

Tip:
Duplicate another json file, rename it, and update its contents accordingly.

Step 6: Upload Module Image

Navigate into /library/www/html/js-menu/menu-files/images/. Upload the module image named as per the entry in the json file (i.e., en-wL_iLearnabout.png).