Tauri vs. Electron: A comparison, how-to, and migration guide - LogRocket Blog

Tags

Top Highlights

• Creating Tauri apps Before you can get started with creating Tauri applications, you must first install some prerequisite dependencies/packages — most notably Microsoft Visual Studio C++ build tools and WebView 2 on Windows, CLang and Xcode development dependencies for macOS, and Rust regardless of OS. You can find instructions on how to set up all of this on their prerequisite page (instructions for different Linux distros are also included).

• After you have installed all of the prerequisites, you can create a new Tauri app with: npm create tauri-app

• Running this command will ask you to choose your app name, the window name, and your preferred recipe, i.e., if you’d prefer to use the basic HTML, CSS, and JavaScript or other JavaScript frameworks like React, Vue, and Svelte. For the sake of this tutorial, we’ll go with the create-react-app > create-react-app (JavaScript) recipe. Once the process is completed, you can run the app with the following command: npm run tauri dev Running this command for the first time will take a couple of seconds, and once it’s completed, you should see your new desktop app pop up in a new window, like the preview below:

• Tauri provides a useful feature called Command. It basically lets you create custom Rust functions and invoke them via JavaScript. This is particularly useful if you need to handle heavy processing or make operating system calls in much more performant Rust code. To get started with using this feature, we’ll need to define our function in the src-tauri/src/main.rs file while annotating it with #[tauri::command]. Here’s an example:

• #[tauri::command] fn sample_command() { println!("Rust code invoked from JavaScript!"); } After that, we’ll provide a list of all the commands we’ve created in the builder function, as shown below: fn main() { tauri::Builder::default() // Commands list here .invoke_handler(tauri::generate_handler![sample_command]) .run(tauri::generate_context!()) .expect("error while running tauri application"); } With all this, the full code for our main.rs file should look like this; #![cfg_attr( all(not(debug_assertions), target_os = "windows"), windows_subsystem = "windows" )] #[tauri::command] fn sample_command() { println!("Rust code invoked from JavaScript!"); } fn main() { tauri::Builder::default() // Commands list here .invoke_handler(tauri::generate_handler![sample_command]) .run(tauri::generate_context!()) .expect("error while running tauri application"); } Now, we can simply make a call to this function by using Tauri’s inbuilt invoke() function like below: import { invoke } from "@tauri-apps/api/tauri"; invoke("sample_command"); And after running this code in our project, we should see the output “Rust code invoked from JavaScript!” printed on our console.

• Desktop API Tauri includes methods for gaining access to desktop functions such as the file system, clipboard, dialog, shell, and many more, which you can easily import and use anywhere in your application. Here’s an example of how to use the clipboard’s writeText() method to copy text: import { writeText } from "@tauri-apps/api/clipboard"; const copyToClipboard = async () => { await writeText("Sample Text"); }; If you’re also familiar with the Rust programming language, you can write custom Rust methods that call operating system functions and invoke them through JavaScript, as we did earlier.

• Building the app Packaging your Tauri project as a standalone desktop application is fairly straightforward, but first, you’ll need to change the tauri.bundle.identifier in the tauri.config.json file from com.tauri.dev to your preferred unique identifier. After that, you can proceed by running the following command: npm run tauri build Running the build command, Tauri will automatically detect your operating system and generate the standalone executable app accordingly.

• npm create tauri-app

• npm create tauri-app

• npm run tauri dev

• npm run tauri dev

• npm run tauri dev