Internet-In-A-Box Server: Add HTML5 Modules

Internet-In-A-Box Server: Add HTML5 Modules

Using PuTTY and FileZilla software for e-learning

Promoting teaching and learning in vulnerable environments is the vision of many educational technology companies, non-governmental organizations and governments around the world. One way to achieve this is through content distribution systems that can operate in offline and off-grid environments. There are various hardware and software solutions developed by different entities. I’ve been in touch with several and currently I’m adapting the Internet-in-a-box (IIAB) platform hosted on a Linux Mint 20.3 Xfce Edition mini PC. Most of the learning content I’ve developed, collected, and compiled is in HTML5 format, which requires some work to display on the IIAB platform. Through research and many trials, I’ve streamlined the process of doing this into eight easy steps. It might be a bit technical for non-Linux users, but once you get the hang of it, it will be very easy from then on.

Advantages

Before following the steps below, you must:

  1. Get 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.
  2. Install a compatible operating system. These include 32-bit Raspberry Pi OS, Ubuntu 21.04 (Hirsute Hippo; note: 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).
  3. Internet-in-a-box installed.
  4. PuTTY SSH client and FileZilla FTP client installed on a separate computer.

8 Easy Steps for Adding HTML5 Modules to Internet-In-A-Box Servers

Step 1: Prepare your module

Prepare your module files on your computer (for example: en-wL_iLearnabout). A file called index.html is required in the root directory. If not available then 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 Folder Permissions

Make sure the IIAB server is enabled and that you can access it through a browser. Log in to the IIAB server using the PuTTY SSH client, with an administrator account. Update the directory permission to 777 for full access (read, write, and execute) by anyone using 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

Log in to the IIAB server using the FileZilla FTP client, using an administrator account. These are the login details of the IIAB server. Upload the module to the module folder.

Step 4: Create a menu item

Back up the menu.json file (located in /library/www/html/home/). Before making changes by duplicating and renaming it, create a menu item of the module in menu.json. To do this, download menu.json to your computer and enter the menu item (eg en-wL_iLearnabout) according to the json format. Delete menu.json on the IIAB server and upload the edited copy again.

Step 5: Add ModuleName.json File

Navigate to /library/www/html/js-menu/menu-files/menu-defs/ and upload a json file named as your module (eg 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 for base href without a leading slash.
  • “zim_name”: “”, // This is the generic zim name without YYYY-MM version suffix.
  • “title”: “”, // Localized title for link.
  • “description”:””, // Extended text for link.
  • “extra_html”:”.html”, // Optional free form html for submenu or other use.
  • “apk_file”:”// Optional.
  • Be careful of enclosed quotes, parentheses, or other characters that break json.

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

Step 6: Upload Module Image

Navigate to /library/www/html/js-menu/menu-files/images/. Upload the module image named according to the entry in the json file (ie en-wL_iLearnabout.png).

Step 7: Load the module in the browser

Refresh your IIAB homepage to see the new module.

Tip:
If it doesn’t show up, clear the browser cache. Press the keys [Ctrl], [Shift] and [Del].

Step 8: Update Folder Permissions

Change directory permissions via SSH to prevent unauthorized server changes according to the commands below:

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

Please get in touch Contact me in case you run into problems implementing these steps, or if you need some guidance.

References:

  • https://github.com/iiab/iiab/wiki/IIAB-Menuing
  • https://wiki.laptop.org/go/IIAB/FAQHow_do_I_customize_my_Internet-in-a-Box_home_page.3F