How Tauri Turns Web Designs into Compact Native Apps
“Open source, small secure and why burn down the world?” — Listening to one of the key developers of Tauri describe his motivations on a Changelog podcast made me reflect on how developers choose to make small native apps. Tauri was built for the “security-focused, privacy-respecting, and environmentally-conscious” (that is, small and less power consuming) software engineering community. How does that map to average developer decisions?
Working out the best technology to write a maintainable app with ends up being a balance between where you are, what you know as well as what’s available.
If you develop behind a corporate firewall, you may have to make do with whatever your curtailed reality allows. Small apps are usually tools, and some of these need to know about your system in a way that web-based tools are not trusted to do. But just for efficiency, using the native UI and windowing system of the target machine makes sense.
So where does Tauri fit in?
Tauri is a framework to build desktop applications with any frontend framework and a Rust core. Each app consists of two parts:
- A Rust binary that creates the windows and exposes native functionality to those windows
- A web frontend of your choice that produces the user interface inside the window
A Tauri elevator pitch may sound slightly contradictory at first – use web technologies to build native apps. Obviously, the best way to display HTML, JS and CSS is in a browser — but that isn’t the end of the story. These technologies have become the de facto methods of putting information on a screen, and it is now legitimate to use them to build UI regardless of the target. This idea has evolved; I’m writing this with the Notion app, which is wrapped in Electron, which shares the same initial concepts. (Having said that, the Notion app is a whopping 668MB!)
The core of Tauri is written in Rust, which is a new language for me, but I don’t intend to get too involved with that. In a simplistic sense, the Rust core controls the native windowing and message passing, allowing a simulation of a browser for web-like components. While this type of modular hand-off tends to make for complex architectural diagrams, it does make for a more orderly approach at a local level. UI concerns are well separated from OS concerns etc. If I see a candlestick in the garden, I know I’m playing Cluedo — because it has no business being there otherwise.
💡 Tauri is a framework to build desktop applications with any frontend framework and a Rust core.
I’ll follow the steps in the guide with my mac. I know one prerequisite is Rust, but I also figure my node setup is totally out of date.
From my shell, I check I have the all-important Xcode libraries:
> xcode-select --install
Now I already have the node version manager (nvm) installed, but I thought I would install a newer but stable node:
> nvm install v16.16.0
And I get a compatible version of npm thrown in.
Then I go for Rust itself:
> curl --proto '=https' --tlsv1.2 [https://sh.rustup.rs](https://sh.rustup.rs/) -sSf | sh
So after reloading the shell, and seeing the word “cargo” already, I now have a more rusty Mac. If you guessed that Cargo is Rust’s build system and package manager, you guessed correctly.
After a strange bug that was fixed by fiddling with my registry settings, I was able to use npm as suggested by the guide. I chose a nice vanilla build from the questions asked that are used to set up a configuration:
> npm create tauri-app
So let’s run the development process:
> npm run tauri dev
And I got the very nice default app below. It has a little bit of logic in a count button (it increases when you press it) and it opens the appropriate web page in an external browser if you click on either of the two icons. Otherwise, it is just a nice native window.
We can also make a release build, that will build a fully installable application:
> npm run tauri build
The resulting .dmg file that was created allowed me to install via a drag into the Applications folder in the normal Mac way, as my Launchpad search confirms:
This was a 9MB file inside my Applications folder. Small enough. So I made a very simple app, but the toolchain was comprehensible and fairly quick on my elderly machine.
Before I leave, let’s see if we can use Tauri to make the app a bit smaller. I note that an “allowlist” in “tauri.conf.json” mentions which modules will be built. Now the only special bits this app needs is the ability to open an HTML page on an external browser, so using the documentation, I tried this quick hack:
And the resulting build went down to a size of 8MB, which was still functional.
From 9MB to 8MB is certainly an effective crash diet, more importantly, underlining how relatively easy it is to control the size.
Now to delve deeper would involve a little more familiarity with Rust, but that language is in vogue at the moment so it would likely be a rewarding task. As I mentioned, Tauri is more of a methodology with some tools, as opposed to a complete platform approach. It looks like a strong option for engineering teams looking to turn web designs into small apps.