Skip to main content
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">

​
Next Steps

Caching

Caching strategies

Production

Production optimization