> ## Documentation Index
> Fetch the complete documentation index at: https://docs.gocopper.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Vite

The `vitejs` package (from [gocopper/pkg](https://github.com/gocopper/pkg)) connects your Go templates to [Vite](https://vitejs.dev): 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>`:

```html web/src/layouts/main.html theme={null}
<!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:

```toml config/dev.toml theme={null}
[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:

```go web/wire.go theme={null}
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                                      |

<Note>
  The dev-mode integration currently targets React, since the HMR preamble it injects is React's fast refresh. Production mode is framework-agnostic.
</Note>
