Skip to content
Zuno Framework

Embedded Frontend

🖼️ Embedded Frontend

Section titled “🖼️ Embedded Frontend”

In this example, you’ll learn how to serve a static frontend—such as a Single Page Application (SPA)—directly from your Zuno backend. This is useful for:

  • Fullstack apps with a C++ backend and JS frontend
  • Admin panels or dashboards
  • Offline-capable UIs bundled with the server

🧱 Project Structure

Section titled “🧱 Project Structure”
embedded-frontend/
├── CMakeLists.txt
├── public/
│   ├── index.html
│   ├── app.js
│   └── styles.css
└── main.cpp

📄 CMakeLists.txt

Section titled “📄 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

Section titled “📄 main.cpp”
#include <zuno/zuno.hpp>
#include <fstream>
#include <sstream>


int main() {
zuno::App app;


// Serve static frontend files (JS, CSS, images)
app.use(staticFiles("public"));


// Fallback route for SPAs
app.get("/*", [](Request& req, Response& res) {
  res.html(zuno::readFile("./public/index.html"));
});


app.listen(3000);
}

📄 public/index.html

Section titled “📄 public/index.html”
index.html
<!DOCTYPE html>
<html>
<head>
  <title>Zuno Frontend</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <h1>Hello from Zuno Frontend</h1>
  <script src="app.js"></script>
</body>
</html>

🚀 Run the App

Section titled “🚀 Run the App”
Terminal window
cmake -B build
cmake --build build
./build/embedded-frontend

Then visit http://localhost:3000 to see your frontend served by Zuno.

🧭 What’s Next?

Section titled “🧭 What’s Next?”

Zuno lets you bundle your backend and frontend into a single, elegant binary—no Node.js required.