Framework Adapters

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

Adapter	Build Tool	Output Dir	Manifest	Notes
React	Vite	`dist`	`.vite/manifest.json`	Standard Vite setup
Vue	Vite	`dist`	`.vite/manifest.json`	Standard Vite setup
Svelte	Vite	`dist`	`.vite/manifest.json`	Standard Vite setup
SvelteKit	SvelteKit	`build`	None	Static adapter
Angular	Angular CLI	`dist/app/browser`	None	Production build
Solid	Vite	`dist`	`.vite/manifest.json`	Standard Vite setup
Astro	Astro	`dist`	None	Static output

Next Steps

API Reference

Complete API documentation

Configuration

All configuration options

Framework Guides

Framework-specific guides

Getting Started

Core Concepts

Framework Integration

Advanced Features

Working with APIs

Deployment

Templates

Recipes & Examples

Reference

Framework Adapters

Overview

Available Adapters

React

Vue

Svelte

SvelteKit

Solid

Astro

Angular

Using Adapters

Basic Usage

With Embedded FS

Custom Configuration

When to Use Adapters

Creating Custom Adapters

Adapter Comparison

Next Steps

API Reference

Configuration

Framework Guides

​Overview

​Available Adapters

​React

​Vue

​Svelte

​SvelteKit

​Solid

​Astro

​Angular

​Using Adapters

​Basic Usage

​With Embedded FS

​Custom Configuration

​When to Use Adapters

​Creating Custom Adapters

​Adapter Comparison

​Next Steps

API Reference

Configuration

Framework Guides

Overview

Available Adapters

React

Vue

Svelte

SvelteKit

Solid

Astro

Angular

Using Adapters

Basic Usage

With Embedded FS

Custom Configuration

When to Use Adapters

Creating Custom Adapters

Adapter Comparison

Next Steps