Making an Elm Desktop app with Tauri
Tags: elm, elmlang, tauri
Published: 2020-06-15 09:40:40

---
title: Making an Elm Desktop app with Tauri
published: true
description: Making an Elm Desktop app with Tauri
tags: Elm, elmlang, Tauri
//cover_image: http://noteimages.s3.amazonaws.com/jxxcarlson/tuari-app.png
---

![app](http://noteimages.s3.amazonaws.com/jxxcarlson/tuari-app.png)

I'd like to report briefly on my experience using Tauri to make a desktop version of an Elm app, provide it with access to a designated directory on disk, and package it for distribution.  

In two words: awesome & amazing!

## Setting up for dev 

Time from starting to read the docs to bringing up the app with `npx tauri dev` was about 30 minutes. Had some very quick and accurate help on Discord from the dev team. I expect a certain amount of frustration and head-banging when trying something new.  This was pleasant.

## Running the app in dev

With one exception, the app worked as it had before running under Elm-live.  The exception was some copy-paste functionality that uses ports and the `navigator` API.  This gave me one of those fun `undefined` error messages in the console. (Right click on something in the app to bring up dev tools).  I'll have to learn to use the Tauri API's.

Impressively, the other port-JS interop worked flawlessly, including (for me), the crucial `MathJax.js` library which renders LaTeX-style math formulas.

## Bundling the app

A snap.  I compiled and minified `Main.elm` as `Main.js` and copied it into `./dist`.  Ditto for `index.html` which references `Main.js` as well as one Css file and several JS files in `./assets`.  The directory `./assets` was also copied into `./dist`.  With the files in place, I ran `npx tauri bundle`.  After a while, the results were deposited as listed below:

```
$ tree -L 2 src-tauri/target/release/bundle/
src-tauri/target/release/bundle/
├── dmg
│   ├── app.dmg
│   ├── bundle_dmg.sh
│   └── support
└── osx
    └── muEdit.app
```

If you say “show package contents” for the app in osx, you find the file Contents/MacOs/app which weighs 4.9 MB. This is the executable.

## Running the bundled app

Well, it just worked!: access to local and remote web servers, operation of the pure Elm text editor, compiling and rendering Markdown and (Mini)LaTeX, to HTML, rendering of math formulas, rendering of SVG images presented as strings, etc.  And all quite snappy.

## Next steps

I need to learn how to use the Tauri JS API to give access to the file system.  The idea is for authors to be able to store all the work locally on disk as well as (if they wish) on a remote server.  Folks like to have ownership of what they create.  This may be a bit tricky: for Elm JS interop, I have to go through ports, referencing a file `outside.js`.  But to get the file API, have to say `const fs = require ...`.  And it seems that that means some contortions with `browserify`.  But it looks doable.

## Conclusion

Tauri looks like a *very* promising way to bundle web apps.  I'm looking forward to working with it more.  

## PS

If you have worked with both Elm and Tauri, please ping me here, on the Elm Slack or using gmail.  Username is jxxcarlson everywhere. Would love to discuss this.  Am also interested in Rust bindings.

## PPS (Two days later)

It is now two days since starting my experiment with Tauri.  I've implemented all the CRUD operations needed to persist documents to disk in a designated directory: create, list, read, update, and delete.  These operations are carried out by one Elm module,`Outside`, that talks to one JS file, `outside.js` via a single pair of ports.  (Murphie Randall's approach).

*So yes, we can indeed use Tauri to build Elm desktop apps with the hard disk used to preserve state.* 

I would like to thank all of those who commented on an [article I posted on Discourse](https://discourse.elm-lang.org/t/making-a-desktop-app-with-elm-deno-velociraptor-and-now-tauri/5917/32) on what turned out to be a poor initial strategy (using a localhost server). The comments on the post lead me to Tauri.

I would also like to thank the members of [Tauri](https://tauri.studio/) core team — @nothingismagick, @Laegel, and @lucasfernog — who generously gave of their time to help solve several problems and points of confusion on my part. Their help made it possible to make fast progress.

Here is the [Github repo](https://github.com/jxxcarlson/elm-editor/tree/master/demo)