Day 38: Building GUI Applications with Tauri
Blog Link, If you are not a member: Click Here
In our journey to build powerful, cross-platform applications in Rust, Tauri provides an excellent framework for creating desktop apps that are efficient, lightweight, and flexible. Yesterday, we delved into the fundamentals of cross-platform development with Rust, focusing on the benefits Rust offers in terms of security, speed, and versatility. Today, we extend these concepts to create a cross-platform desktop application using Tauri.
By the end of this tutorial, you’ll have a foundational understanding of how to set up a Tauri project, build your first GUI-based application, and explore Tauri’s capabilities in Rust-based desktop app development.
What is Tauri?
Tauri is a lightweight framework that bridges Rust and the web to create desktop applications. Unlike other desktop app frameworks, Tauri is efficient, utilizing a web frontend and Rust backend, resulting in applications that have a smaller footprint and faster startup time. Tauri is particularly popular for applications where security, performance, and cross-platform support are essential.
Key Features of Tauri:
- Small File Size: Tauri creates highly optimized applications by avoiding bundled resources, leading to a smaller app size.
- Secure: With Rust’s inherent security features and Tauri’s design, applications are safe and secure.
- Cross-Platform: Support for macOS, Windows, and Linux enables developers to reach a broad audience.
- System Integration: Access to OS-level APIs allows developers to interact with the file system, notifications, and more.
Setting Up Tauri
Before beginning, ensure that your environment is set up with Rust and Node.js. If you haven’t already, install Rust and Node.js by following the steps on their official websites.
Installation Steps for Tauri
Install Tauri CLI Open your terminal and run the following command to install Tauri’s Command-Line Interface:
cargo install tauri-cli
This tool will help manage and build Tauri projects within Rust.
Initialize a Tauri Project To create a new Tauri project, use the following command:
npx create-tauri-appYou’ll be prompted to choose a framework and some configuration options for your project.
Building a Simple Cross-Platform Desktop Application
With our Tauri project initialized, let’s explore the steps to build a simple desktop application that displays a basic graphical user interface (GUI) with essential functionality.
Step 1: Setting Up the Frontend
Tauri works with modern JavaScript frameworks (such as Vue, React, or Svelte). Here, we’ll use a simple HTML and JavaScript setup:
- Navigate to the
src-tauriDirectory
cd src-tauriCustomize Your HTML File
Open index.html in the frontend directory and add a basic layout:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Tauri App</title>
</head>
<body>
<h1>Welcome to Your Tauri Desktop App</h1>
<button id="greet-button">Click me</button>
<p id="greeting"></p>
</body>
</html>In this HTML structure, we include a title, a button, and a placeholder for displaying text.
Step 2: Adding JavaScript Interactivity
Now, add the JavaScript file that will interact with the Rust backend. Open index.js or create it if it doesn’t already exist:
const greetButton = document.getElementById("greet-button");
const greeting = document.getElementById("greeting");
greetButton.addEventListener("click", async () => {
const response = await invoke("greet", { name: "Rust Developer" });
greeting.textContent = response;
});This script listens for a button click, then invokes the “greet” function, a Rust function we’ll create shortly, passing a parameter from the frontend.
Step 3: Writing the Rust Backend
In Tauri, backend functions are written in Rust, offering both power and security. Here’s how we set up a simple function that Tauri can call.
Open main.rs in src-tauri
Add the “greet” Command
#[tauri::command]
fn greet(name: &str) -> String {
format!("Hello, {}! Welcome to Tauri!", name)
}Register the Command in main.rs
To make this function callable from JavaScript, register it in the Tauri setup function:
fn main() {
tauri::Builder::default()
.invoke_handler(tauri::generate_handler![greet])
.run(tauri::generate_context!())
.expect("error while running Tauri application");
}This Rust function takes a name parameter from the frontend and returns a greeting message. Tauri’s invoke_handler allows JavaScript functions to access Rust functions like greet.
Running and Testing Your Tauri Application
To build and test your Tauri application, follow these steps:
- Build the Project Run the following command to compile the application:
cargo tauri build
Run the Application in Development Mode For rapid iteration, use:
cargo tauri dev
Your Tauri application should open a new window with the button you added. Clicking it will trigger the Rust function, displaying the greeting message.
Exercise: Create a Tauri-Based App
With this basic app as a foundation, try enhancing it by adding more features. Here are a few ideas to explore:
- Add Form Inputs: Create fields where users can input their name or other details, then pass these values to the Rust backend.
- Integrate with System Notifications: Use Tauri’s built-in notification feature to display desktop alerts.
- File Handling: Incorporate file system access for uploading or saving files, leveraging Tauri’s API capabilities.
- Extend the JavaScript Functionality: Add further interactivity, such as dynamic content loading or theme toggles, to make your app more engaging.
These exercises can deepen your understanding of Tauri while building practical experience in cross-platform development with Rust.
Conclusion
Today’s exploration of Tauri offers just a glimpse into the potential of creating cross-platform applications with Rust. This framework allows developers to efficiently combine web-based frontends with powerful Rust backends, providing the best of both worlds in terms of performance and accessibility. With Tauri’s ability to produce secure, small-sized applications, it’s a compelling option for anyone looking to expand their toolkit in desktop development.
“If you enjoyed this story and would like to support my work, feel free to leave a tip via PayPal. Thank you!”
Cubed
Thank you for being a part of the community! Before you go:
- Be sure to clap and follow the writer ️👏️️
- Follow us: X | LinkedIn | YouTube | Discord | Newsletter | Podcast
- Create a free AI-powered blog on Differ.
- Visit our platforms: CoFeed | In Plain English | Venture | Cubed
