DEV Community

stereobooster
stereobooster

Posted on • Originally published at stereobooster.com on

Tauri instead of Puppeteer or Playwright?

#tauri #rust #cli #webdev

Tauri and Puppeteer/Playwright have different use cases. So it seems nothing to compare. But there is (at least) one use case where you may try to use Tuari instead of a headless browser - “snapshots”. For example:

Why? Because Tauri uses provided by OS browser and produces small binaries (let’s say ~10 MB). While Puppeteer and Playwright need a full browser (let’s say ~200 MB). And Tauri probably can be faster.

Experiment

Let’s see if this will work in practice. For an experiment, I decided to recreate cytosnap with Tauri. Functionality is trivial:

  • read input from file or STDIN (Elements JSON)
  • generate a graph with the help of Cytoscape.js
  • write result (image from canvas) to file or STDOUT
  • and this is supposed to be CLI, not GUI-app

CLI

CLI applications are not a typical use case for Tauri, but it is possible.

Hide window (tauri.conf.json):

"windows": [{ "visible": false, ...
Enter fullscreen mode Exit fullscreen mode

Hide icon from Dock bar (Mac OS only):

#[cfg(target_os = "macos")] use tauri::ActivationPolicy; tauri::Builder::default() .setup(|app| { #[cfg(target_os = "macos")] app.set_activation_policy(ActivationPolicy::Accessory); Ok(()) })
Enter fullscreen mode Exit fullscreen mode

Add CLI arguments (tauri.conf.json):

 "cli": { "description": "Render graphs on the server side with Cytoscape.js, getting image file as output", "args": [ { "name": "source", "short": "s", "takesValue": true, "multiple": false, "multipleOccurrences": false }, { "name": "destination", "short": "d", "takesValue": true, "multiple": false, "multipleOccurrences": false } ], },
Enter fullscreen mode Exit fullscreen mode

Overcome security fences

Because Tauri’s main use case is GUI, they care about security and limit what files/folders the application can access. Which doesn’t work for the way people use CLI. So I had to write my own Tauri commands to write and read files, for example:

#[tauri::command] fn write_destination(dst: String, res: String) -> Result<String, String> { if dst == "" { print!("{}", res); Ok(String::from("ok")) } else { let bytes = base64::engine::general_purpose::STANDARD.decode(res); let path = absolute_path(PathBuf::from(dst)).unwrap(); match bytes { std::result::Result::Ok(v) => { std::fs::write(path, v).unwrap(); Ok(String::from("ok")) } std::result::Result::Err(e) => Err(e.to_string()), } } }
Enter fullscreen mode Exit fullscreen mode

Note : I need to pass binary data from the front end to the rust, so I use Base64.

Distribution

Initially, I wanted to distribute this CLI as binary inside the npm package. But then I realized that Tauri can’t really produce portable binaries. Tauri relies on the OS’s browser - which is a neat trick to shrink down the size of the binary, but this is what makes it less portable. Trade-offs as always.

Not to stop an experiment I decided to distribute at least binary for Mac OS in npm. And it works (Mac OS only):

npx @stereobooster/cyto-snap -s g2.json -d g2.png
Enter fullscreen mode Exit fullscreen mode

Size of the npm package 

npm notice package size: 2.9 MB npm notice unpacked size: 7.4 MB
Enter fullscreen mode Exit fullscreen mode

I didn’t do any Tauri optimizations, so it probably can be smaller. Also, this is Mac OS-only binary, it will be bigger if we pack binaries for all platforms in one npm package.

And it has 0 dependencies.

Source code

Warning : because this is an experiment, I didn’t try to make it perfect. Just made it work.

Source code: https://github.com/stereobooster/cyto-snap

Next steps

Homebrew

The idea of distributing binary in npm failed, so I think to try to distribute it via Homebrew. Homebrew works on Mac OS, Windows (WSL 2), and Linux (though they have their own package managers).

  • Produce standard desktop installers for Tauri (tauri-apps/tauri-action)
  • Upload installers to GitHub releases
  • Run installers in silent mode with the Homebrew formula

Full automation with GitHub Actions

It has a lot of steps to produce the final package. I started automation but didn’t finish it. Ideally, it should:

  • Build application
  • Run tests (I do integration tests with odiff)
  • Create a tag and push it
  • Create release and upload all binaries
  • Update the Homebrew formula and publish it
  • Publish the npm package (but it is not very useful without portable binaries)

Conclusion

  • This approach may work with Homebrew distribution
    • It is sad that you can’t publish binaries to npm, which would make JS-developer use other means to install it (Homebrew, apt-get, cURL, etc)
    • On the other hand, it is fully independent of npm (and Node.js ecosystem in general), so can be used by none-JS developers
  • This was my first time using Tauri, and it is awesome

Top comments (0)