Building a System Monitor: A Project-Based Approach with Tauri

Executive Summary

Dive into the world of desktop application development with Tauri! This project-based **Tauri system monitor tutorial** guides you through creating a cross-platform application that displays real-time system information such as CPU usage, memory consumption, and process statistics. We’ll leverage Tauri’s power to build a native application with web technologies (HTML, CSS, JavaScript) and Rust. You’ll learn about inter-process communication, frontend design, and Rust backend development, ultimately equipping you with the skills to build performant and visually appealing desktop applications 🎯. This tutorial is perfect for developers looking to explore Tauri and build practical, real-world applications.

Ever wondered how those sleek system monitoring tools work their magic? This tutorial peels back the layers, offering a hands-on approach to building your very own. We’ll be using Tauri, a toolkit for building highly performant desktop applications that can rival the performance of native apps. So, let’s embark on this journey to craft a system monitor that’s not only functional but also a testament to the power of modern web technologies and Rust’s robustness.✨

Setting Up Your Tauri Development Environment

Before we dive headfirst into the code, let’s ensure our development environment is primed and ready. This involves installing the necessary tools and setting up a new Tauri project. Don’t worry, we’ll walk through each step meticulously.

• Install Rust: Tauri leverages Rust for its backend, so you’ll need the Rust toolchain installed. Visit https://www.rust-lang.org/tools/install for instructions specific to your operating system. Make sure you install stable version.
• Install Node.js and npm: Tauri uses Node.js and npm (or yarn/pnpm) for frontend tooling. Download the latest LTS version from https://nodejs.org/.
• Install Tauri CLI: The Tauri CLI simplifies project creation and management. Open your terminal and run: npm install -g @tauri-apps/cli.
• Create a New Tauri Project: Navigate to your desired project directory in the terminal and run: tauri init. Follow the prompts to configure your project. Choose a descriptive name for your app (e.g., “system-monitor”), select “vanilla” for the frontend template, and choose a frontend dev command (e.g., “npm run dev”) and a build command (e.g., “npm run build”).
• Install system information crates: add dependencies to your Cargo.toml sysinfo = "0.29" and serde_json = "1.0" to serialize the data to send to the Frontend

Fetching and Displaying CPU Usage 📈

Now, let’s get our hands dirty with some actual code. We’ll start by retrieving CPU usage data using the `sysinfo` crate and sending it to the frontend for display. This involves writing Rust code to fetch the data and JavaScript to update the UI.

• Add `sysinfo` dependency: Open your `Cargo.toml` file and add `sysinfo = “0.29”` to the `[dependencies]` section. This crate provides access to system information.
• Write Rust code to fetch CPU usage: In your `src/main.rs` file, add the following function to retrieve CPU usage:

  
  use sysinfo::{System, SystemExt, CpuExt, CpuRefreshKind};
  use serde_json::json;
  
  #[tauri::command]
  fn get_cpu_usage() -> String {
      let mut system = System::new_all();
      system.refresh_cpu_specifics(CpuRefreshKind::new().with_cpu_usage()); // Refresh CPU usage
      let cpu_usage: f32 = system.cpus().iter().map(|cpu| cpu.cpu_usage()).sum::() / system.cpus().len() as f32;
      json!({ "cpuUsage": cpu_usage }).to_string()
  }
  

• Register the command: In `main.rs`, modify the `main` function to register the `get_cpu_usage` command:

  
  fn main() {
      tauri::Builder::default()
          .invoke_handler(tauri::generate_handler![get_cpu_usage])
          .run(tauri::generate_context!())
          .expect("error while running tauri application");
  }
  

• Write JavaScript code to display CPU usage: In your `src/index.js` file, add the following code to call the Rust command and update the UI:

  
  import { invoke } from '@tauri-apps/api/tauri'
  
  async function updateCpuUsage() {
      const cpuData = await invoke('get_cpu_usage');
      const cpuJson = JSON.parse(cpuData);
      document.getElementById('cpu-usage').textContent = `CPU Usage: ${cpuJson.cpuUsage.toFixed(2)}%`;
  }
  
  setInterval(updateCpuUsage, 1000); // Update every 1 second
  

• Update the HTML: add <div id="cpu-usage"></div> to your index.html file

Monitoring Memory Usage 💡

CPU is only half the story. Let’s add memory usage monitoring to our system monitor. This involves similar steps to CPU usage, but we’ll be using different functions from the `sysinfo` crate.

• Write Rust code to fetch memory usage: Add the following function to `src/main.rs`:

  
  #[tauri::command]
  fn get_memory_usage() -> String {
      let mut system = System::new_all();
      system.refresh_memory();
      let total_memory = system.total_memory();
      let used_memory = system.used_memory();
      let memory_usage: f64 = (used_memory as f64 / total_memory as f64) * 100.0;
  
      json!({ "memoryUsage": memory_usage }).to_string()
  }
  

• Register the command: Add `get_memory_usage` to the `invoke_handler` in `main.rs`. It should look like this: .invoke_handler(tauri::generate_handler![get_cpu_usage, get_memory_usage])
• Write JavaScript code to display memory usage: Add the following to `src/index.js`:

  
  async function updateMemoryUsage() {
      const memoryData = await invoke('get_memory_usage');
      const memoryJson = JSON.parse(memoryData);
      document.getElementById('memory-usage').textContent = `Memory Usage: ${memoryJson.memoryUsage.toFixed(2)}%`;
  }
  
  setInterval(updateMemoryUsage, 1000); // Update every 1 second
  

• Update the HTML: add <div id="memory-usage"></div> to your index.html file

Adding Process Monitoring ✅

Now let’s make it possible to list running processes.

• Write Rust code to fetch running process: Add the following function to `src/main.rs`:

  
  use sysinfo::{ProcessExt, ProcessRefreshKind};
  
  #[tauri::command]
  fn get_processes() -> String {
      let mut system = System::new_all();
      system.refresh_processes_specifics(ProcessRefreshKind::new());
  
      let processes: Vec = system.processes().iter().map(|(pid, process)| {
          json!({
              "pid": pid,
              "name": process.name(),
              "cpu_usage": process.cpu_usage(),
              "memory_usage": process.memory()
          })
      }).collect();
  
      json!(processes).to_string()
  }
  
  

• Register the command: Add `get_processes` to the `invoke_handler` in `main.rs`. It should look like this: .invoke_handler(tauri::generate_handler![get_cpu_usage, get_memory_usage, get_processes])
• Write JavaScript code to display processes: Add the following to `src/index.js`:

  
  async function updateProcesses() {
      const processesData = await invoke('get_processes');
      const processes = JSON.parse(processesData);
  
      const processListElement = document.getElementById('process-list');
      processListElement.innerHTML = ''; // Clear the previous list
  
      processes.forEach(process => {
          const listItem = document.createElement('li');
          listItem.textContent = `${process.name} (PID: ${process.pid}, CPU: ${process.cpu_usage.toFixed(2)}%, Memory: ${process.memory_usage} KB)`;
          processListElement.appendChild(listItem);
      });
  }
  
  setInterval(updateProcesses, 5000); // Update every 5 seconds
  

• Update the HTML: add <ul id="process-list"></ul> to your index.html file

Styling Your System Monitor with CSS

A functional system monitor is great, but a visually appealing one is even better! Let’s add some CSS to make our application look more polished. Feel free to experiment with different styles to personalize your monitor.

• Create a `style.css` file: Create a new file named `style.css` in your `src` directory.
• Add CSS rules: Add CSS rules to style the CPU usage, memory usage, and other elements. Here’s a basic example:

  
  body {
      font-family: sans-serif;
      background-color: #f0f0f0;
      padding: 20px;
  }
  
  #cpu-usage, #memory-usage {
      margin-bottom: 10px;
      font-size: 16px;
  }
  
  #process-list {
      list-style: none;
      padding: 0;
  }
  
  #process-list li {
      padding: 5px;
      border-bottom: 1px solid #ccc;
  }
  

• Link the CSS file in `index.html`: Add the following line to the “ section of your `index.html` file:
  <link rel="stylesheet" href="style.css">

FAQ ❓

• Q: What are the advantages of using Tauri over Electron for building desktop applications?

  Tauri applications are generally smaller and more performant than Electron applications. Tauri leverages Rust for the backend, resulting in lower memory footprint and faster execution. Additionally, Tauri offers better security due to its isolated and sandboxed nature.

• Q: Can I use other frontend frameworks like React or Vue with Tauri?

  Absolutely! Tauri is compatible with various frontend frameworks, including React, Vue, and Svelte. You can choose the framework you’re most comfortable with and integrate it seamlessly into your Tauri project.

• Q: How do I package and distribute my Tauri application?

  Tauri provides tools for packaging your application for different platforms, such as Windows, macOS, and Linux. You can use the Tauri CLI to build installers and executables for easy distribution to your users.

Conclusion

Congratulations! You’ve successfully built a basic system monitor using Tauri. This **Tauri system monitor tutorial** demonstrated how to fetch system information, send it to the frontend, and display it in a user-friendly manner. Remember that this is just the beginning. You can extend this project further by adding more features, such as network monitoring, disk usage visualization, and process management. Embrace the power of Tauri and continue exploring its capabilities to create even more sophisticated and performant desktop applications. This project provided you a foundation for building more complex desktop applications with Rust and web technologies. Practice and experiment with new features to become proficient.

Tags

Tauri, System Monitor, Rust, Frontend, Cross-Platform

Meta Description

Learn how to build a robust, cross-platform system monitor application using Tauri. This **Tauri system monitor tutorial** guides you through a project-based approach.