Setup

In order to have our fullstack project, we need some setup first:

Prerequistes

For the setup we need as prerequisites:

• Rust installed
• npm installed
• git installed

Project structure

We will have everything in the same repository. So the backend and the frontend are easier to keep in sync for code updates.

First start with a directory, let's call it fullstack-workshop and hop into this directory (and init git).

mkdir fullstack-workshop
cd fullstack-workshop
git init

After this one, create two new cargo projects within this directory.

cargo new frontend
cargo new backend

After this one, let's create a workspace! Add a top level Cargo.toml (in the fullstack-workshop directory)

[workspace]
resolver = "2"
members = [
    "frontend",
    "backend"
]

Perfect! Now the core setup stands. If you run cargo build both, the frontend and your backend crate should be build.

Install Dioxus CLI

Dioxus comes with a CLI that wraps around cargo, for providing features such as hot reloading and reading configuration from a Dioxus.toml file, if one is present.

We can just install it system-wide with cargo:

cargo install dioxus-cli

If you had problems with the setup, you can just copy the code from here