Creating Cross-Platform JavaScript App with Tauri

Cross-platform applications are becoming more popular as more devices and operating systems are integrated into our daily life. With cross-platform apps, developers can create a single codebase that works across multiple platforms, including desktop, mobile, and web. This reduces the need for developing separate apps for each platform, streamlines the development process, and allows for quicker delivery of the app.

Currently, web applications are the dominant form of software, and the majority of developers are used to using Web Frameworks such as React, Vue, and Svelte. The arrival of Cross-platform toolkits allows developers to quickly deliver their web applications to multiple platforms. The popular Cross-Platform toolkits as of now are Electron and Tauri.

In this article, we will create a Cross-Platform JavaScript Application using Tauri.

What is Tauri?

Tauri is an open-source framework for building lightweight and secure desktop applications using web technologies like HTML, CSS, and JavaScript while providing a small binary size, low memory usage, and strong security features. Tauri is designed to be easy to use and integrates with any front-end framework or vanilla web code. It supports all major operating systems, including Windows, macOS, and Linux. Tauri is community-driven, with a focus on transparency, collaboration, and empowering developers. Tauri is built on Rust, however, web developers do not need to learn the language in order to build their own cross-platform applications with it.

Why Tauri?

Why use Tauri? What about Electron?
Electron relies on Chromium, a full-featured web browser engine, which is known for the bloated size and high memory usage of the resulting application. Meanwhile, Tauri builds the application into binary using native WebView and without any dependencies on web browser engines like Chromium, therefore producing key advantages such as:

1. Smaller binary size: Tauri applications have a significantly smaller binary size compared to Electron apps, making them more lightweight and efficient.
2. Lower memory usage: Tauri consumes considerably less memory than Electron, leading to better performance and resource management on users’ systems.

Requirements

1. NodeJs and npm
2. Rust

OS-Specific Requirements

Windows

C++ build tools and Windows 10 SDK from Build Tools for Visual Studio 2022

Used components from Build Tools for VS

MacOS

CLang and macOS Development Dependencies.
Install using xcode-select — install command on terminal

Linux

C compiler and webkit2gtk

To install webkit2gtk and other dependencies, we can use the following commands:

Debian

sudo apt update
sudo apt install libwebkit2gtk-4.0-dev \
    build-essential \
    curl \
    wget \
    libssl-dev \
    libgtk-3-dev \
    libayatana-appindicator3-dev \
    librsvg2-dev

Arch

sudo pacman -Syu
sudo pacman -S --needed \
    webkit2gtk \
    base-devel \
    curl \
    wget \
    openssl \
    appmenu-gtk-module \
    gtk3 \
    libappindicator-gtk3 \
    librsvg \
    libvips

Creating a Tauri Project

To create a Tauri Project we can use the npm create tauri-app@latest command.

npm create

Input your project name, in this tutorial I will use simple-tauri-app. Then, Pick TypeScript / JavaScript as the language to be used for Frontend and npm as the package manager. For UI template and flavor, feel free to use anything provided from the selection. In this tutorial, I will use Vueas the UI template with TypeScript flavor.

Template created!

Inside the project directory, run the npm install command to install the dependencies and npm run tauri dev to run the development server.

Tauri App

After the development server is up, a window of our Tauri App will appear. Hooray, our Tauri App is fully ready for development.

Building and Distributing the Application

To build our production-ready application, we need to change the tauri > bundle > identifier value inside the tauri.conf.json file from src-tauri folder.

tauri.conf.json file

“tauri > bundle > identifier” value

Change the default value from com.tauri.dev into anything else. I will use com.simpletauri.app. Tauri will refuse to build the application if the value is the default.

After changing the identifier value, we can build our application with the npm run tauri build command. By default, the tauri build command will build the app based on the current Operating System.

The result of the build can be found inside the src-tauri/target/release/bundle directory.

For MacOS, we can specify the target architecture to build with--target flag:

• tauri build --target aarch64-apple-darwin: targets Apple silicon machines.
• tauri build --target x86_64-apple-darwin: targets Intel-based machines.
• tauri build --target universal-apple-darwin: produces a universal macOS binary that runs on both Apple silicon and Intel-based Macs.

For Windows and Linux, as of now the build can only be done with tauri build command on the respecting operating system.

Here are the possible build results based on the operating system:

• Windows: Tauri applications are distributed as Microsoft Installers (.msi files)
• macOS: Tauri applications are distributed either as Application Bundles (.app files) or Apple Disk Images (.dmg files)
• Linux: Tauri applications are distributed either as Debian packages (.deb files) or AppImages (.AppImage files)

Conclusion

Tauri offers an efficient solution for creating cross-platform JavaScript applications. By leveraging web technologies like HTML, CSS, and JavaScript, developers can build lightweight and high-performance desktop apps that work seamlessly across Windows, macOS, and Linux.

Through this tutorial, we explored how to create a cross-platform Vue.js application using Tauri, from setting up the required tools and dependencies to building and distributing the app.