Trying to Tauri on Rust : 1. min-min-project (^-^

4 min readSep 24, 2021

I’m looking for a Rust GUI.
There were a lot of great GUI toolkits. But in the end, the “IME” becomes the key point. I want to input Japanese at least without stress.

The “IME” stands between the user’s input and the app and does the conversion of multibyte characters. “haru ha akebono” → 春はあけぼの

My head is especially the Win32 brain, which is anachronistic. I mainly want to make desktop apps. I can’t see my smartphone with presbyopia, the screen is narrow, and my neck hurts.😫

I thought it was an ant to go around and return to Win32. But I decided to go around half more and try the WebView type. That way, I thought IME could leave it to the front-end WebView for natural character input.

What I hesitate is that I need to assemble the front using js like Electron. Well, this is my problem.

The other is to force app users to install the WebView2 runtime, but Windows 11 seems to include this runtime, so it doesn’t seem to be a big deal.

I decided to try the beta version of Tauri.😍

Setup

I built the environment on Windows 10.
In my case, Microsoft Visual Studio C++ build tools and Node.js are already installed, so I just installed the WebView2 Runtime additionally. I think you can easily set it up on other OS.

Create a minimal project

Even Electron has only the experience of creating one window. (It’s the same as not doing anything😂!) So I decided to clearly observe the roles of html, js, and Rust.

I created a “tauri01” folder and created a “public” folder for HTML in it. I also created an “index.html” file in the public folder. (Only index.html is a fixed name.)

The following is an example of a Windows command prompt.

> mkdir tauri01
> cd tauri01
tauroi01> mkdir public
tauroi01> echo “<!DOCTYPE html><html><head><meta charset=”UTF-8"></head><body>はろータウロイ😍</body></html>”> public/index.html

Note: In the above echo, "” at both ends is written up, so it is not correct HTML, but it is enough for the experiment, so please forgive me. 😙

Multibyte characters don’t seem to display correctly without at least charset="UTF-8" .

Install Tauri CLI package

The beta announcement blog says, “Node.js is no longer required for developing Tauri apps” but I was unable to successfully install Rust CLI beta.

Create package.json

I went with yarn after all.

tauroi01> yarn init

I don’t know what the answer to this question will affect the post-build app. You can probably answer all the questions with the ENTER key.

Prepare scaffolding under the src-tauri folder

> yarn add -D @tauri-apps/cli

This will provide a scaffolding under the src-tauri folder.
When you answer the question, tauri01/src-tauri/tauri.config.json is written out.

In the middle of the question, you will be asked “What is the url of your dev server?:", But for the time being, specify the “public” folder with a relative path.

What is the url of your dev server?: ../public

“Do you want to install @tauri-apps/api?” is not needed yet.

? [YARN]: “Do you want to install @tauri-apps/api?” No

After answering, the familiar Cargo.toml` and src folders are also prepared.

Take a peek at the completed tauri01\src-tauri\tauri.conf.json.

“build”: {
 “distDir”: “../public”,
 “devPath”: “../public”,
 “beforeDevCommand”: “”,
 “beforeBuildCommand”: “”,
},

I just specified the ../public folder of "devPath".
Detailed explanation is here.

Trying running in development mode

Now I have a very small example. I will try to run.

> yarn tauri dev

When I ran it, a window opened showing the contents of public/index.html!

Since “../public” is specified for “devPath”, index.html is referenced and displayed with a relative path.
Right-click to access WebView developer tools, etc.
I don’t use the development server yet, so editing index.html and “updating” doesn’t seem to reload.