Skip to main content
Mizu provides ready-to-use templates for popular frontend frameworks, making it easy to start new projects.

Available Templates

# List all frontend templates
mizu new --list-templates frontend
TemplateFrameworkDescription
frontend/reactReact + ViteReact SPA with TypeScript
frontend/vueVue 3 + ViteVue SPA with TypeScript
frontend/svelteSvelte + ViteSvelte SPA with TypeScript
frontend/sveltekitSvelteKitFull-stack Svelte framework
frontend/angularAngularAngular with TypeScript
frontend/htmxHTMXServer-rendered with HTMX
frontend/nextNext.jsReact framework (static export)
frontend/nuxtNuxtVue framework (static generation)
frontend/preactPreactLightweight React alternative
frontend/alpineAlpine.jsMinimal JavaScript framework

Using Templates

Create New Project

mizu new ./my-app --template frontend/react

What’s Included

Each template includes:
  • Backend: Complete Mizu server setup
  • Frontend: Pre-configured framework
  • Build config: Vite/webpack/Angular CLI configured
  • Development setup: Hot reload ready
  • Production build: Embedded filesystem
  • Makefile: Common commands
  • Example code: Working examples

Template Structure

SPA Templates (React/Vue/Svelte)

my-app/
├── cmd/server/
│   └── main.go              # Entry point
├── app/server/
│   ├── app.go               # App setup with frontend middleware
│   ├── config.go            # Configuration
│   └── routes.go            # API routes
├── frontend/                  # Frontend application
│   ├── src/                 # Source code
│   ├── public/              # Static assets
│   ├── package.json
│   └── vite.config.ts       # Build configuration
├── dist/                    # Build output
├── go.mod
└── Makefile

HTMX Template

my-app/
├── cmd/server/
├── app/server/
│   ├── app.go               # App with view engine
│   ├── routes.go
│   └── handlers.go          # HTML handlers
├── views/                   # HTML templates
│   ├── layouts/
│   ├── pages/
│   └── partials/
├── static/                  # CSS, JS, images
│   ├── css/
│   └── js/
└── Makefile

Customizing Templates

Modify Build Output

// Change from dist to build
//go:embed all:../../build
var buildFS embed.FS

app.Use(frontend.WithOptions(frontend.Options{
    Root: "./build",
}))
Update frontend build config:
// vite.config.ts
export default {
  build: {
    outDir: '../build',  // Changed from dist
  },
}

Add Dependencies

cd frontend
npm install axios react-query

Change Dev Port

// app/server/config.go
type Config struct {
    Port    string  // Backend port
    DevPort string  // Frontend dev server port
}

func LoadConfig() *Config {
    return &Config{
        Port:    getEnv("PORT", "3000"),
        DevPort: getEnv("DEV_PORT", "5174"),  // Changed from 5173
    }
}
// vite.config.ts
export default {
  server: {
    port: 5174,  // Must match DevPort
  },
}

Template Features

All Templates Include

  • ✅ TypeScript support (SPA templates)
  • ✅ Hot Module Replacement
  • ✅ Production build optimization
  • ✅ Auto-detect dev/prod mode
  • ✅ API route examples
  • ✅ Embedded filesystem setup
  • ✅ Makefile with common commands

Template-Specific Features

React:
  • React Router
  • TypeScript
  • CSS Modules
Vue:
  • Vue Router
  • Composition API
  • TypeScript
Svelte:
  • SvelteKit routing
  • TypeScript
  • Scoped styles
HTMX:
  • Go templates
  • HTMX examples
  • Alpine.js integration

Makefile Commands

All templates include these commands:
make dev        # Start development (both frontend and backend)
make build      # Build for production
make clean      # Clean build artifacts
make install    # Install dependencies

Next Steps