An Interest In:
Web News this Week
- April 20, 2024
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
Building small desktop apps with Ember.js and Tauri
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 applicationsat 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 indexember 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=productionnpm 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.jsimport 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!
Original Link: https://dev.to/mitchartemis/building-small-desktop-apps-with-ember-js-and-tauri-3o28
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To