Image source: https://github.com/tauri-apps/tauri
Tauri JS bridges the gap between web and desktop, enabling developers to craft desktop applications using web technologies like HTML, CSS, and JavaScript. This empowers them to create native desktop experiences with a focus on security, performance, and flexibility. We demonstrate Tauri's capabilities by converting Google Keep into a desktop application, showcasing its potential for efficient desktop app development.
Understanding Tauri
Tauri is an open-source toolkit that facilitates the creation of highly secure native desktop applications by bridging web technologies with native code. This enables developers to craft lightweight, fast, and secure desktop applications, offering a compelling alternative to conventional desktop development methods.
Key Features of Tauri
Enhanced Security: Security is a top priority for Tauri. By design, it enforces isolation between the front-end web view and the Rust backend, preventing untrusted scripts from accessing native functionalities. This isolation contributes to a more secure development environment.
Performance: Tauri applications are lightweight and have better performance compared to traditional web-based desktop applications.
Flexibility: Developers have the flexibility to choose their preferred front-end frameworks and tools while building applications with Tauri.
Native Integrations: Tauri offers seamless integration with native desktop features and APIs, allowing developers to access system-level functionalities.
Cross-platform: Tauri applications can be packaged for all major desktop operating systems, including Windows, macOS, and Linux. This streamlines development and deployment, allowing you to reach a wider audience with a single codebase.
Broad Framework Compatibility: Tauri embraces a polyglot approach, working seamlessly with various front-end frameworks like React, Vue.js, Angular, and more. Developers can leverage their existing web development skills and tools to create desktop applications without having to learn a new language or framework from scratch.
How does Tauri differ from Electron?
Performance: Tauri typically offers better performance due to its lightweight nature and usage of Rust for core functionalities. Electron apps, on the other hand, are known to consume more system resources.
Security: Tauri's use of Rust provides inherent security benefits, whereas Electron has faced criticism for security vulnerabilities due to its reliance on the Chromium browser engine.
Size: Tauri applications tend to have smaller file sizes compared to Electron apps, which can be advantageous for distribution and installation.
Development Experience: Both Tauri and Electron offer similar development experiences, allowing developers to build desktop applications using web technologies. However, Tauri may require familiarity with Rust for certain customizations.
Community and Ecosystem: Electron has a larger community and ecosystem due to its longer existence and popularity. Tauri, being relatively newer, is growing but may have a smaller community and fewer resources available.
Case Study: Converting Google Keep Website to a Desktop App
In this section, we will explore the capabilities of Tauri by transforming the Google Keep website into a desktop application.
Setting Up the Development Environment
To create a new Tauri app named "Google Keep," enter the following command in your command line:
npm create tauri-app
When prompted, provide the project name as "Google Keep" and select "google-keep" as the package name. Choose JavaScript as the preferred front-end language, npm as the package manager, Vanilla as the UI template, and JavaScript as the UI flavor.
Navigate to the newly created Tauri app directory:
cd "Google Keep"
Install the necessary dependencies:
npm install
Finally, open the directory in VS Code:
code .
Configuring Tauri
To integrate our Tauri application with the Google Keep functionality, you'll need to make several adjustments in various configuration files.
Firstly, navigate to the package.json file and include the following script object within the scripts section:
"scripts": {
"tauri": "tauri",
"dev": "tauri dev",
"rls": "dotenv-load tauri build",
"start": "vite"
}
In the tauri.conf.json file, locate the bundle object and modify the Identifier to Google.Keep. Additionally, insert a new key-value pair within the bundle object, assigning the category key the value Productivity.
"bundle": {
"category": "Productivity",
"identifier": "Google.Keep",
"icon": [
"icons/32x32.png",
"icons/128x128.png",
"icons/128x128@2x.png",
"icons/icon.icns",
"icons/icon.ico"
],
"active": true
}
Next, update the title of your application. Within the windows array, modify the "title" attribute to your desired name, such as "Keep".
"windows": [
{
"title": "Keep",
"width": 800,
"height": 600
}
]
Lastly, in the main.rs file, remove any unnecessary template code. The final main.rs file should resemble the following:
// Prevents additional console window on Windows in release, DO NOT REMOVE!!
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
fn main() {
tauri::Builder::default()
.run(tauri::generate_context!())
.expect("error while running tauri application");
}
These adjustments will effectively configure your Tauri application to function as the Google Keep app.
Connecting Web UI to Desktop
To establish a connection between the web user interface (UI) and the desktop application, access the index.html file and insert the web URL within the script tag:
<script>
const Web_URL = 'https://keep.google.com/';
window.location.replace(Web_URL);
</script>
Following this, rename the title of the app to "Google Keep". Then remove any pre-existing code within the body element and apply a background color to it using the styles element:
<title>Google Keep</title>
<style>
body {
background-color: #202124;
}
</style>
To finalize the setup and launch the desktop application, begin by executing npm install in the command line to install any additional dependencies required. Once installed, start the application by executing:
npm run tauri dev
Preview of the Google Keep desktop app.
Adding an icon to the Tauri project
To customize the icon for the Tauri project, we first download the desired icon and place it in the asset folder, while removing the default icons already present. Following this, we obtain the relative path of the chosen image by right-clicking on it.
Then, we proceed to the command line and execute the command below, substituting <relative path to the image> with the actual relative path, to update the app's icon to our preference:
npm run tauri icon <relative path to the image>
Preview of the Google Keep app displaying the Google Keep icon.
By completing these steps, we successfully transform the Google Keep web app into a desktop application. Further adjustments can be made by modifying the tauri.conf.json file. For instance, within the windows array object, you can enhance the app's functionality by specifying additional configurations such as fullscreen and resizable. This can be achieved by appending the following lines to the configuration object:
"windows": [
{
"title": "Keep",
"width": 800,
"height": 600,
"fullscreen": true,
"resizable": true
}
]
With these settings, the app will launch in fullscreen mode and allow users to resize the window as desired.
Conclusion
Tauri JS offers a compelling solution for developers seeking to elevate web applications to desktop experiences. With its emphasis on security, performance, and cross-platform compatibility, Tauri paves the way for a new era of desktop app development. As demonstrated through the conversion of Google Keep into a desktop app, Tauri's ease of use and robust features position it as a frontrunner in modern desktop application development.
Additional Resources
Tauri Guide