HTML

Build HTML pages with automatic asset bundling. AbsoluteJS detects JS, TS, and CSS files, bundles them, and updates paths automatically.

Build Configuration

Add HTML to your build by specifying the directory containing your HTML files:

1const manifest = await build({
2  htmlDirectory: 'src/frontend'
3});
4
5// The manifest maps page names to their built HTML files
6// { "home": "/build/pages/home.html", "about": "/build/pages/about.html" }

Page Handler

Pass the path to the built HTML file to handleHTMLPageRequest:

1// backend/server.ts
2import { handleHTMLPageRequest } from '@absolutejs/absolute';
3
4new Elysia()
5  .get('/', () =>
6    handleHTMLPageRequest('./build/pages/home.html')
7  )
8  .get('/about', () =>
9    handleHTMLPageRequest('./build/pages/about.html')
10  )

How It Works

Write your HTML with relative paths to your scripts and stylesheets:

HTML

1<!-- src/html/pages/home.html -->
2<!DOCTYPE html>
3<html lang="en">
4<head>
5  <title>My App</title>
6  <link rel="stylesheet" href="./styles/main.css">
7</head>
8<body>
9  <h1>Welcome</h1>
10  <div id="app"></div>
11
12  <script src="./scripts/app.ts"></script>
13</body>
14</html>

During the build process, AbsoluteJS detects all referenced assets, bundles them, and rewrites the paths to point to the built files:

HTML

1<!-- After build, paths are automatically updated -->
2<!DOCTYPE html>
3<html lang="en">
4<head>
5  <title>My App</title>
6  <link rel="stylesheet" href="/build/main-a3f2c1.css">
7</head>
8<body>
9  <h1>Welcome</h1>
10  <div id="app"></div>
11
12  <script src="/build/app-b7d4e9.js"></script>
13</body>
14</html>

Asset Detection

The build system automatically detects and processes assets referenced in your HTML:

JavaScript

.js files are bundled and minified

TypeScript

.ts files are compiled to JS and bundled

CSS

.css files are bundled and minified

HTML

// The build system automatically detects and processes:

// JavaScript files
<script src="./scripts/app.js"></script>

// TypeScript files (compiled to JS)
<script src="./scripts/app.ts"></script>

// CSS files
<link rel="stylesheet" href="./styles/main.css">

// All paths are updated to point to the bundled, hashed files

Hashed filenames: Built files include content hashes for cache busting
Path rewriting: All asset paths are automatically updated to the build output
Bundling: Assets are optimized and minified for production