Vue.js + Go con Echo v5, parte 1: entorno y primera API

by

Mascote LinuxPro programando numa estação com o logo do Vue na tela e o gopher do Go na mesa, com o cachorro caramelo cyborg deitado ao lado

Serie Vue.js + Go con Echo v5: Parte 1: entorno y primera API · Parte 2: frontend Vue con Vite · Parte 3: API REST de tareas · Parte 4: inicio de sesión con sesión y cookie · Parte 5: embed, binario único y Docker

Código completo: todos los archivos de la serie están en el gist vue-go-echo-v5, con un README que muestra en qué carpeta se encuentra cada uno.

Un frontend en Vue.js y un backend en Go forman una pareja muy práctica para herramientas internas, paneles y pequeños SaaS. Vue se encarga de la interfaz reactiva, y Go ofrece una API rápida que, al final, se convierte en un único binario con el sitio dentro. En esta serie de cinco partes vamos a construir, desde cero, una aplicación de tareas con inicio de sesión usando Go, Echo v5 y Vue 3. Todo el código fue probado en las versiones indicadas. En esta primera parte: qué es cada pieza, cómo preparar el entorno y cómo levantar la primera ruta de la API.

Contenido ocultar
1 Qué vamos a construir
2 Por qué Echo v5
3 Versiones utilizadas en la serie
4 Instala Go y Node.js
5 Estructura del proyecto
6 La primera ruta con Echo v5
7 Archivos de esta parte en el gist
8 Próximo paso

Qué vamos a construir

Al final de la serie tendrás:

  • una API JSON en Go con el framework Echo v5: login, logout, usuario actual y un CRUD de tareas;
  • un frontend en Vue 3 con Vite e Vue Router, con pantalla de login y lista de tareas;
  • sesión en cookie HttpOnly, sin guardar token en el localStorage;
  • frontend compilado embebido en el binario Go con go:embed;
  • un Dockerfile que compila todo sin que necesites instalar Go o Node en la máquina, y genera una imagen de unos 10 MB.

El guion de la serie:

  1. Entorno y primera API (este artículo);
  2. Frontend Vue con Vite, con proxy para la API en desarrollo;
  3. API REST de tareas: rutas, JSON, validación y errores en Echo v5;
  4. Inicio de sesión con sesión y cookie, middleware de autenticación y rutas protegidas en Vue Router;
  5. Embed, binario único y Docker: build de producción, systemd y Nginx.

Por qué Echo v5

Echo es un framework web minimalista para Go: enrutador rápido, grupos de rutas, middlewares listos (log, recover, CORS, archivos estáticos, rate limit) y helpers para JSON. La versión 5 es una ruptura de compatibilidad respecto a la v4. Los cambios que más aparecen en el día a día son:

  • echo.Context se convirtió en struct: el handler ahora recibe *echo.Context (puntero), ya no la interfaz echo.Context;
  • log con log/slog: el logger propio de la v4 desapareció, y Echo utiliza el logger estructurado de la biblioteca estándar;
  • nuevo import: github.com/labstack/echo/v5;
  • los métodos de ruta devuelven RouteInfo, y el servidor ha ganado el echo.StartConfig con apagado graceful mediante context.

Muchos tutoriales en internet aún muestran código de la v4, con func(c echo.Context) error. Con la v5 ese código no compila. La lista completa de cambios está en el documento API_CHANGES_V5.md del proyecto. En esta serie utilizamos Echo v5.3.1, publicado en julio de 2026.

Versiones utilizadas en la serie

Comprobadas en 22 de septiembre de 2026:

  • Go 1.27.1;
  • Node.js 24 (LTS), que incluye npm;
  • Echo v5.3.1;
  • Vue 3.5.43, Vue Router 4.6.4 e Vite 8.3.0.

Las versiones más recientes dentro de la misma línea deberían funcionar. Si algo no compila, compara primero la versión de Echo: es la pieza con más cambios entre versiones mayores.

Instala Go y Node.js

Para Go, usa el tarball oficial de go.dev/dl. El paquete de las distribuciones suele ir atrasado y Echo v5 necesita un Go reciente. Tenemos una guía más larga en Instalando Golang en Linux; el resumen para amd64:

curl -LO https://go.dev/dl/go1.27.1.linux-amd64.tar.gz
sudo rm -rf /usr/local/go
sudo tar -C /usr/local -xzf go1.27.1.linux-amd64.tar.gz
echo 'export PATH=$PATH:/usr/local/go/bin:$HOME/go/bin' >> ~/.bashrc
source ~/.bashrc
go version

Para Node.js, sigue la página oficial de download y elige la línea 24 LTS, con el instalador que prefieras (tarball, gestor de versiones o repositorio de la distribución). Después comprueba:

node -v    # v24.x
npm -v

En la parte 5 mostramos cómo compilarlo todo solo con Docker. Si prefieres no instalar Go y Node, puedes seguir la serie leyendo el código y dejar la compilación para el contenedor.

Estructura del proyecto

El backend y el frontend viven en el mismo repositorio. Go es el proyecto principal y Vue vive en la carpeta web/:

vueapp/
├── go.mod
├── main.go              # servidor Echo
├── internal/api/        # rotas, login e tarefas (partes 3 e 4)
└── web/                 # projeto Vue criado pelo Vite (parte 2)
    ├── embed.go         # go:embed do build (parte 5)
    ├── src/
    └── dist/            # gerado pelo npm run build

Crea la carpeta y el módulo Go. La ruta del módulo es el nombre que se usa en los imports; cámbiala por la dirección de tu repositorio:

mkdir vueapp && cd vueapp
go mod init github.com/exemplo/vueapp
go get github.com/labstack/echo/v5@v5.3.1

La primera ruta con Echo v5

Crea el main.go con una ruta de salud en /api/health. Todas las rutas de la API empezarán por /api: esto deja el resto de las rutas libres para Vue, que importarás en las partes 2 y 5.

package main

import (
	"log/slog"
	"net/http"

	"github.com/labstack/echo/v5"
	"github.com/labstack/echo/v5/middleware"
)

func main() {
	e := echo.New()
	e.Use(middleware.RequestLogger())
	e.Use(middleware.Recover())

	e.GET("/api/health", func(c *echo.Context) error {
		return c.JSON(http.StatusOK, map[string]string{"status": "ok"})
	})

	if err := e.Start("127.0.0.1:8080"); err != nil {
		slog.Error("servidor", "error", err)
	}
}

Qué hace cada parte:

  • echo.New() crea la aplicación;
  • middleware.RequestLogger() registra cada petición en JSON mediante slog;
  • middleware.Recover() convierte un panic en un error 500, en lugar de tumbar el proceso;
  • el handler recibe *echo.Context, con puntero, que es la firma de la v5;
  • c.JSON serializa el mapa y establece el Content-Type.

Ejecútalo y pruébalo en otra terminal:

go mod tidy
go run .
curl -i http://127.0.0.1:8080/api/health
HTTP/1.1 200 OK
Content-Type: application/json
...
{"status":"ok"}

En la terminal del servidor aparece el banner de Echo y una línea de log por petición, ya en JSON:

{"level":"INFO","msg":"Echo (v5.3.1). High performance, minimalist Go web framework https://echo.labstack.com","version":"5.3.1"}
{"level":"INFO","msg":"http(s) server started","address":"127.0.0.1:8080"}
{"level":"INFO","msg":"REQUEST","method":"GET","uri":"/api/health","status":200,...}

Vinculamos el servidor en 127.0.0.1 a propósito: durante el desarrollo, la API no queda expuesta en la red. En la parte 5 el puerto y la dirección pasan a provenir de variables de entorno.

Archivos de esta parte en el gist

Cada archivo abre directamente en el gist de la serie. El gist trae la versión final del proyecto: main.go e routes.go también obtienen login en la parte 4 y el frontend integrado en la parte 5.

Próximo paso

Con Go sirviendo JSON, la parte 2 crea el frontend Vue con Vite dentro de web/ y configura el proxy que hace que el npm run dev hable con esta API sin ningún problema de CORS. Si quieres ver esa misma arquitectura aplicada a un proyecto más grande, lee también la serie phpVirtualBox en Go.

Serie Vue.js + Go con Echo v5: Parte 1: entorno y primera API · Parte 2: frontend Vue con Vite · Parte 3: API REST de tareas · Parte 4: inicio de sesión con sesión y cookie · Parte 5: embed, binario único y Docker