Imagine you’re a developer looking to craft a sleek, secure app that works seamlessly across different desktop platforms—Windows, macOS, Linux, you name it. Enter Tauri, a toolkit that’s got your back, letting you build apps with pretty much any frontend framework you love. Whether you’re a React fan, a Svelte enthusiast, or just vibing with plain HTML and JavaScript, Tauri makes it happen. Its core is powered by Rust for that extra oomph of performance and safety, while its command-line tools run on Node.js, blending the best of both worlds into a truly versatile setup.
Curious about how it all works under the hood? You can dive into the nitty-gritty details over at the Introduction page. But if you’re more interested in what drives this project and why it exists, stick with me here.
Getting started with Tauri is a breeze, no matter your go-to tech stack. The quickest way to kick things off is with the create-tauri-app tool. It’s like a friendly guide that sets up a new project for you, complete with ready-to-go templates for vanilla HTML, CSS, and JavaScript, or popular frameworks like React, Svelte, or even Yew.
Just pick your flavor and roll with it! You can run a simple command like `sh <(curl https://create.tauri.app/sh) --tauri-version 1` using tools like Bash, PowerShell, npm, Yarn, pnpm, Bun, or Cargo, and you’re off to the races.
If you go the create-tauri-app route, you won’t need to sweat the step-by-step setup guides—though I’d still suggest skimming one, like the HTML/CSS/JavaScript version, to get a feel for what’s happening behind the scenes. And if you’re new to web development or don’t have a favorite framework yet, that same HTML/CSS/JavaScript guide is a perfect starting point. It walks you through the simplest way to get up and running, whether you’re using Node or Cargo. So, ready to build something awesome? Let’s make it happen!
Cross-platform Desktop Application (Rust + HTML) Example
Tauri is a framework to build desktop applications with any frontend framework and a Rust core. Each app consists of two parts:
- Rust binary that creates the windows and exposes native functionality to those windows
- Frontend of your choice that produces the user interface inside the window
In the following, we will first scaffold the frontend, set up the Rust project, and lastly show you how to communicate between the two.
The easiest way to scaffold a new project is the create-tauri-app utility. It provides opinionated templates for vanilla HTML/CSS/JavaScript and many frontend frameworks like React, Svelte and Yew.
Bash:
sh <(curl https://create.tauri.app/sh) --tauri-version 1
Please note that you do not need to follow the rest of this guide if you use create-tauri-app, but we still recommend reading it to understand the setup.
Here's a preview of what we will be building:
Create the Frontend
We will create a very minimal UI using an HTML file. To keep things tidy though, let's create a separate folder for it:
mkdir ui
Next, create an index.html file inside of that folder with the following contents:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>Welcome from Tauri!</h1>
</body>
</html>
We will keep the UI minimal for this guide, but feel free to play around with more content or add styling through CSS.
Create the Rust Project
At the heart of every Tauri app is a Rust binary that manages windows, the webview, and calls to the operating system through a Rust crate called tauri. This project is managed by Cargo, the official package manager and general-purpose build tool for Rust.
Our Tauri CLI uses Cargo under the hood so you rarely need to interact with it directly. Cargo has many more useful features that are not exposed through our CLI, such as testing, linting, and formatting, so please refer to their official docs for more.
Install Tauri CLI
If you haven't installed the Tauri CLI yet you can do so with one of the below commands. Aren't sure which to use? Check out the FAQ entry.
npm:
npm install --save-dev @tauri-apps/cli@">1.0.0"
For npm to detect Tauri correctly you need to add it to the "scripts" section in your package.json file:
package.json
"scripts": {
"tauri": "tauri"
}
To scaffold a minimal Rust project that is pre-configured to use Tauri, open a terminal and run the following command:
npm
npm run tauri init
It will walk you through a series of questions:
What is your app name?
This will be the name of your final bundle and what the OS will call your app. You can use any name you want here.
What should the window title be?
This will be the title of the default main window. You can use any title you want here.
Where are your web assets (HTML/CSS/JS) located relative to the <current dir>/src-tauri/tauri.conf.json file that will be created?
This is the path that Tauri will load your frontend assets from when building for production.
Use ../ui for this value.
What is the URL of your dev server?
This can be either a URL or a file path that Tauri will load during development.
Use ../ui for this value.
What is your frontend dev command?
This is the command used to start your frontend dev server.
You can leave this blank since nothing needs to be compiled.
What is your frontend build command?
This is the command to build your frontend files.
You can leave this blank since nothing needs to be compiled.
info
If you're familiar with Rust, you will notice that tauri init looks and works a lot like cargo init. You can just use cargo init and add the necessary Tauri dependencies if you prefer a fully manual setup.
The tauri init command generates a folder called src-tauri. It's a convention for Tauri apps to place all core-related files into this folder. Let's quickly run through the contents of this folder:
Cargo.toml
Cargo's manifest file. You can declare Rust crates your app depends on, metadata about your app, and much more. For the full reference see Cargo's Manifest Format.
tauri.conf.json
This file lets you configure and customize aspects of your Tauri application from the name of your app to the list of allowed APIs. See Tauri's API Configuration for the full list of supported options and in-depth explanations for each.
src/main.rs
This is the entry point to your Rust program and the place where we bootstrap into Tauri. You will find two sections in it:
src/main.rs
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
fn main() {
tauri::Builder::default()
.run(tauri::generate_context!())
.expect("error while running tauri application");
}
The line beginning with the cfg! macro serves just one purpose: it disables the command prompt window that would normally pop up on Windows if you run a bundled app. If you're on Windows, try to comment it out and see what happens.
The main function is the entry point and the first function that gets invoked when your program runs.
icons
Chances are you want a snazzy icon for your app! To get you going quickly, we included a set of default icons. You should switch these out before publishing your application. Learn more about the various icon formats in Tauri's icons feature guide.
And that's it! Now you can run the following command in your terminal to start a development build of your app:
npm
npm run tauri dev
for more example, look at here: https://v1.tauri.app/v1/guides/getting-started/setup/html-css-js
0 comments:
Post a Comment