Apache iFrame Site on Docker

-

Introduction

Running a multi-page static website inside Docker is a clean way to keep your development environment consistent, portable, and easy to share. In this article, we walk through how to build and serve an Apache-powered site that displays four distinct HTML pages inside expandable iframe sections - all containerised with Docker.

Source code: https://github.com/j19349081-del/c/tree/apache

What We Built

The project lives on the apache branch and delivers a single-page expandable view powered by native HTML <details> and <summary> elements. Each section embeds a page via an iframe, and only the first section is expanded by default.

  • Page 1 - Content index linking to the sections below.
  • Page 2 - Team delivery snapshot with a bar chart and sprint priorities.
  • Page 3 - Editorial notes with a donut chart and long-form text.
  • Page 4 - Programme roadmap with milestones, a radar chart, and a quarterly status table.

Project Structure

The site follows a clean separation of concerns across three asset folders:

  • site/css/ - Shared and page-specific stylesheets.
  • site/js/ - The accordion and iframe resize logic, plus per-page data renderers.
  • site/data/ - One JSON file per page. All page content is data-driven; the HTML shells contain no hardcoded content.

How the iFrame Accordion Works

Each page is wrapped in a <details> element with a styled <summary> acting as the clickable header. The JavaScript in js/index.js enforces a single-open rule - only one section can be expanded at a time. It also auto-sizes each iframe to match its content height using ResizeObserver and a warmup resize sequence, preventing any content from being cut off or showing internal scrollbars.

Clicking a link in the Page 1 content index navigates directly to the relevant section using URL hashes (e.g. /#page-3), which the script intercepts to open the correct section and scroll to it.

Running It in Docker

The entire site runs behind Apache HTTP Server 2.4 on Alpine Linux, kept lightweight at under 10 MB. To run it locally:

cd apache-docker-site
docker compose up --build -d

The site is then available at http://localhost:8088.

To stop and clean up:

docker compose down --volumes --remove-orphans

Data-Driven Pages

Each page renderer fetches its own JSON file at runtime using the Fetch API. This means you can update page content by editing a single JSON file without touching any HTML or JavaScript. For example, to change the roadmap milestones on Page 4, edit site/data/page4.json and rebuild the Docker image.

Conclusion

This project demonstrates how to combine Apache on Docker with a clean JavaScript-driven accordion UI and data-separated content architecture. It is a solid foundation for serving lightweight internal dashboards, demo sites, or documentation portals - all from a single Docker container with minimal setup.

Browse the full source on GitHub: github.com/j19349081-del/c/tree/apache