Instalacion y Setup del Entorno

Instalar Go

Linux

# Descargar la ultima version (verificar en go.dev/dl)
wget https://go.dev/dl/go1.23.6.linux-amd64.tar.gz

# Extraer en /usr/local
sudo rm -rf /usr/local/go
sudo tar -C /usr/local -xzf go1.23.6.linux-amd64.tar.gz

# Agregar al PATH (en ~/.bashrc o ~/.zshrc)
export PATH=$PATH:/usr/local/go/bin
export PATH=$PATH:$(go env GOPATH)/bin

macOS

# Con Homebrew
brew install go

Verificar la instalacion

go version
# go version go1.23.6 linux/amd64

Instalar Templ CLI

Templ necesita un compilador que transforma archivos .templ en codigo Go:

go install github.com/a-h/templ/cmd/templ@latest

Verificar:

templ version

Extension de editor

Para VS Code, instala la extension templ-vscode que provee:

• Syntax highlighting para archivos .templ
• Autocompletado via LSP
• Diagnosticos y errores en tiempo real
• Formateo automatico

Instalar Air (hot reload)

Air vigila cambios en tus archivos y reinicia el servidor automaticamente:

go install github.com/air-verse/air@latest

Verificar:

air -v

Crear el proyecto

mkdir todo-htmx
cd todo-htmx
go mod init todo-htmx

Instalar dependencia de Templ

go get github.com/a-h/templ

Estructura inicial del proyecto

todo-htmx/
├── go.mod
├── go.sum
├── main.go              # Punto de entrada
├── .air.toml            # Config de Air
├── static/              # CSS, imagenes
│   └── styles.css
├── handlers/            # Handlers HTTP
│   └── todo.go
├── models/              # Structs de datos
│   └── todo.go
├── store/               # Persistencia en memoria
│   └── todo.go
└── templates/           # Archivos .templ
    ├── layout.templ
    ├── index.templ
    └── todo/
        ├── list.templ
        ├── item.templ
        └── form.templ

Crea las carpetas:

mkdir -p static handlers models store templates/todo

Configurar Air

Crea el archivo .air.toml en la raiz del proyecto:

root = "."
tmp_dir = "tmp"

[build]
  # Antes de compilar Go, compilar los archivos .templ
  pre_cmd = ["templ generate"]
  cmd = "go build -o ./tmp/main ."
  bin = "./tmp/main"
  delay = 1000
  exclude_dir = ["tmp", "node_modules"]
  exclude_regex = ["_test\\.go$"]
  include_ext = ["go", "templ", "css"]
  kill_delay = "0s"
  send_interrupt = false
  stop_on_error = true

[log]
  time = false

[misc]
  clean_on_exit = true

Lo importante de esta configuracion:

• pre_cmd: ejecuta templ generate antes de cada build, convirtiendo archivos .templ a .go
• include_ext: vigila cambios en .go, .templ y .css
• cmd: compila el binario Go
• bin: ejecuta el binario compilado

Verificar que todo funciona

Crea un main.go minimo:

package main

import (
    "fmt"
    "net/http"
)

func main() {
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
        fmt.Fprint(w, "<h1>Todo HTMX funciona!</h1>")
    })

    fmt.Println("Servidor en http://localhost:3000")
    http.ListenAndServe(":3000", nil)
}

Ejecuta con Air:

air

Abre http://localhost:3000 en tu navegador. Deberias ver el mensaje “Todo HTMX funciona!”.

Modifica el texto en main.go, guarda y observa como Air recarga automaticamente.

Flujo de desarrollo

Con Air corriendo, tu flujo de trabajo sera:

1. Editas un archivo .templ o .go
2. Air detecta el cambio
3. Ejecuta templ generate (convierte .templ a .go)
4. Compila el binario Go
5. Reinicia el servidor
6. Recargas el navegador

Todo esto toma menos de 1 segundo gracias a la velocidad de compilacion de Go.

Resumen

• Go se instala descargando el binario oficial
• Templ CLI compila templates .templ a codigo Go
• Air proporciona hot reload vigilando cambios en archivos
• La estructura del proyecto separa handlers, modelos, store y templates
• El flujo de desarrollo es: editar → Air detecta → Templ genera → Go compila → servidor reinicia

Navegacion