Saltearse al contenido

Frontend Incluido

🖼️ Frontend Incluido

En este ejemplo, aprenderás a servir un frontend estático — como una aplicación de página única (SPA) — directamente desde tu backend Zuno. Esto es útil para:

Aplicaciones fullstack con backend en C++ y frontend en JS
Paneles de administración o dashboards
UIs offline-capables empaquetadas junto al servidor

🧱 Estructura del Proyecto

embedded-frontend/
├── CMakeLists.txt
├── public/
│   ├── index.html
│   ├── app.js
│   └── styles.css
└── main.cpp

📄 `CMakeLists.txt`

cmake_minimum_required(VERSION 3.16)
project(embedded_frontend)

set(CMAKE_CXX_STANDARD 20)

include(FetchContent)

FetchContent_Declare(
zuno
GIT_REPOSITORY https://github.com/zuno-framework/zuno.git
GIT_TAG        main
)

FetchContent_MakeAvailable(zuno)

add_executable(embedded-frontend main.cpp)
target_link_libraries(embedded-frontend PRIVATE zuno)

📄 `main.cpp`

#include <zuno/zuno.hpp>
#include <fstream>
#include <sstream>

int main() {
zuno::App app;

// Sirve archivos estáticos del frontend (JS, CSS, imágenes)
app.use(staticFiles("public"));

// Ruta de recuperación para SPAs
app.get("/*", [](Request& req, Response& res) {
  res.html(zuno::readFile("./public/index.html"));
});

app.listen(3000);
}

📄 `public/index.html`

<!DOCTYPE html>
<html>
<head>
  <title>Zuno Frontend</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <h1>Hola desde el frontend de Zuno</h1>
  <script src="app.js"></script>
</body>
</html>

🚀 Ejecutar la Aplicación

cmake -B build
cmake --build build
./build/embedded-frontend

Luego visita http://localhost:3000 para ver tu frontend servido por Zuno.

🧭 ¿Qué viene después?

Agregar Compresión Brotli para una entrega más rápida
Seguridad con TLS
Combinar con Rutas Autenticadas

Zuno te permite empaquetar tu backend y frontend en un solo archivo binario elegante — sin necesidad de Node.js.