Build Manifest

Build manifests map source files to their output files with content hashes. They enable proper asset loading, module preloading, and template integration.

What is a Build Manifest?

When Vite or Webpack builds your app, it creates a manifest file:

{
  "src/main.tsx": {
    "file": "assets/main.abc123.js",
    "css": ["assets/main.def456.css"],
    "imports": ["assets/vendor.xyz789.js"]
  },
  "src/App.tsx": {
    "file": "assets/App.ghi012.js"
  }
}

This maps src/main.tsx → assets/main.abc123.js.

Configuration

import "github.com/go-mizu/mizu/frontend"

opts := frontend.Options{
    Root:     "./dist",
    Manifest: ".vite/manifest.json",  // Path to manifest
}

Loading a Manifest

import (
    "embed"
    "io/fs"
    "github.com/go-mizu/mizu/frontend"
)

//go:embed all:dist
var distFS embed.FS

func setup() {
    dist, _ := fs.Sub(distFS, "dist")

    // Load manifest
    manifest, err := frontend.LoadManifest(dist, ".vite/manifest.json")
    if err != nil {
        panic(err)
    }

    // Use in templates
    viewHelpers := manifest.ViewHelpers()
    // Register helpers with your view engine
}

Manifest API

Entry Points

Get the output file for an entry:

outputFile := manifest.Entry("src/main.tsx")
// Returns: "assets/main.abc123.js"

Assets

Get the URL for an asset:

assetURL := manifest.Asset("logo.png")
// Returns: "/assets/logo.abc123.png"

CSS Files

Get CSS files for an entry:

cssFiles := manifest.CSS("src/main.tsx")
// Returns: ["assets/main.def456.css"]

Preloads

Get module preloads:

preloads := manifest.Preloads("src/main.tsx")
// Returns: ["assets/vendor.xyz789.js", "assets/chunk.abc123.js"]

Template Integration

View Helpers

helpers := manifest.ViewHelpers()

// Available functions:
// - vite_entry: Complete tags (CSS + preloads + script)
// - vite_asset: Asset URL
// - vite_script: Script tag only
// - vite_css: CSS tags only
// - vite_preload: Preload tags only

In Go Templates

<!DOCTYPE html>
<html>
<head>
    <!-- Load all assets for main entry -->
    {{ vite_entry "src/main.tsx" }}
</head>
<body>
    <div id="root"></div>

    <!-- Custom asset URL -->
    <img src="{{ vite_asset "logo.png" }}">
</body>
</html>

Outputs:

<link rel="stylesheet" href="/assets/main.def456.css">
<link rel="modulepreload" href="/assets/vendor.xyz789.js">
<script type="module" src="/assets/main.abc123.js"></script>

<img src="/assets/logo.abc123.png">

Manual Tag Generation

Script Tag

scriptTag := manifest.ScriptTag("src/main.tsx")
// Returns: <script type="module" src="/assets/main.abc123.js"></script>

CSS Tags

cssTags := manifest.CSSTags("src/main.tsx")
// Returns: <link rel="stylesheet" href="/assets/main.def456.css">

Preload Tags

preloadTags := manifest.PreloadTags("src/main.tsx")
// Returns: <link rel="modulepreload" href="/assets/vendor.xyz789.js">

Entry Tags (All in One)

allTags := manifest.EntryTags("src/main.tsx")
// Returns: CSS + preloads + script in correct order

Vite Manifest Format

Vite creates .vite/manifest.json:

{
  "src/main.tsx": {
    "file": "assets/main.abc123.js",
    "src": "src/main.tsx",
    "isEntry": true,
    "css": ["assets/main.def456.css"],
    "imports": ["_vendor.xyz789.js"]
  },
  "_vendor.xyz789.js": {
    "file": "assets/vendor.xyz789.js"
  }
}

Webpack Manifest Format

Webpack creates a simpler manifest:

{
  "main.js": "assets/main.abc123.js",
  "main.css": "assets/main.def456.css",
  "logo.png": "assets/logo.abc123.png"
}

Both formats work with Mizu’s manifest loader.

Benefits

1. Correct Asset Loading

Always load the correct hashed file:

<!-- ❌ Without manifest - breaks on rebuild -->
<script src="/assets/main.abc123.js"></script>

<!-- ✅ With manifest - always correct -->
{{ vite_entry "src/main.tsx" }}

2. Module Preloading

Improve performance by preloading dependencies:

<link rel="modulepreload" href="/assets/vendor.xyz789.js">
<link rel="modulepreload" href="/assets/chunk.abc123.js">
<script type="module" src="/assets/main.abc123.js"></script>

Browser loads dependencies in parallel.

3. CSS Extraction

Automatically include CSS:

<link rel="stylesheet" href="/assets/main.def456.css">

Getting Started

Core Concepts

Framework Integration

Advanced Features

Working with APIs

Deployment

Templates

Recipes & Examples

Reference

What is a Build Manifest?

Configuration

Loading a Manifest

Manifest API

Entry Points

Assets

CSS Files

Preloads

Template Integration

View Helpers

In Go Templates

Manual Tag Generation

Script Tag

CSS Tags

Preload Tags

Entry Tags (All in One)

Vite Manifest Format

Webpack Manifest Format

Benefits

1. Correct Asset Loading

2. Module Preloading

3. CSS Extraction

Next Steps

Caching

Production

​What is a Build Manifest?

​Configuration

​Loading a Manifest

​Manifest API

​Entry Points

​Assets

​CSS Files

​Preloads

​Template Integration

​View Helpers

​In Go Templates

​Manual Tag Generation

​Script Tag

​CSS Tags

​Preload Tags

​Entry Tags (All in One)

​Vite Manifest Format

​Webpack Manifest Format

​Benefits

​1. Correct Asset Loading

​2. Module Preloading

​3. CSS Extraction

​Next Steps

Caching

Production

What is a Build Manifest?

Configuration

Loading a Manifest

Manifest API

Entry Points

Assets

CSS Files

Preloads

Template Integration

View Helpers

In Go Templates

Manual Tag Generation

Script Tag

CSS Tags

Preload Tags

Entry Tags (All in One)

Vite Manifest Format

Webpack Manifest Format

Benefits

1. Correct Asset Loading

2. Module Preloading

3. CSS Extraction

Next Steps