DEV Community

tengxgfyrz67s
tengxgfyrz67s

Posted on

Installation-and-Project-Setup

#frontend #rust #tutorial #webdev

Installation and Project Setup

Project Code：https://github.com/euv-dev/euv

euv is a Rust + WASM frontend UI framework that brings the power of reactive signals, virtual DOM, and declarative macros to the browser. This guide walks you through every step of setting up a new euv project, from installing the toolchain to running your first application in the browser.

Prerequisites

Before you begin, make sure you have the following installed on your system:

  • Rust (latest stable version) — install via rustup if you haven't already
  • wasm-pack — the build tool for Rust-generated WebAssembly
  • A modern web browser — Chrome, Firefox, Edge, or Safari

You can verify your Rust installation by running:

rustc --version
cargo --version
Enter fullscreen mode Exit fullscreen mode

If wasm-pack is not yet installed, install it with:

cargo install wasm-pack
Enter fullscreen mode Exit fullscreen mode

Creating a New Project

Start by generating a new Rust project using Cargo:

cargo new my-euv-app
cd my-euv-app
Enter fullscreen mode Exit fullscreen mode

This creates a standard Rust library project. Open the generated Cargo.toml file and update it to include the necessary configuration for a WASM project:

[package]
name = "my-euv-app"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

[dependencies]
euv = "0.1"
wasm-bindgen = "0.2"
Enter fullscreen mode Exit fullscreen mode

The crate-type = ["cdylib"] entry tells the Rust compiler to produce a dynamic library suitable for WASM. The wasm-bindgen dependency provides the bridge between Rust and JavaScript.

Adding euv

With your Cargo.toml configured, add euv to your project:

cargo add euv
Enter fullscreen mode Exit fullscreen mode

This command automatically adds the latest version of euv to your dependencies. You can verify it was added correctly by checking Cargo.toml:

cargo add euv
Enter fullscreen mode Exit fullscreen mode

Setting Up the HTML Entry Point

Create an index.html file in the root of your project (not inside src/):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My euv App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module">
      import init from './pkg/my_euv_app.js';
      init();
    </script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

The <div id="app"> element serves as the mount point where euv will render your application. The JavaScript import loads the compiled WASM module and initializes it.

Writing Your First euv Code

Replace the contents of src/lib.rs with the following:

use euv::*;

fn app() -> VirtualNode {
    html! {
        div {
            h1 { "Hello, euv!" }
        }
    }
}

mount("#app", app);
Enter fullscreen mode Exit fullscreen mode

This minimal example imports everything from the euv crate, defines a component function that returns a VirtualNode, and mounts it to the #app element in the DOM.

Building the Project

To compile your project into WASM, run:

wasm-pack build --target web
Enter fullscreen mode Exit fullscreen mode

This command compiles your Rust code to WebAssembly and generates JavaScript wrapper files in a pkg/ directory. The --target web flag produces output that can be loaded directly in a browser using ES modules.

After a successful build, you should see a pkg/ directory containing:

  • my_euv_app_bg.wasm — the compiled WebAssembly binary
  • my_euv_app.js — the JavaScript glue code
  • package.json — metadata for the package

Running in the Browser

For local development, you need a simple HTTP server. You can use any static file server:

# Using Python
python -m http.server 8080

# Using Node.js (with npx)
npx serve .

# Using Rust (with basic-http-server)
cargo install basic-http-server
basic-http-server .
Enter fullscreen mode Exit fullscreen mode

Then open http://localhost:8080 in your browser. You should see "Hello, euv!" rendered on the page.

Project Structure Overview

A typical euv project has the following structure:

my-euv-app/
├── Cargo.toml          # Project configuration and dependencies
├── Cargo.lock          # Locked dependency versions
├── index.html          # HTML entry point
├── src/
│   └── lib.rs          # Main application code
├── pkg/                # Generated WASM output (after build)
│   ├── my_euv_app_bg.wasm
│   └── my_euv_app.js
└── target/             # Rust build artifacts
Enter fullscreen mode Exit fullscreen mode

Using the Rendering Features

euv's renderer uses incremental rendering to efficiently update the DOM. It employs Keyed Diffing to minimize unnecessary DOM operations when lists change, and event delegation to efficiently handle events on many elements without attaching individual listeners.

When you call mount("#app", app), euv takes the VirtualNode returned by your app function and renders it into the DOM element matching the #app selector. On subsequent updates, the virtual DOM diffing algorithm computes the minimal set of changes needed.

Understanding the Virtual DOM

At the core of euv is the VirtualNode type, which has several variants:

  • Element — a standard HTML element like div, span, or h1
  • Text — a plain text node
  • Fragment — a collection of nodes without a wrapper element
  • Dynamic — a node that can change reactively
  • Empty — renders nothing

Each element is identified by a Tag enum:

  • Element(String) — a standard HTML tag name
  • Component(String) — a custom component name

This virtual representation allows euv to compute efficient diffs between renders.

Next Steps

Now that your project is set up and running, you can explore the core concepts of euv:

  • Reactive Signals — learn how use_signal, computed!, and watch! power reactive UIs
  • The html! Macro — master the declarative syntax for building virtual DOM trees
  • The class! Macro — style your components with CSS classes, pseudo-classes, and media queries
  • Component System — build reusable components with props and children

Each of these topics is covered in detail in the following articles in this series.

Project Code：https://github.com/euv-dev/euv

Top comments (0)