One codebase, two outputs: a zero-dependency static site and an Android app for Quran audio
I built a Quran audio project where the same JavaScript generates both a static website and an Android app, with no runtime dependencies in the generator. Here is how it is structured and what I would do again. The result is called Suwar : one page per surah, in Arabic and English. The constraint I wanted every one of the 114 surahs to have its own indexable page, in two languages, plus a mobile…
A single codebase is responsible for producing both a static website and an Android application for Quran audio, without any runtime dependencies in the generator. The project, called Suwar, presents each of the 114 surahs in both Arabic and English on individual, indexable pages. This totals 228 web pages. Simultaneously, the application reuses the same interface, creating an Android experience.
Before any generation takes place, a fetch script pulls the Quran text once and verifies its integrity by ensuring there are 114 surahs and 6,236 verses. If the counts are incorrect, the build immediately stops. The generator relies solely on plain Node.js, with no dependencies needed. It creates one HTML file for each surah in each language, along with a sitemap, hreflang alternates, JSON-LD, and an llms.txt file.
An Android app is generated using Capacitor, which wraps the identical user interface as an Android project. The app incorporates a fully functional audio player with features such as repeat, speed control, a sleep timer, and a resume function. To ensure the generator is tested efficiently, it is checked using Node and a headless Chromium, eliminating the need for an Android SDK.
Upon reflection, two key takeaways emerge. First, validating data before generating content is crucial; a wrong verse count will fail the build rather than result in the shipping of faulty pages. Second, maintaining a dependency-free generator allows the tool to run anywhere Node.js is available, which was particularly advantageous for the developer, as they primarily work on a machine where package installations may not always be possible.
Both the UI for the web and app are unified, ensuring that fixes are applied once. Attribution and licensing are important considerations; the text originates from Tanzil under the CC BY 3.0 license, which requires proper credit and prohibits modification. Additionally, audio rights are distinct from text rights, with each reciter assigned a licensed flag, allowing for the simultaneous removal of any of them.
Revenue generation is managed through ads, with a small banner displayed on regular screens and an optional rewarded ad, but no ads are shown during playback. For those tasked with building content sites that feature many near-identical pages, adopting the validate-then-generate pattern could prove beneficial.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
