Crafter.CppDOM/examples/Website

Website Example

This example demonstrates a full-stack web application using Crafter.CppDOM with both frontend and backend components.

Features

• Shows how to create a complete web application with HTML/CSS/JavaScript frontend
• Illustrates communication between frontend and backend using HTTP requests
• Shows how to handle form inputs and dynamic content rendering
• Demonstrates CRUD operations (Create, Read, Delete) for notes
• Includes proper error handling and loading states

Usage

The application consists of two components:

1. Frontend: Handles UI rendering and user interactions
2. Backend: Manages data storage and API endpoints

Frontend Code

import Crafter.CppDOM;
import std;
using namespace Crafter;
using namespace Crafter::CppDOMBindings;

// Create the UI with HTML and CSS
HtmlElementView* head = new HtmlElementView("head", R"(
    <title>Note Taking App</title>
    <style>
        /* CSS styles for the application */
    </style>
)");
    
HtmlElementView* body = new HtmlElementView("body", R"(
    <div class="app-container">
        <h1>📝 Note Taking App</h1>
        <!-- UI elements -->
    </div>
)");

// Handle user interactions
addNoteBtn->AddClickListener([&](MouseEvent event) {
    std::string noteValue = noteInput->GetValue();
    // Send note to backend
    Fetch("http://localhost:3000/createNote", noteValue, [&noteValue](std::string content) {
        // Update UI with new note
        RenderNotes();
    });
});

Building and Running

First, start the backend server:

cd backend
crafter-build build executable -r

Then start the frontend:

cd frontend
crafter-build build executable
./run.sh

Then navigate to http://localhost:8080/ in your browser.

If caddy is not installed, you can use your favorite static file server instead.