Learn Full Stack Rust Programming using AXUM, Yew, and SQLx

Name: Learn Full Stack Rust Programming using AXUM, Yew, and SQLx
Rating: 3.8 (61 reviews)

Frontend and Backend Rust programming: We will build a Rust Web API using AXUM and Postgres and frontend using Yew

Created byEric Mabo

Last updated 12/2024

English

What you'll learn

Why use Rust programming language for full stack web app development in 2023 and beyond?
Rust language basics like variables, functions, data types, control flow, structs, enums, using json, hashmaps, modules, ownership and borrowing in rust
Build a fully functional CRUD API using AXUM, SQLx and Postgress
Build a fully functional Frontend in rust using the Yew framework (Yew looks like ReactJS, but in Rust)
Following popular demand: link to source code provided at the end of the course.

Course content

3 sections • 45 lectures • 5h 0m total length

Introduction2:16
The videos goes over the agenda and discusses why you may want to consider learning and using rust
Showcase what we will be building2:55
Build a full stack app with a Yew frontend and an Axum backend, connected to Postgres, exposing a products API to add, list, and delete products.
Installing Rust1:06
Learn how to install Rust from rust-lang.org, choose your system (Windows, Mac, or WSL), verify the installation with rustc --version, and update with rustup update.
Setting up VS Code3:46
Set up VS Code for Rust development by installing Crates extension, Rust Analyzer, and Tonda client extensions, then enable automatic builds with cargo watch and run on change.
Rust Variables and Functions 16:14
Rust Variables and Functions 24:50
Rust Modules2:55
Learn how to refactor a rust project using modules, splitting code into variables and functions, making the run method public, and wiring modules in main to compile and run.
Rust data Types2:48
Explore Rust data types, including scalar types like integers, floats, booleans, and characters, with size variations and signed or unsigned representations, and note how type choices affect performance and memory.
Compound Data Types5:25
Explore Rust compound data types by comparing tuples and arrays, learning fixed-length storage, type constraints, and element access to understand how to combine data.
Vectors6:57
Create and manipulate vectors by making them mutable, pushing values, and printing results. Learn how vectors enforce homogeneous types, how to get length, and how to pop items.
Rust HashMaps7:38
Learn to use Rust hash maps to store key value pairs, import std hash map, insert California and Florida, convert with to_string, then print with the print line macro.
HashMaps 22:08
If, Else, match7:44
For and While Loops8:11
Learn how to use for loops, ranges, and while loops in Rust to iterate over scores, print results, and count down from ten, reinforcing core control flow concepts.
Rust Structs7:13
Explore Rust structs and tuple-like forms, define a car with make, model, and year, and a location with latitude and longitude, then print fields using println! and dot notation.
Rust Structs: Impl6:48
Learn how to implement methods on a Rust struct using impl, including a new constructor and a describe method that returns a formatted car description.
Working with JSON: serde_json10:42
Explore working with json in Rust using serde_json to parse api data, create and access nested structures like address and languages and country, and print specific fields.
Understanding Rust Ownership and Borrowing9:38
Master Rust ownership and borrowing in full stack development with axum, yew, and sqlx, recognizing that values have a single owner, drop at scope, and can be borrowed via references.

What will be covered in this section0:35
Set up the Axiom web api backend, configure the web server, add tracing, and implement create, read, update, and delete functions for a front-end friendly api.
Setting Up AXUM Server9:19
use axum::{
routing::{get},Router,
};
use tower_http::cors::{Any, CorsLayer};

#[tokio::main]
async fn main() {
//tracing
tracing_subscriber::fmt::init();

// add cors
let cors = CorsLayer::new()
.allow_origin(Any);

let app = Router::new()
.route("/", get(root))
.layer(cors);

tracing::debug!("listening on {}", "0.0.0.0:3000");
println!(" Listening on port {}" , "0.0.0.0:3000" );
axum::Server::bind(&"0.0.0.0:3000".parse().unwrap())
.serve(app.into_make_service())
.await
.unwrap();
}

// basic handler that responds with a static string
async fn root() -> &'static str {
"Hello, REST AXUM API"
}
Add Cargo Watch2:02
Learn how to automate Rust server restarts with cargo watch, enabling auto-recompile and running via cargo run with a live server on port 3000.
Adding CORS to AXUM2:16
Adding Postgres/SQLx5:41
learn how to connect a Rust web app to a database using sqlx, configure dependencies and an env file, and establish a pool connection for Postgres, MySQL, and SQLite.
Adding Postgres Table3:49
Add a Postgres table to the database if it does not exist, using a Rust string literal for the SQL query, executing it with execute, and verifying compilation.
AXUM API - Create Product20:30
Build an Axum api to create a product by posting json to a handler, inserting name and price into the products table with sqlx.
AXUM API - Get ALL Products7:52
Develop an Axum get all products api with a database pool and SQLx that fetches all products via select, returning a json vector of Product with an id field.
AXUM API - Get -ONE product9:36
AXUM API - Delete Product4:19
Create a delete product API in axum using a write query to remove a product by id and return json 'product deleted successfully'; wire the handler in main.rs.
AXUM API - Update Product8:27
Update a product in the axum api by reusing the delete product pattern, binding the product name and price, and returning a json response that signals the update is successful.
Server API completed - see final code0:55

Yew Frontend2:00
Setting Up Yew9:17
Cargo.toml

[package]
name = "frontend"
version = "0.1.0"
edition = "2021"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]
yew = { version = "0.20.0", features = ["csr"] }

yew-router = "0.17"
serde = "1.0.152"
serde_json = "1.0.91"
wasm-bindgen-futures = "0.4.33"
reqwest = { version = "0.11.13", features = ["json"] }
web-sys = {version = "0.3.60", features = ["HtmlInputElement"] }
gloo-console = "0.2.3"
Adding Styling to Yew8:23
Yew Components6:04
API Get Request18:51
below is the final products.rs file

use serde::{Deserialize, Serialize};
use yew::prelude::*;
use yew_router::prelude::*;

use crate::router::Route;

#[derive(Serialize, Deserialize, Debug)]
pub struct Product {
id: i32,
name: String,
price: i32
}
#[function_component]
pub fn Products() -> Html {

let data: UseStateHandle<Vec<Product>> = use_state(|| vec![]);
{
let data_clone = data.clone();
use_effect(move ||{
wasm_bindgen_futures::spawn_local( async move {
let fetched_data = reqwest::get("http://localhost:3000/api/products")
.await
.expect("cannot get data from url")
.json::<Vec<Product>>()
.await
.expect("cannot convert to json");
data_clone.set(fetched_data);
});
|| ()
});
}

let products = data.iter().map(|product| html! {
<ul>
<li key={product.id}>{format!("Name: {}, Price: {}", product.name, product.price)}</li>
</ul>
}).collect::<Html>();

html! {
<div class="container">
<button class="btn-primary">
<Link<Route> to={Route::AddProduct}>{ "Add new Product" }</Link<Route>>
</button>
<h2>{"List of Products: "} {data.len()} </h2>
<p>{products}</p>
</div>
}
}
Displaying Data6:19

let products = data.iter().map(|product| html! {
<ul>
<li key={product.id}>{format!("Name: {}, Price: {}", product.name, product.price)}</li>
</ul>
}).collect::<Html>();
Yew use_effect hook3:21
Create Form7:46
Add Form17:47
Connect Yew and Axum11:08
===================================
#### Connecting frontend and server ####
create and add to Cargo.toml
[workspace]

members = [
"server", "frontend"
]

#create and add to .gitignore
target/
dist/
.env

create frontend/Trunk.toml and add contents
[build]
target = "index.html"
dist = "../dist"

now you can run: trunk serve

# now go to server/main.rs
axum::response::IntoResponse
axum::http::StatusCode,
use std::io;

//serving frontend static files
let serve_dir = ServeDir::new("../frontend/dist").not_found_service(ServeFile::new("../dist/frontend/index.html"));
let serve_dir = get_service(serve_dir).handle_error(handle_error);

# add to router

.nest_service("/", serve_dir.clone())
.fallback_service(serve_dir.clone());

# add handle error fn
async fn handle_error(_err: io::Error) -> impl IntoResponse {
(StatusCode::INTERNAL_SERVER_ERROR, "Something went wrong...")
}

# change current / to /home
cd into backend: cargo watch -x run
=========================================
Post Form Data to Server API12:26
Post form data to the back-end API by building a JSON payload with name and price (as i32) using request create, sending to /api/products, and successfully adding the product.
Style Form1:50
Learn how to style the form and inputs, including the name and price fields, apply classes like form input and btn primary, and verify the appearance in the browser.
Yew Routing8:46
final router.rs

use yew_router::prelude::*;
use yew::prelude::*;

use crate::products::Products;
use crate::form::Form;

#[derive(Clone, Routable, PartialEq)]
pub enum Route {
#[at("/")]
Home,
#[at("/addproduct")]
AddProduct,
#[at("/about")]
About,
#[not_found]
#[at("/404")]
NotFound,
}

pub fn switch(routes: Route) -> Html {
match routes {
Route::Home => html! { <Products /> },
Route::AddProduct => html! { <Form />},
Route::About => html! { <h1>{ "About us " }</h1>},
Route::NotFound => html! { <h1>{ "404" }</h1> },
}
}
Yew Routing: Adding Components and Navigation12:11
Link to source code: https://github.com/infinityfish/fullstackrustcourse0:01

Requirements

Basic software programming skills in any programming language
Familiarity with Javascript, Typescript or Python is helpful, but not a requirement

Description

You will build a full-stack web app using the rust programming language. We will be building a fully functional CRUD Server API using AXUM, SQLx, and Postgres. Then we will build a fully functional frontend in rust using the Yew framework (Yew looks like ReactJS but in Rust). We will then connect the front end and the back end to run from the same port/URL. You will learn how to create Yew components, routing, create forms and handle GET and POST requests using the rust reqwest crate in the front end. This course is good for developers who already know at least one programming language and have some web development experience. It is not a course for folks who are completely new to programming.
Rust is the most loved programming language for the past several years according to StackOverflow. All the big tech companies are now using rust and a lot of startups are using rust. More so, a lot of the newer blockchain projects are building with rust. The rust programming language is growing very rapidly.
This course will help you start developing in rust very fast, as you will build a real full-stack app. You can use the concepts to expand your rust dev options.
The course is divided into 3 main sections. Section 1 is an intro to rust. You can skip this section if you are already familiar with the material. Section 2 will cover the Server API dev using AXUM and section 3 covers developing frontend apps using the popular Yew framework.
Full source code provided at the end of the course.

Who this course is for:

This course is for software engineers who would like to learn the rust programming language, by building a real world project

Learn Full Stack Rust Programming using AXUM, Yew, and SQLx

What you'll learn

Explore related topics

Course content

Introduction18 lectures • 1hr 39min

Build a rust REST API using AXUM, SQLx and Postgres12 lectures • 1hr 15min

Frontend with Yew Framework15 lectures • 2hr 6min

Requirements

Description

Who this course is for: