Overview

Copper treats the frontend as part of your application rather than an afterthought. React and Inertia are the R and I of the GRIP stack: the dev server, asset pipeline, and production builds are all handled by the CLI, and your Go routers render React pages directly.

Choosing a Stack

copper create supports two frontend stacks via the -frontend flag:

inertia:react (default) is a React app powered by Vite and Inertia. Your Go routers render React pages directly, giving you server-side routing and client-side interactivity without a separate API layer or client router to maintain.
none creates no web/ directory, which is ideal for JSON APIs or for classic server-rendered HTML views using Go templates.

copper create -frontend=inertia:react github.com/gocopper/rockets

Development

A single command runs everything:

copper run -watch

This starts your app on http://localhost:5901 and the Vite dev server on port 3000. Copper injects the Vite client into your pages, so hot module replacement works out of the box: edit a React component and the browser updates without a reload. Go changes will trigger a rebuild and restart automatically. The scaffolded config/dev.toml enables the dev-mode behavior:

config/dev.toml

[vitejs]
dev_mode = true

[chttp]
use_local_html = true
render_html_error = true

Production Builds

To build for production, run the frontend build followed by copper build:

cd web && npm run build && cd ..
copper build

npm run build (or bun run build) runs the Vite production build, outputting hashed assets into web/build/static. copper build then copies web/public in alongside them and generates web/build/embed.go so that all assets compile into your binary. Deploying a Copper app, frontend included, is a matter of copying a single file.

The web Directory

web/
├── wire.go              # embeds src/ and registers render funcs
├── public/              # static files served as-is under /static
├── src/
│   ├── layouts/main.html    # HTML shell rendered by the server
│   ├── pages/               # your React page components
│   ├── main.tsx             # frontend entrypoint
│   └── styles.css
├── vite.config.ts
└── package.json

web/wire.go is the bridge between the frontend and Go: it embeds the templates and registers the Vite render func that emits the right script tags:

web/wire.go

//go:embed src
var HTMLDir embed.FS

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

Copper uses bun when it is installed and falls back to npm, both for installing dependencies at scaffold time and for running the dev server.

Getting Started

The Basics

Architecture

HTTP

Database

Frontend

Digging Deeper

Reference

Choosing a Stack

Development

Production Builds

The web Directory

​Choosing a Stack

​Development

​Production Builds

​The web Directory

Choosing a Stack

Development

Production Builds

The web Directory