HTML & FrontEndLoader

Oidis applications use a backend resolver (FrontEndLoader) to dynamically generate the HTML shell in production. Static HTML files serve specific purposes in maintenance mode and development.

Two Categories of HTML Files

1. Static Pages (Maintenance, Fallback)

Self-contained HTML pages served during maintenance mode (HTTP 503) or as fallback:

source/html/Io/Oidis/[LibraryName]/
├── MaintenancePage.html     # Shown during maintenance (503)
├── DefaultPage.html         # Fallback page

These files use template variables resolved at build time:

<html>
<head>
    <title><? @var project.name ?></title>
    <link rel="stylesheet" href="maintenance_resource/style.css">
</head>
<body>
    <h1>Service Maintenance</h1>
    <p>Version <? @var project.version ?></p>
    <p>Copyright <? @var build.year ?> Oidis</p>
</body>
</html>

Each project can override these with own branding and language.

2. Dev-Mode index.html

An application shell for standalone library development and testing:

<html>
<head>
    <title>Dev Mode</title>
    <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    <div id="PageLoader">...</div>
    <div id="PageContentHolder"></div>
    <script type="module" src="loader.min.js"></script>
</body>
</html>

Not for production

The dev-mode index.html is only used for standalone library development. In production, FrontEndLoader generates the HTML dynamically.

FrontEndLoader (Production)

In production, the FrontEndLoader is a backend resolver (@Resolver("/")) that generates the complete HTML document dynamically.

Inheritance Chain

io-oidis-localhost FrontEndLoader
    ← io-oidis-hub FrontEndLoader (extends)
        ← your-project FrontEndLoader (extends)

Each layer adds elements to the generated HTML:

Localhost layer:

• Favicon, FontAwesome, Sentry integration
• Page title, nonce, noscript fallback
• PageLoader section (loading animation)
• Module script loader (loader.min.js)

Hub layer:

• Bootstrap and QRCode bundles
• Google Analytics (if configured)
• PWA manifest (if enabled)
• HTTP 503 response if Loader not ready

Project layer:

• Language setting: StaticPageContentManager.Language("cs")
• Override getLicense() — footer license text
• Override getNoScript() — noscript fallback content
• Override getPageLoader() — loading animation with project logo

StaticPageContentManager

The FrontEndLoader uses StaticPageContentManager (a singleton) to assemble the <head> and <body>:

@Resolver("/")
export class FrontEndLoader extends HubFrontEndLoader {

    public async resolver($instance : any) : Promise<void> {
        StaticPageContentManager.Language("cs");
        await super.resolver($instance);
    }

    protected getLicense() : string {
        return "Copyright 2026 Oidis. BSD-3-Clause.";
    }

    protected getPageLoader() : string {
        return `
            <div id="PageLoader" class="ProjectLoader">
                <img src="/graphics/logo.svg" alt="Loading..." />
                <div class="spinner"></div>
            </div>
        `;
    }
}

Template Variables in HTML

Both static pages and dev-mode HTML support template variables:

Variable	Syntax	Description
Build timestamp	<? @var build.timestamp ?>	When the build was created
Build year	<? @var build.year ?>	Current year at build time
Project version	<? @var project.version ?>	From package.conf.jsonp
Project name	<? @var project.name ?>	Package name
Package name	<? @var properties.packageName ?>	Full package identifier
Loader path	<? @var properties.loaderPath ?>	Path to the frontend loader

Import directive:

<!-- @import path/to/partial.html -->

Includes another HTML file at build time (processed by StringReplace).

Bootstrap Studio (.bsdesign)

UI panels can be designed in Bootstrap Studio:

source/html/Io/Oidis/[LibraryName]/Gui/Panels/
├── AllocationsPanel.bsdesign
├── UsersPanel.bsdesign

Workflow:

1. Design the layout in Bootstrap Studio
2. Export HTML
3. Paste into the Panel's innerHtml() method
4. Add data-oidis-bind attributes to connect components

Not every Panel has a .bsdesign file — some are written directly in innerHtml(). The .bsdesign files are excluded from copyright lint checks.

---

See also: Architecture Overview | ForceCompile | JSONP System