Rust, SolidJS, and Tauri: Create a cross-platform desktop app

On December 15, 2022 GitHub will calling it a day for the ATOM IDE, which holds a particular place in software program historical past as the primary actual Electron utility.

Electron allowed builders to make use of customary net applied sciences that they had been already acquainted with to construct cross-platform desktop functions for Home windows, Mac, and Linux. That is all nice for functions like Atom, VSCode, and Postman, however it isn’t at all times ideally suited. For instance, one widespread criticism of Electron apps is that they typically expend plenty of reminiscence relative to what a lower-level language, like C, C++, Rust, or Go would use.

On this article, we’ll discover Tauri, a brand new framework for constructing binaries for many main desktop platforms. Let’s get began! To observe together with our easy instance, you’ll be able to entry the complete code right here:

What’s Tauri?

Tauri is a brand new framework that gives what individuals like most about Electron however fixes lots of the safety and efficiency considerations. Tauri provides the power to design your UI utilizing net applied sciences like HTML, CSS, and JavaScript however permits you to use lower-level languages to jot down the appliance and backend logic.

On the time of writing, Tauri primarily helps Rust because the backend language, however its API might be applied throughout a number of languages. Over time, we will anticipate C, C++, Go, Ruby, Python, and even JavaScript backend bindings as customers determine to implement them.

Abstract of Tauri’s structure

Like Electron, Tauri makes use of a multi-process strategy. The Core course of is basically the backend of the appliance with all the information fashions and utility logic written in Rust. The WebView course of is the appliance UI that’s constructed within the JavaScript framework of your selection. You’ll be able to even use non-JavaScript choices like Rust utilizing Dominator or ClojureScript.

The 2 processes talk both via occasions or instructions, that are RPC calls. Both course of can emit occasions that the opposite course of can pay attention for to set off logic in a single course of when the opposite course of does a specific motion.

The WebView course of can problem instructions to set off pre-defined features within the core course of. These are important RPC Calls.

Taking Tauri for a take a look at drive

To get every little thing put in, I like to recommend following this information from the official docs. You’ll want Node.js and Rust put in. As soon as every little thing is about up, you’ll be able to create an app by operating the next command:

npx create-tauri-app

You’ll be given a number of choices of what framework or language to make use of for the WebView. For this tutorial, choose SolidJS after which the ts-sass Strong template.

cd into the brand new folder and run npm set up. Then, run npm run tauri dev, which activates the Core and WebView processes so you’ll be able to preview it at localhost:3000. The web page primarily simply shows a quantity that’s counting every second.

Take note of the terminal output as a result of there could also be libraries and environmental variables you could set up to get the app to construct efficiently. I’m working from a POP OS, and I needed to set up a number of libraries earlier than it had all of the dependencies.

The folder construction

Our app, which I’ve referred to as /Your-Tauri-App, will use the next folder construction:

/Your-Tauri-App
|
|-- /node_modules //All of the NPM Libraries
|
|-- /src // Your frontend UI Code for the WebView Course of
|
|-- /src-tauri // Your backend code for the Core course of in Rust
|
|-- .gitignore // recordsdata to be ignored by git
|-- index.html // simply the HTML file the WebView mounts to
|-- package-lock.json // lockfile for npm
|-- package deal.json // config file for npm
|-- pnpm-lock.yaml // lock file for pnpm
|-- readme.md // template readme
|-- tsconfig.json // Typescript Configurations
|-- vite.config.js // Vite configurations

Making a primary command

You’ll be able to consider instructions like writing your routes within the backend of an ordinary net utility. Nevertheless, as an alternative of utilizing fetch to make a request to a route, we’ll use invoke to name certainly one of these instructions from our frontend.

Let’s create a really primary command in /src-tauri/src/fundamental.rs:

#![cfg_attr(
  all(not(debug_assertions), target_os = "windows"),
  windows_subsystem = "windows"
)]


// Our Tauri Command
#[tauri::command]
fn return_string(phrase: String) -> String{
    return phrase
}

fn fundamental() {
  tauri::Builder::default()
    .invoke_handler(tauri::generate_handler![return_string])
    .run(tauri::generate_context!())
    .anticipate("error whereas operating tauri utility");
}

The #[tauri::command] macro turns our operate right into a command, and we register our command with the app with the invoke_handler technique within the Tauri builder.

Then, utilizing the invoke technique, we name this command from Strong. Let’s replace our App.js file:

import { invoke } from '@tauri-apps/api/tauri';
import { Element, createSignal } from 'solid-js';
import './App.scss';
import Counter from './Counter';

const App: Element = () => {
  const [counter, setCounter] = createSignal(0);
  setInterval(setCounter, 1000, (c: quantity) => c + 1);

  async operate handleClick(occasion){

    // Invoke the command from our backend utilizing the invoke operate
    const end result = await invoke("return_string", {
      phrase: "That is the argument"
    })

    // print the end result to an alert
    alert(end result)
  }

  return (
    <>
      <div>
        <h1 class="header">{counter()}</h1>
        <button onClick={handleClick}>Click on Me</button>
      </div>
      <Counter />
    </>
  );
};

export default App;

Within the code above, we import the invoke technique import { invoke } from '@tauri-apps/api/tauri';. We name invoke and move it two arguments, a string with the title of the command to invoke and an object with any argument by title.

Now, after we click on on the brand new Click on Me button, the textual content we despatched shall be despatched again, confirming that we efficiently invoked the strategy from our backend. That’s it! You’ll be able to create instructions utilizing Rust in addition to any Rust libraries to deal with information administration wants in your utility.

Constructing the appliance

On the time of writing, Tauri doesn’t help cross-compilation, so it’ll compile to no matter working system you’re at the moment on, in my case, Linux.

To allow this, all it’s important to do is run npm run tauri construct. Simply ensure that to replace the identifier property within the tauri.config.json to no matter you need.

For me, after the construct accomplished, there have been AppImage and Deb recordsdata accessible in src-tauri/goal/bundle.

Conclusion

Tauri opens up desktop apps utilizing net applied sciences and your favourite frontend framework to raised efficiency and smaller bundles. Tauri will definitely be tempting many Electron builders into making the swap for apps that want improved efficiency.

Though we simply scratched the floor of what Tauri is able to, I like to recommend studying up on the next cool options:

Pleased coding!