Crates.io | mash-up |
lib.rs | mash-up |
version | 0.1.0 |
source | src |
created_at | 2024-11-27 17:28:14.06575 |
updated_at | 2024-11-27 17:28:14.06575 |
description | A minimalist web development stack that combines the power of Maud, Axum, SQLx and HTMX. |
homepage | |
repository | https://github.com/yree/mash |
max_upload_size | |
id | 1463429 |
size | 68,783 |
as simple as potatoes
Welcome to MASH - a minimalist web development stack that combines the power of maud, axum, sqlx, and htmx.
hx-post
and hx-target
.MASH allows for rapid prototyping with simple UI elements while maintaining performance and ease of development.
In this example, we build a basic web application where the user inputs their name, and the server responds with a greeting. The app leverages HTMX to dynamically update the page without needing a full reload, Maud for HTML generation, Axum for request routing, and SQLx for database interaction.
The example includes:
handlers.rs
: Contains the logic for handling HTTP requests. In this example, it renders the form and handles form submissions.main.rs
: The entry point for the Axum web server, routing requests to the handlers.views.rs
: Defines the HTML templates using Maud for both the form and response.To continuously build and run the app use cargo-watch
:
cargo watch -x "run --example hello_world"
Access the app at http://localhost:8080
.
Axum is a web framework that uses an asynchronous model, ideal for handling web traffic efficiently. In this example, Axum provides:
GET
and POST
requests to serve the form and process the submission.Form
..route("/", get(handlers::get_form))
.route("/submit", post(handlers::handle_submit))
Maud allows you to write HTML using Rust's type-safe syntax. This eliminates any risk of invalid HTML while keeping your code minimal and clean. Maud renders the form and the dynamic greeting.
html! {
div class="w" {
h1 { "What's your name!" }
form hx-post="/submit" hx-target="#response" {
input type="text" id="name" name="name" required;
button { "Submit" }
}
}
}
HTMX simplifies AJAX-like requests by using HTML attributes. In this example, hx-post
sends a POST request when the form is submitted, and hx-target
updates the content of a specific DOM element (in this case, the #response
div) without needing custom JavaScript.
<form hx-post="/submit" hx-target="#response">
SQLx is used to handle database queries in an async, safe manner. This example demonstrates how you can use SQLx to interact with your database to store and retrieve data.
use sqlx::PgPool;
async fn handle_submit(pool: PgPool, form: FormData) -> Result<impl IntoResponse, AppError> {
sqlx::query("INSERT INTO greetings (name) VALUES ($1)")
.bind(form.name)
.execute(&pool)
.await?;
Ok("Form submitted!")
}
It's plain, versatile, and gets the job done effectively.
With the MASH stack, you get a straightforward, efficient, and minimalist approach to web development. Perfect for fast prototyping and small-scale applications, it's as simple as potatoes! 🥔