Blog
Tauri in Hoppscotch codebase.

Tauri in Hoppscotch codebase.

In this article, we review Tauri in Hoppscotch codebase. We will look at:

  1. What is Hoppscotch?

  2. What is Tauri?

  3. Tauri in Hoppscotch codebase.

I study patterns used in an open source project found on Github Trending. For this week, I reviewed some parts of Hoppscotch codebase and wrote this article.

What is Hoppscotch?

Hoppscotch is an open source API development ecosystem —  https://hoppscotch.io. It is an alternative to Postman, Insomnia.

Check out the Hoppscotch documentation to learn more.

What is Tauri?

Tauri is a framework for building tiny, fast binaries for all major desktop and mobile platforms. Developers can integrate any frontend framework that compiles to HTML, JavaScript, and CSS for building their user experience while leveraging languages such as Rust, Swift, and Kotlin for backend logic when needed.

Get started building with create-tauri-app by using one of the below commands. Be sure to follow the prerequisites guide to install all of the dependencies required by Tauri. For a more detailed walk through, see Create a Project

Why Tauri?

Tauri has 3 main advantages for developers to build upon:

  • Secure foundation for building apps

  • Smaller bundle size by using the system’s native webview

  • Flexibility for developers to use any frontend and bindings for multiple languages

Learn more about the Tauri philosophy in the Tauri 1.0 blog post.

Check oiut Tauri documenation to learn more about Tauri.

Tauri in Hoppscotch codebase.

You will find the following project structure in hoppscotch/packages/hoppscotch-agent/src-tauri/

Tauri documentation already explains this in Project Structure.

In this case, the JavaScript project is at the top level, and the Rust project is inside src-tauri/, the Rust project is a normal Cargo project with some extra files:

  • tauri.conf.json is the main configuration file for Tauri, it contains everything from the application identifier to dev server url, this file is also a marker for the Tauri CLI to find the Rust project, to learn more about it, see Tauri Config

  • capabilities/ directory is the default folder Tauri reads capability files from (in short, you need to allow commands here to use them in your JavaScript code), to learn more about it, see Security

  • icons/ directory is the default output directory of the tauri icon command, it’s usually referenced in tauri.conf.json > bundle > icon and used for the app’s icons

  • build.rs contains tauri_build::build() which is used for tauri’s build system

  • src/lib.rs contains the Rust code and the mobile entry point (the function marked with #[cfg_attr(mobile, tauri::mobile_entry_point)]), the reason we don’t write directly in main.rs is because we compile your app to a library in mobile builds and load them through the platform frameworks

  • src/main.rs is the main entry point for the desktop, and we run app_lib::run() in main to use the same entry point as mobile, so to keep it simple, don’t modify this file, modify lib.rs instead. Note that app_lib corresponds to [lib.name] in Cargo.toml.

About me:

Hey, my name is Ramu Narasinga. I study codebase architecture in large open-source projects.

Email: ramu.narasinga@gmail.com

I spent 200+ hours analyzing Supabase, shadcn/ui, LobeChat. Found the patterns that separate AI slop from production code. Stop refactoring AI slop. Start with proven patterns. Check out production-grade projects at thinkthroo.com

References:

  1. https://github.com/hoppscotch/hoppscotch/tree/main/packages/hoppscotch-agent/src-tauri

  2. https://v2.tauri.app/start/project-structure/

  3. https://v2.tauri.app/