Try Tauri
I want to tell you about one of my favorite Opensource projects: Tauri. This is an environment for creating desktop and mobile applications in JavaScript, but fast and lightweight. With optional additions in Rust, and through it in all other languages.
Advantages.
Supported by Lin, Vyn and Dryun and all kinds of Yablo. The HelloWorld EXE weighs 1 megabyte (well, 5, if you don’t huddle in a corner like an orphan in a manor’s house). It takes up 200 MB of memory on Win 11. Some people think that's a lot. Show less. Only HelloWorld we will have this: in the upper half of the window a video from the web is playing with sound, and below it is a close button, which starts to rotate when you hover the mouse, and both of these components are rendered on the GPU.
This is achieved by the fact that Tauri does not carry a browser with it, but uses the one that is already in the system. And really, why? Windows always has an Edge engine, even if Edge itself is cut out of the shitty assembly. Android and Apple always have WebKit. Well, you can’t scare Linux users with dependencies; they require the GTK-WebView package. Even Win7/8 is supported, but it needs compatibility pack weighing ~200MB. Thus, it turns out that we will encounter only two engines – Chrome and WebKit, and the year is 2024, so the difference between them is not that significant.
The second nice thing about Tauri is its flexibility. A full-featured GUI application on it can be written either entirely in Rust, without a line in JS, or entirely in JS, with exactly one line in Rust. Therefore, you don’t need to know Rust at all to use it. Tauri provides API modules to the JS space for operations that are not available from the browser – such as direct access to files and hardware.
Zrada! The ability to work only in JS appeared in Tauri 2, which was released about a year ago. Therefore, there are still many links on the Internet to the documentation of the first version, where it is written that this is all impossible.
Compared to the somewhat similar PyWebView, Tauri does not have a folder with files that you need to carry with you or unpack every time you start it, does not annoy antivirus software by unpacking it, and does not require an open port to work.
Well, beginners will be pleased with the generator of new projects with support for TypeScript, React, Vue, the devil with and without horns. Because there's a Vite under the hood. There is a Hot Reload during development.
Let's get started
So, enough of me pretending to be an Oriflame salesman here, let’s start coding. Now I mean that the reader – Chukchi front-end developer, he doesn’t know and doesn’t want Rust, but runs under Windows. And uses PowerShell. For the rest, here it is official instructions.
Install Rust. Let's go to his website and download the rustup utility (64 bit), which is essentially a Rust installer. We set everything to default. Under Windows, Rust uses the Microsoft compiler, which in turn comes with a large pack of libraries, so the installation will take a long time and download a lot.
Now let's install NodeJS for its npm utility. Open a terminal and type winget install OpenJS.NodeJS.LTS It will work – good. If winget has fallen off again, download NodeJS from his website.
I'll leave the text editor at your discretion. For VSCode there is an extension for Rust (rust-analyzer) and a separate one specifically for Tauri, and Better TOML is also useful.
Let's check. Enter in the console cargo -V (big) later npm -v (small). If it displays version numbers, then everything is fine.
There is no need to install Tauri itself, it is downloaded into the project.
Let's create a project.
Zrada! Even if you are going to write in JavaScript, you should choose TypeScript when creating a project. This is because for the TypeScript project Vite and other goodies are installed, and the JavaScript project is super minimalistic. To start writing in JavaScript in a TypeScript project, just rename the file from .ts to .js
Open in PowerShell the folder where we have the crafts and type npm create tauri-app@latest We will be asked several questions, everywhere we need to select “TypeScript” “Vanilla” and the rest by default. When creation is finished, you need to go to the project folder, type once npm install and then npm run tauri dev Our test project will be assembled and launched! Now, without turning it off, open the file in the project index.htmlchange something in it (heading in h1 for example) and save it. We will immediately see changes in the running application. By the way, by right-clicking in the application, a menu with debugging tools is available. It is only available in the debug build.
Let's walk through the created project. At our root lies index.html. This is the HTML of the application's main window. To be honest, I don’t know why it was moved here, since the rest of the web part has been put into a folder src. We also see people I hope you know package.json and folder node_modules – traces of npm life. To folder dist intermediate stages of packaging are included, this folder does not need to be backed up or placed in git. But the meatiest part is in the folder src-tauri.
In it: cargo.toml – the main file of our project. You need to go into it and enter the name of the application, version and author – this data will go to the metadata of the EXE file. At the same time, in the dependencies section, make sure that you have the second version of tauri, otherwise there were strange precedents.
There is no need to touch cargo.lock with your hands, there is a list of actually used Rust packages.
Folder target – the compilation results go there. This is the folder that does not need to be backed up or put in git. If you run the command in the root of the project npm run tauri build then in the folder target/release The final version of our program will appear, with all the resources packed inside. Moreover, in the folder release/bundle there will be a program packaged in .msi. Moreover, this is a smart installer that will check and offer to download all dependencies.
Folder icons contains the icon of our program in versions for all platforms. Fortunately, we don’t have to do this mess with our hands. We need one 1024 pixel PNG icon with transparency in interesting places. Then in the project root we call npm run tauri icon /path/to/app-icon.png and all kinds of icons will appear on their own.
IN src-tauri/src The sources are located directly on Rasta. We will hardly touch them today. But you can look in and be amazed at the minimalism. Changes to source codes on Rasta are not picked up on the fly; the application must be restarted.
Setting up Tauri
And finally the file tauri.conf.jsonAnd capabilities – part of it. This is a very important config for Tauri itself. Let's open it.
productname, version, identifier used when assembling for mobile phones. The identifier must be unique in the world, so be creative.
app - withGlobalTauri This is a crutch enabled by default. Let's write there false and will immediately do as it should (I’ll show you below).
window – these are the main parameters application windows. There are actually a lot of them. Or, on the contrary, you can remove the window from here and create it from the code, but that’s for another time.
The rest doesn't matter now.
Let's code!
I won't teach you how to code in JavaScript. Instead, let's show you how to do without a backend on growth, with just JS. For this we need so-called “plugins”, they give us access to the system.
Opening src/main.ts. There is already one plugin here: api/core. It allows you to transfer data on the fly between the back on the rise and the front. It would, of course, be possible to open a socket for this purpose in any other way, but through a plugin it is much easier and faster. Let's see what happens. Import a function from the plugin invoke and call it with an argument "greet". What kind of greeting is this? This is a function declared in the file src-tauri/lib.rsand the macro #[tauri::command] makes it accessible from JS.
Zrada! If you still code in Rasta, then remember that when working with Tauri you need to use npm as much as possible, and call cargo only for the most Rasta operations like cargo add. Otherwise, from time to time, ephemeral bugs with an uncertain position in space appear. The documentation contains whole section about this.
Let's instead of a function in Rasta, read the text from a file. Let's create a text file, I will have this E:/name.txt. Responsible for working with files fs plugin.
Unlike the plugin corewhich is always there, most plugins need to be installed and then enabled. First, in the root of the project we type npm run tauri add fs and then in capabilities/default.json we do
"permissions": [
"core:default",
"shell:allow-open",
"fs:default",
{
"identifier": "fs:allow-open",
"allow": [{ "path": "**" }]
},
{
"identifier": "fs:allow-read",
"allow": [{ "path": "**" }]
}
]
We allowed ourselves to read from any file on the system. It is better, of course, to limit the paths whenever possible. That's it, now in main.ts you can change the greet function to read from a file.
import { open } from "@tauri-apps/plugin-fs";
async function greet() {
if (greetMsgEl && greetInputEl) {
// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
const file = await open("E:/name.txt" );
const buf = new Uint8Array(20);
const numberOfBytesRead = await file.read(buf); // 11 bytes
const text = new TextDecoder().decode(buf); // "hello world"
await file.close();
greetMsgEl.textContent = "Да здравствует товарищ" + text;
}
}
That's it. Let's start again npm run tauri dev if turned off. Now, when you click the button, the name from the file should be welcomed.
