I want to tell you about one of my favorite Opensource projects: Tauri. It’s an environment for building desktop-mobile applications in JavaScript, but fast and lightweight. With optional add-ons in Rust, and through it, all other languages.
Advantages
Supports Lin, Vyn and Drun and all sorts of Apple stuff. HelloWorld EXE-shell weighs 1 megabyte (well, 5 if you don’t shrink into a corner like an orphan in a baron’s house). It occupies 200 MB in memory on Win 11. (Of which >90% are system components shared with other programs. That’s why simple measuring tools will show 5 MB). Someone thinks that’s a lot. Show less. Only HelloWorld will be like this: in the upper half of the window plays a video from the web with sound, and under it a close button, which begins to rotate when you hover the mouse, and both of these components are rendered on the GPU.
The second nice thing about Tauri is its flexibility. You can write a fully functional GUI application on it either entirely in Rust, without a line of JS, or entirely in JS, with exactly one line of Rust. So you don’t need to know Rust to use it at all. Tauri provides API modules in the JS space for operations not available from the browser – like direct access to files and hardware.
Here we go
Install Rust. Go to its website and download the rustup (64 bit) utility, which is basically a Rust installer. Set everything by default. Under Windows Rust uses Microsoft compiler, and that in turn comes with a big pack of libraries, so the installation will take a long time and downloads a lot.
Now let’s install NodeJS for the sake of its npm utility. Open the terminal and type winget install OpenJS.NodeJS.LTS If it works – good. If winget fails again, download NodeJS from its site.
The text editor is left to your discretion. For VSCode there is an extender for Rust (rust-analyzer) and a separate one specifically for Tauri, and Better TOML will also come in handy.
Check. Type cargo -V (large) then npm -v (small) in the console. If it displays version numbers, all is well.
You don’t need to install Tauri itself, it is downloaded into the project.
Create a project
Even if you are going to write in JavaScript, you should choose TypeScript when creating a project. This is because a TypeScript project comes with Vite and other goodies, while a JavaScript project is super minimalistic. To start writing in JavaScript in a TypeScript project, just rename the file from .ts to .js and remove it from tsconfig.json.
When the creation is finished, go to the project folder, type npm install once and then npm run tauri dev Our test project will build and run! Now, without shutting it down, open the index.html file in the project, change something in it (header in h1 for example) and save it. We will immediately see the changes in the running application. By the way, right-click on the application to access the menu with debugging tools. It is available only in debug build.
Let’s go through the created project. In the root we have index.html. This is the HTML of the main application window. Frankly speaking, I don’t know why it is placed here, because the rest of the web-part is placed in the src folder. We can also see the package.json and node_modules folder – traces of npm’s life. The dist folder contains intermediate stages of packaging, this folder doesn’t need to be backed up or put into git. But the most delicate stuff is in the src-tauri folder.
It contains: cargo.toml – the main file of our project. In it you need to enter the name of the application, version and author – this data will go into the metadata of the EXE file. At the same time in the dependencies section make sure that you have the second version of tauri, because there have been strange precedents.
Target folder – this is where the compilation results go. This is the folder that should not be backed up or put into git. If you run the command npm run tauri build in the root of the project, the final version of our program with all the resources packed inside will appear in the target/release folder. Not only that, the release/bundle folder will contain the program packed in .msi. And this is a smart installer that will check and offer to download all dependencies.
In src-tauri/src are directly the sources on Rust. We will hardly touch them today. But you can take a look and be amazed by the minimalism. Changes to Rust sources are not picked up on the fly, the application must be restarted.
