Skip to main content
Framework adapters provide framework-specific defaults and optimizations for common frontend frameworks.

​
Overview

Adapters are convenience wrappers that apply framework-specific best practices: 
import "github.com/go-mizu/mizu/frontend/adapters"

// Instead of manual configuration
app.Use(adapters.React(frontend.Options{
    Root: "./dist",
}))

​
Available Adapters

​
React

func React(opts frontend.Options) mizu.Middleware
Optimized for React applications with Vite. Defaults:
  • Manifest: .vite/manifest.json
  • Output directory: dist
Example: 
import "github.com/go-mizu/mizu/frontend/adapters"

app.Use(adapters.React(frontend.Options{
    Root: "./dist",
}))

​
Vue

func Vue(opts frontend.Options) mizu.Middleware
Optimized for Vue 3 applications with Vite. Defaults:
  • Manifest: .vite/manifest.json
  • Output directory: dist
Example: 
app.Use(adapters.Vue(frontend.Options{
    Root: "./dist",
}))

​
Svelte

func Svelte(opts frontend.Options) mizu.Middleware
Optimized for Svelte applications with Vite. Defaults:
  • Manifest: .vite/manifest.json
  • Output directory: dist
Example: 
app.Use(adapters.Svelte(frontend.Options{
    Root: "./dist",
}))

​
SvelteKit

func SvelteKit(opts frontend.Options) mizu.Middleware
Optimized for SvelteKit with static adapter. Defaults:
  • Output directory: build
  • Index: index.html
Example: 
app.Use(adapters.SvelteKit(frontend.Options{
    Root: "./build",
}))

​
Solid

func Solid(opts frontend.Options) mizu.Middleware
Optimized for Solid.js with Vite. Defaults:
  • Manifest: .vite/manifest.json
  • Output directory: dist
Example: 
app.Use(adapters.Solid(frontend.Options{
    Root: "./dist",
}))

​
Astro

func Astro(opts frontend.Options) mizu.Middleware
Optimized for Astro with static output. Defaults:
  • Output directory: dist
  • Index: index.html
Example: 
app.Use(adapters.Astro(frontend.Options{
    Root: "./dist",
}))

​
Angular

func Angular(opts frontend.Options) mizu.Middleware
Optimized for Angular applications. Defaults:
  • Output directory: dist/app-name/browser
  • Index: index.html
Example: 
app.Use(adapters.Angular(frontend.Options{
    Root: "./dist/my-app/browser",
}))

​
Using Adapters

​
Basic Usage

package server

import (
    "github.com/go-mizu/mizu"
    "github.com/go-mizu/mizu/frontend"
    "github.com/go-mizu/mizu/frontend/adapters"
)

func New() *mizu.App {
    app := mizu.New()

    // API routes
    app.Get("/api/users", handleUsers)

    // Frontend with adapter
    app.Use(adapters.React(frontend.Options{
        Mode:        frontend.ModeAuto,
        Root:        "./dist",
        DevServer:   "http://localhost:5173",
        IgnorePaths: []string{"/api"},
    }))

    return app
}

​
With Embedded FS

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

func New() *mizu.App {
    app := mizu.New()

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

    app.Use(adapters.Vue(frontend.Options{
        FS:        dist,
        DevServer: "http://localhost:5173",
    }))

    return app
}

​
Custom Configuration

Adapters still accept all standard options: 
app.Use(adapters.React(frontend.Options{
    Mode:      frontend.ModeProduction,
    Root:      "./dist",
    Prefix:    "/app",
    InjectEnv: []string{"API_URL"},
    CacheControl: frontend.CacheConfig{
        HashedAssets: 180 * 24 * time.Hour,
    },
}))

​
When to Use Adapters

Use adapters when:
  • Using standard framework setup
  • Want framework-specific optimizations
  • Prefer convention over configuration
Use frontend.WithOptions when:
  • Custom build configuration
  • Non-standard directory structure
  • Need full control over options

​
Creating Custom Adapters

You can create your own adapters: 
package myadapters

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

func Qwik(opts frontend.Options) mizu.Middleware {
    // Apply Qwik-specific defaults
    if opts.Root == "" {
        opts.Root = "./dist"
    }
    if opts.Index == "" {
        opts.Index = "index.html"
    }
    if opts.Manifest == "" {
        opts.Manifest = "q-manifest.json"
    }

    return frontend.WithOptions(opts)
}
Use: 
import "yourmodule/myadapters"

app.Use(myadapters.Qwik(frontend.Options{
    Root: "./dist",
}))

​
Adapter Comparison

AdapterBuild ToolOutput DirManifestNotes
ReactVitedist.vite/manifest.jsonStandard Vite setup
VueVitedist.vite/manifest.jsonStandard Vite setup
SvelteVitedist.vite/manifest.jsonStandard Vite setup
SvelteKitSvelteKitbuildNoneStatic adapter
AngularAngular CLIdist/app/browserNoneProduction build
SolidVitedist.vite/manifest.jsonStandard Vite setup
AstroAstrodistNoneStatic output

​
Next Steps

API Reference

Complete API documentation

Configuration

All configuration options

Framework Guides

Framework-specific guides