In this section, we will start by adding an index.html and wiring our server to server static content. We want a tracer bullet to for our web client. This will get the process of generating and serving our web UI in place. We will then add in more complexity for resources and js to get, set, and display data.

(explain tracer bullet more) (add link to webpage about it)


We are going to add an index.html file, so first we make sure it will be generated from a template. We update our server generator to add index.html to the OnceFiles.


// Generator definition
#Generator: gen.#Generator & {
	OnceFiles: [...gen.#File] & [
			TemplatePath: "index.html"
			Filepath:     "\(Outdir)/client/index.html"


Create an index.html. This displays a minimal welcome message.


<h1>Welcome to the {{ $.SERVER.Name }} client</h1>


In order to serve our HTML, we need to adjust our API routes. First we need to move our existing routes to /api, to make room for our static content route Second, we need to server our static content from / so index.html behaves correctly in the browser.


func setupRouter(e *echo.Echo) error {

	// Internal routes and Prometheus

	// Static content
	e.Static("/", "client")

	// API routes
	g := e.Group("/api")

	// routes and resources

	return nil

Regen, Rebuild, Rerun

(the three Re’s)

Breaking down index into partials

  • break down now, prep for next section and reuse
  • add navbar while we are at it