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 , and it's also used for websites like Intercom and LinkedIn. It has a 'convention over configuration' approach similar to Ruby on Rails. Snipline 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, and . app/templates/index.hbs app/templates/from-ember.hbs {{page-title "Index"}} Hello, Tauri 😄 Click here < > h1 </ > h1 < @ = > LinkTo route "from-ember" </ > LinkTo {{page-title "FromEmber"}} From Ember 🧡 Back < > h1 </ > h1 < @ = > LinkTo route "index" </ > 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 and the location of the files (relative to ) to . http://localhost:4200 src-tauri ../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 file came out at 5.4MB and the file 12.4MB. .dmg .app 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. (current_text: ) -> { current_text == { .into() } { .into() } } () { tauri::Builder:: () .invoke_handler(tauri::generate_handler![my_custom_command]) .run(tauri::generate_context!()) .expect( ); } // src-tauri/src/main.rs #![cfg_attr( all(not(debug_assertions), target_os = ), windows_subsystem = )] "windows" "windows" // Add a new function that takes a string and returns a string #[tauri::command] fn my_custom_command String String // Depending on what we receive from Ember we toggle the response if "Ping" "Pong!" else "Ping" fn main // Add the custom command so that the frontend can invoke it default "error while running tauri application" Controller { action } { tracked } { invoke } { @tracked buttonText = @action checkRust() { invoke( , { : .buttonText }).then( { .log(resp) .buttonText = resp }) } } // app/controllers/index.js import from '@ember/controller' import from '@ember/object' import from '@glimmer/tracking' import from '@tauri-apps/api/tauri' export default class IndexController extends Controller // Set the default button text 'Ping' // Create an action that will be attached to a button in the template // Invoke the Rust command and update the button text to the response 'my_custom_command' currentText this => resp console this Here's the updated template file. app/templates/index.hbs {{page-title "Index"}} Hello, Tauri 😄 Click here < > h1 </ > h1 < @ = > LinkTo route "from-ember" </ > 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? Previously published at https://www.fullstackstanley.com/articles/building-tiny-desktop-apps-with-ember-and-tauri/
