Building a Mac Desktop App with Tauri 2.0: From Web Frontend to Rust Backend
This guide walks through creating a macOS desktop application using Tauri 2.0, demonstrating how to combine any web front‑end framework with Rust for a secure, lightweight, cross‑platform executable, complete with code samples and build steps.
In this article we revisit Tauri, a framework that lets developers use any front‑end library together with a Rust core to build desktop applications.
We test the Tauri 2.0 preview by creating a simple macOS UI app. Tauri’s slogan—"build an optimized, secure, front‑end‑agnostic app for multi‑platform deployment"—now aligns with recent trends, especially as Rust’s popularity has surged.
The main advantage of Tauri is that web developers can leverage Rust’s safety while retaining the flexibility of familiar web technologies.
We gain Rust’s security and the familiarity of web development.
We start by initializing a new Tauri project, updating the Rust toolchain if needed, and selecting a single‑line starter command. The template can be generated with JavaScript (or .NET) as the view layer, while Rust remains available for backend logic.
After running the template, Tauri builds the necessary packages, compiles the Rust‑OS bridge, and launches the application as a standard macOS app in the dock.
The generated UI displays a greeting form: entering a name and clicking the button triggers a Rust command that returns a personalized message.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="styles.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tauri App</title>
<script type="module" src="/main.js" defer></script>
</head>
<body>
<div class="container">
<h1>Welcome to Tauri!</h1>
<div class="row">
<a href="https://tauri.app" target="_blank">
<img src="/assets/tauri.svg" alt="Tauri logo" />
</a>
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
<img src="/assets/javascript.svg" alt="JavaScript logo" />
</a>
</div>
<p>Click on the Tauri logo to learn more about the framework</p>
<form class="row" id="greet-form">
<input id="greet-input" placeholder="Enter a name..." />
<button type="submit">Greet</button>
</form>
<p id="greet-msg"></p>
</div>
</body>
</html>The accompanying main.js uses Tauri’s JavaScript API to invoke a Rust command:
const { invoke } = window.__TAURI__.core;
let greetInputEl;
let greetMsgEl;
async function greet() {
// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
greetMsgEl.textContent = await invoke("greet", { name: greetInputEl.value });
}
window.addEventListener("DOMContentLoaded", () => {
greetInputEl = document.querySelector("#greet-input");
greetMsgEl = document.querySelector("#greet-msg");
document.querySelector("#greet-form").addEventListener("submit", (e) => {
e.preventDefault();
greet();
});
});The Rust side defines the greet command and builds the application:
// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
#[tauri::command]
fn greet(name: &str) -> String {
format!("Hello, {}! You've been greeted from Rust!", name)
}
fn main() {
tauri::Builder::default()
.plugin(tauri_plugin_shell::init())
.invoke_handler(tauri::generate_handler![greet])
.run(tauri::generate_context!())
.expect("error while running tauri application");
}The project also includes a tauri.conf.json configuration file that defines the product name, identifier, window size, and bundle options.
{
"productName": "thenewstack",
"version": "0.0.0",
"identifier": "com.tauri.dev",
"build": { "frontendDist": "../src" },
"app": { "withGlobalTauri": true, "windows": [
{ "title": "thenewstack", "width": 800, "height": 600 }
], "security": { "csp": null } },
"bundle": { "active": true, "targets": "all", "icon": [
"icons/32x32.png",
"icons/128x128.png",
"..."
] }
}After adjusting the window identifier and title, we run the full build process, which produces a DMG and an app bundle. The resulting binary is about 10.7 MB, reflecting the default set of crates included by the template.
Conclusion
Using Tauri’s templates, developers can quickly bootstrap a desktop app that leverages any JavaScript framework while benefiting from Rust’s safety. Although the flexibility adds some complexity, Tauri remains a reliable solution for creating lightweight, cross‑platform desktop applications without the overhead of traditional Electron‑based approaches.
Compiled by: 洛逸 Author: Eoin Patrick Reference: https://thenewstack.io/tauri-mixing-javascript-with-rust-for-gui-desktop-apps/
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
21CTO
21CTO (21CTO.com) offers developers community, training, and services, making it your go‑to learning and service platform.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.