Vite

The vitejs package (from gocopper/pkg) connects your Go templates to Vite: the dev server during development, and hashed production assets in a release build. Your templates do not change between the two.

viteAssets

The layout calls a single template function in its <head>:

web/src/layouts/main.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    {{ viteAssets }}
</head>
<body>
    {{ template "content" . }}
</body>
</html>

viteAssets emits whatever the current mode needs, so you never write script tags by hand.

Development Mode

With dev_mode enabled, viteAssets points the page at the Vite dev server:

config/dev.toml

[vitejs]
dev_mode = true

It injects the Vite client and your entrypoint as module scripts, along with the React fast-refresh preamble, so HMR works without any frontend configuration. Copper discovers your entrypoint by convention: src/main.js, .ts, .jsx, or .tsx.

Production Mode

When dev_mode is off (the default), viteAssets reads the Vite build manifest from the assets embedded in your binary and emits the hashed <script> and <link rel="stylesheet"> tags for your entrypoint. There is nothing to configure: the frontend build (npm run build) emits the manifest into web/build/static, and copper build embeds it.

Wiring

The scaffolded project wires this up for you: vitejs.WireModule provides *vitejs.Assets, and web/wire.go registers its render func:

web/wire.go

func HTMLRenderFuncs(vite *vitejs.Assets) []chttp.HTMLRenderFunc {
	return []chttp.HTMLRenderFunc{
		vite.HTMLRenderFunc(),
	}
}

Configuration

Key	Default	Description
`dev_mode`	`false`	Serve assets from the Vite dev server instead of the embedded build
`host`	`http://localhost:3000`	Where the Vite dev server runs

The dev-mode integration currently targets React, since the HMR preamble it injects is React’s fast refresh. Production mode is framework-agnostic.

Getting Started

The Basics

Architecture

HTTP

Database

Frontend

Digging Deeper

Reference

viteAssets

Development Mode

Production Mode

Wiring

Configuration

​viteAssets

​Development Mode

​Production Mode

​Wiring

​Configuration

viteAssets

Development Mode

Production Mode

Wiring

Configuration