I recently played around with Tauri, a toolkit for development desktop apps with web technologies. Here's how I got it working with an Ember.js application.
What is Ember?
Ember.js is a frontend framework similar to React and Vue JS. I used it to build my app Snipline, and it's also used for websites like Intercom and LinkedIn. It has a 'convention over configuration' approach similar to Ruby on Rails.
What is Tauri?
Tauri is a library for making desktop applications with web technologies. Similar to Electron with a few key differences:
1) It's built in Rust rather than Javascript.
2) It uses your operating system's native web browser rather than bundling Chrome which resulting in quite tiny applications—at least compared to Electron!
Installation and development
Here are the commands I ran for a simple Ember app to test routing with Ember and Tauri. For reference, I'm using Node. 14.17.0.
Setting up Ember
npm install -g ember-cli
ember new tauri-test --lang en
ember g route index
ember g route from-ember
ember serve
I edited the two generated templates, app/templates/index.hbs
and app/templates/from-ember.hbs
.
{{page-title "Index"}}
<h1>Hello, Tauri 😄</h1>
<LinkTo @route="from-ember">Click here</LinkTo>
{{page-title "FromEmber"}}
<h1>From Ember 🧡</h1>
<LinkTo @route="index">Back</LinkTo>
That's enough to get started and test that routing works within the app. Now let's get to the good stuff.
Setting up Tauri
First, follow the set up guide for your OS in the Tauri documentation.
After this, it's a matter of adding it to your ember project - See the integration documentation.
This is what I did to get it working.
npm install @tauri-apps/cli
// Add the `tauri` command to your `package.json`
{
// This content is just a sample
"scripts": {
"tauri": "tauri"
}
}
Run through the initialisation process.
npm run tauri init
When prompted, make sure that you set the development server to http://localhost:4200
and the location of the files (relative to src-tauri
) to ../dist
.
Then it's just a matter of running the development subcommand (Make sure your Ember server is still up, too).
npm run tauri dev
And that's it! It works even with hot reloading!
Packaging
With development out of the way, here's how to package the app for distribution. I won't be looking at auto-updates in this guide, but Tauri does have support for this.
ember build --environment=production
npm run tauri build
On MacOS installer .dmg
file came out at 5.4MB and the .app
file 12.4MB.
For Windows, the generated MSI installer came to 4.9MB and the executable 8.9MB.
Communicating between Rust and Ember
Taking this one step further, I thought I'd test a simple ping/pong example of communicating between Ember and Rust. For more information check the Tauri docs.
The following code allows for Ember to pass a string to Rust, Rust checks the value and toggles between the text 'Ping' and 'Pong'. In Ember, I've added a button that displays the response text and updates it on click.
// src-tauri/src/main.rs
#![cfg_attr(
all(not(debug_assertions), target_os = "windows"),
windows_subsystem = "windows"
)]
// Add a new function that takes a string and returns a string
#[tauri::command]
fn my_custom_command(current_text: String) -> String {
// Depending on what we receive from Ember we toggle the response
if current_text == "Ping" {
"Pong!".into()
} else {
"Ping".into()
}
}
fn main() {
// Add the custom command so that the frontend can invoke it
tauri::Builder::default()
.invoke_handler(tauri::generate_handler![my_custom_command])
.run(tauri::generate_context!())
.expect("error while running tauri application");
}
// app/controllers/index.js
import Controller from '@ember/controller'
import { action } from '@ember/object'
import { tracked } from '@glimmer/tracking'
import { invoke } from '@tauri-apps/api/tauri'
export default class IndexController extends Controller {
// Set the default button text
@tracked buttonText = 'Ping'
// Create an action that will be attached to a button in the template
@action
checkRust() {
// Invoke the Rust command and update the button text to the response
invoke('my_custom_command', { currentText: this.buttonText }).then(resp => {
console.log(resp)
this.buttonText = resp
})
}
}
Here's the updated app/templates/index.hbs
template file.
{{page-title "Index"}}
<h1>Hello, Tauri 😄</h1>
<LinkTo @route="from-ember">Click here</LinkTo>
<button {{ on 'click' this.checkRust }}>{{this.buttonText}}</button>
Pretty cool! I'm excited to see where Tauri goes, and to see its plugin ecosystem grow. Should I try building a full project in it or write some more tutorials using both technologies? Let me know in the comments!
Top comments (0)