73 lines
No EOL
1.9 KiB
Markdown
73 lines
No EOL
1.9 KiB
Markdown
# 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
|
|
|
|
```cpp
|
|
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, [¬eValue](std::string content) {
|
|
// Update UI with new note
|
|
RenderNotes();
|
|
});
|
|
});
|
|
```
|
|
|
|
## Building and Running
|
|
|
|
First, start the backend server:
|
|
```bash
|
|
cd backend
|
|
crafter-build build executable -r
|
|
```
|
|
|
|
Then start the frontend:
|
|
```bash
|
|
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. |