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

Name: Learn Full Stack Rust Programming using AXUM, Yew, and SQLx
Rating: 3.9 (60 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
Installing Rust1:06
Setting up VS Code3:46
Rust Variables and Functions 16:14
Rust Variables and Functions 24:50
Rust Modules2:55
Rust data Types2:48
Compound Data Types5:25
Vectors6:57
Rust HashMaps7:38
HashMaps 22:08
If, Else, match7:44
For and While Loops8:11
Rust Structs7:13
Rust Structs: Impl6:48
Working with JSON: serde_json10:42
Understanding Rust Ownership and Borrowing9:38

What will be covered in this section0:35
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
Adding CORS to AXUM2:16
Adding Postgres/SQLx5:41
Adding Postgres Table3:49
AXUM API - Create Product20:30
AXUM API - Get ALL Products7:52
AXUM API - Get -ONE product9:36
AXUM API - Delete Product4:19
AXUM API - Update Product8:27
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
Style Form1:50
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: