A new user perspective

[g-berthiaume]

Hi,

I started following your project in 2020 after seeing Tauri Fireside #1: History and Philosophy. This week, I finally had some time to try it out­.

I'm writing this to offer you a perspective of what it feels like to get started with Tauri. This type of feedback is kinda unusual, but I hope it's helpful to Tauri's team.

Please note that I'm a system programmer, so maybe some of my problems/interrogations are due to my lack of web dev skills.

---

A journal of my questions and thoughts about Tauri, as a first-time user.

Installation

• I need to install webview2 on Windows, does this imply my user will need to also install it to use my app?
• The website is easy to navigate

I want to test Tauri without any other dependency, so I want to create a vanilla js project.

• Why do I need NPM to create a project? Why not just cargo tauri init?
• The CLI is nice and friendly.
• What does the Add "@tauri-apps/api" npm package? (Y/n) options means?
• I'm not sure what using "Tauri as a local package with npm" implies.

Exploring what files npm x create-tauri-app has produced:

• Why is there a node_modules/ directory in my project? To my (limited) understanding of Webviews, I don't understand why this is needed.
• Understanding the tauri.conf.json file seems critical, but the docs are not clear about what needs to be done to get started.
• Why does Tauri use Rust 2018 version even if I have the 2021 edition installed?
• Why is Tauri imposing formatting config with rustfmt.toml?
• The fn main() is not bloated. It's great.

Trying the dev tools

• In the section about cargo tauri dev, there's a mention of auto-reloading:

  You can make changes to your web app, and if your tooling enables it, the Webview should update automatically just like a browser.

  I'm using vanilla javascript and it doesn't seem to refresh even when I press F5.

• I get this message every time I press F5: "Asset favicon.ico not found; fallback to index.html".
  If the favicon is not found, what's the purpose of the "icons/" directory?

Building the default project

• cargo tauri build feels like magic. I'm impressed!
• When invoking my compiled binary located at .\src-tauri\target\release\test3.exe with a terminal, the app is working great.
• I was surprised about the default config resources usage: test.exe is spawning 8 processes and taking 56 MiB. 😮 This is a lot higher than I expected (bigger than Spotify!). Did I miss something? My guess is that the answer lies in the tauri.conf.json.

Modifying the project

• I'm trying to add a custom rust command as per the documentation. It doesn't seem to work: I see nothing on the console.
• In the webview console, I get the following message: "Uncaught SyntaxError: Cannot use import statement outside a module"
• The example talks about setting withGlobalTauri to true; but for me, this creates a linker error.

• Maybe I should of known this, but I needed to add the module type in the HTML: <script type="module" src="script.js"></script>.
  Now I get "Uncaught SyntaxError: Identifier 'invoke' has already been declared". Name collision maybe? Let's try commenting line 3 of the example

  // With the Tauri API npm package:
  import { invoke } from '@tauri-apps/api/tauri'
  // With the Tauri global script, enabled when `tauri.conf.json > build > withGlobalTauri` is set to true:
  // const invoke = window.__TAURI__.invoke
  
  // Invoke the command
  invoke('my_custom_command')

  Now I get "Uncaught TypeError: Failed to resolve module specifier "@tauri-apps/api/tauri"" I tried to modify the path but without success. Yet, the file seems to exist: node_modules/@tauri-apps/api/tauri.js

In the end,

• 🙂I was able to install Tauri and its dependencies (with some unanswered questions).
• 🤔I was able to create an app (with a very large footprint though)
• 🙁I was not able to create a communication link between the webview frontend and the rust backend.

---

Even though my first experience had a bit of friction, I'm still excited about Tauri's future. I think improving the documentation could help facilitate Tauri's adoption, but I recognize that good documentation is a lot to ask for an open-source project in beta.

Let me know if you have any questions and keep up your good work! Best, Gabriel

[Darunada]

I'm a new user as well and I'm bumbling my way through similar things. I think I had to fight with tauri's feature specification to get it working, currently I have withGlobalTauri false (default)

Under tauri.conf.json tauri.bundle.allowlist I added some permissions

{
    //...
    "allowlist": {
      "all": true,
      "window": {
        "all": true,
        "create": false
      }
    },
    //...
}

It seems like building the application selects which features in cargo.toml or maybe I'm just crazy. I think cli was autoremoved until I added a cli config into tauri.conf.json and then it was auto-added. Currently I'm using: tauri = { version = "1.0.0-beta.5", features = ["api-all", "cli", "window-all"] }

// this is typescript, but works
import { appWindow } from "@tauri-apps/api/window";
import { invoke } from "@tauri-apps/api/tauri";

const lib = {
  fetch: (): Promise<string> => {
    return invoke("fetch_a_thing");
  },
  send: (thing: string): Promise<string> => {
    return invoke("send_a_thing", { thing: thing});
  },
  closeWindow: () => {
    appWindow.close();
  },
};

[g-berthiaume]

Thanks for participating in the discussion @Darunada.

[jloiola]

Maybe this is better suited for the Discussion/Forum?

[amrbashir]

I'm writing this to offer you a perspective of what it feels like to get started with Tauri. This type of feedback is kinda unusual, but I hope it's helpful to Tauri's team.

This type of feedback is so helpful. We aim to increase the DX as much as we can.

• I need to install webview2 on Windows, does this imply my user will need to also install it to use my app?

Correct, but our bundler will generate an msi installer that will download and install it for users if they haven't done so already and it is pre-installed on Win11.

I want to test Tauri without any other dependency, so I want to create a vanilla js project.

• Why do I need NPM to create a project? Why not just cargo tauri init?

you don't need NPM, you can do cargo install tauri-cli --version 1.0.0-beta.7 and do cargo init. I think we added that but maybe we missed a place or two, can you tell us where so you think this info should be added ?

• The CLI is nice and friendly.

Was the questions clear enough or needs a better wording ?

• What does the Add "@tauri-apps/api" npm package? (Y/n) options means?

This a npm package that provides the tauri JS api found here, it is mainly aimed to be used with a bundler like webpack and rollup but if you don't want to use it or don't have a bundler (vanilla js) then you can just use window.__TAURI__ to access all the apis but you'd need to enable tauri.conf.json > build > withGlobalTauri: true.

• I'm not sure what using "Tauri as a local package with npm" implies.

npm or any JS package managers can install packages globally so instead of doing npm run tauri dev, you'd just do tauri dev directly but we discourage that and it should be installed locally to the current project so different projects can have different versions of the cli.

Exploring what files npm x create-tauri-app has produced:

• Why is there a node_modules/ directory in my project? To my (limited) understanding of Webviews, I don't understand why this is needed.

it has the JS dependencies of your app. if you are going vanillajs you don't need it since you want to use cargo tauri init instead of create-tauri-app as it is only used from JS package managers and we expect its users to be familiar with JS workflow and they don't want to use the tauri-cli directly through cargo and they want to use their favorite JS framework.

• Understanding the tauri.conf.json file seems critical, but the docs are not clear about what needs to be done to get started.

the generated tauri.conf.json is good to go by default and don't need tweaking but you might wanna look at this

• Why does Tauri use Rust 2018 version even if I have the 2021 edition installed?

do you mean our lib or the generated project that you will use? it doesn't matter as the next release will bump both to use 2021 edition but nothing is stopping you from changing it in the generated project now.

• Why is Tauri imposing formatting config with rustfmt.toml?

Yeah some people brought this up before and I definitely think we should remove it.

• The fn main() is not bloated. It's great.

That's possible because of the brilliant macros by @chippers @nklayman and @lucasfernog and initial spark by @parker-codes

• In the section about cargo tauri dev, there's a mention of auto-reloading:

  You can make changes to your web app, and if your tooling enables it, the Webview should update automatically just like a browser.

  I'm using vanilla javascript and it doesn't seem to refresh even when I press F5.

If you are using a devServer which most JS frameworks have then you wouldn't even need to press F5 but if you are using vanillajs you need to restart the whole app, there is a feature for implementing hot reload for it directly in our cli so you won't need to install a separate devServer.

• I get this message every time I press F5: "Asset favicon.ico not found; fallback to index.html".

your html, has a tag that tries to load a favicon. you can either remove it and you won't see the error. adding a favicon to your html in a Tauri app ia uselss anyway or just add a favicon in the distDir.

If the favicon is not found, what's the purpose of the "icons/" directory?

These are used for the app icon of the executable itself and window icon in the top left corner of your window.

• I was surprised about the default config resources usage: test.exe is spawning 8 processes and taking 56 MiB. 😮 This is a lot higher than I expected (bigger than Spotify!). Did I miss something? My guess is that the answer lies in the tauri.conf.json.

This can depend on a lot of things but actually those memory usages for spotify and tauri app is incorrect, they should be both around 300mb, spotify has more processes that you didn't include here and tauri uses Webview2 which is chromuim based so the high memory usage is expected, unfortunately we can't control that.

Modifying the project

• I'm trying to add a custom rust command as per the documentation. It doesn't seem to work: I see nothing on the console.

related to your next point.

• In the webview console, I get the following message: "Uncaught SyntaxError: Cannot use import statement outside a module"

If you are using vanillajs then you need to enable withGlobalTauri and use window.__TAURI__ instead of importing from @tauri-apps/api npm package or use <script type="module" > but it will require you to download the npm package somehow and put inside your distDir.

• The example talks about setting withGlobalTauri to true; but for me, this creates a linker error.

we would love to see the error and minimal repro if possible.

• Maybe I should of known this, but I needed to add the module type in the HTML: <script type="module" src="script.js"></script>.
  Now I get "Uncaught SyntaxError: Identifier 'invoke' has already been declared". Name collision maybe? Let's try commenting line 3 of the example

  // With the Tauri API npm package:
  import { invoke } from '@tauri-apps/api/tauri'
  // With the Tauri global script, enabled when `tauri.conf.json > build > withGlobalTauri` is set to true:
  // const invoke = window.__TAURI__.invoke
  
  // Invoke the command
  invoke('my_custom_command')

  Now I get "Uncaught TypeError: Failed to resolve module specifier "@tauri-apps/api/tauri"" I tried to modify the path but without success. Yet, the file seems to exist: node_modules/@tauri-apps/api/tauri.js

yeah you should only use one of them and not both. if vanilljs you need to go with window.__TAURI__ as it is less overhead. to use the import method you need to download the npm package manually and copy it to your distDir.

In the end,

• 🙂I was able to install Tauri and its dependencies (with some unanswered questions).

if you have any questions, don't hesitate to ask here or preferably in our discord.

• 🤔I was able to create an app (with a very large footprint though)

the final executable, memory usages or the project folder size ?

• 🙁I was not able to create a communication link between the webview frontend and the rust backend.

I guess that was because of the errors mentioned above due to your unfamiliarity with web development in general.

I think improving the documentation could help facilitate Tauri's adoption, but I recognize that good documentation is a lot to ask for an open-source project in beta.

we are aware of that and we will definitely improve it thanks to your feedback and other beta users.

[g-berthiaume]

Thanks for your thorough answer @amrbashir.

if you don't want to use it or don't have a bundler (vanilla js) [...]

it has the JS dependencies of your app. If you are going vanillajs you don't need it [...]

If you are using a devServer which most JS frameworks have then you wouldn't even need to press F5 but if you are using vanillajs you need to restart the whole app, [...]

If you are using vanillajs then you need to enable withGlobalTauri and use window.__TAURI__ instead of importing from @tauri-apps/api [...]

It seems like a lot of my problem comes from using vanilla javascript. 😅 I recognize that, as a system programmer, I'm probably not the norm. But here's why I think Tauri should support and facilitate vanilla js:

Pedagogy:
When I want to learn a new tech, I like to experiment with it with as little dependencies as possible. This is why, to me, vanilla js is my preferred option to learn Tauri. If a vanilla Tauri project would simply include dist/index.html, dist/script.js and src/main.rs, I think it would help beginners.

Philosophy
Using the word "philosophy" is a bit much, but here's my goal using Tauri: I don't want to write a Webapp that runs on the desktop. (Tauri != electron) I want to build a Rust native app that leverage Webviews as a GUI library.

This is why the minimal Tauri configuration (vanilla js) is important to me: I want to touch web frameworks as little as possible.

---

Thanks again for your answer. I don't have a lot of time right now, but I will try Tauri again soon. Also, if Tauri's team is interested, I'm willing to give you feedback when you update the documentation.

Cordialement, -Gabriel

[amrbashir]

@g-berthiaume sorry to take this long to respond back.

It seems like a lot of my problem comes from using vanilla javascript. 😅 I recognize that, as a system programmer, I'm probably not the norm. But here's why I think Tauri should support and facilitate vanilla js:

We indeed support it, we even made withGlobalTauri and window.__TAURI__ specifically for it.

These difficulties or limitations are not from tauri. it is the nature of vanillajs unfortunately. That's why the JS ecosystem have bundlers and frameworks.

Pedagogy: When I want to learn a new tech, I like to experiment with it with as little dependencies as possible. This is why, to me, vanilla js is my preferred option to learn Tauri. If a vanilla Tauri project would simply include dist/index.html, dist/script.js and src/main.rs, I think it would help beginners.

Nothing stopping you from doing this right now. just keep in mind to use window.__TAURI__ instead of importing from @tauri-apps/api.

Philosophy Using the word "philosophy" is a bit much, but here's my goal using Tauri: I don't want to write a Webapp that runs on the desktop. (Tauri != electron) I want to build a Rust native app that leverage Webviews as a GUI library.

This is why the minimal Tauri configuration (vanilla js) is important to me: I want to touch web frameworks as little as possible.

I understand the sentiment, in this case don't use create-tauri-app and do this:

cargo install tauri-cli --version 1.0.0-beta.7
mkdir tauri-app && cd tauri-app
mkdir dist && touch dist/index.html && touch dist/script.js
cargo tauri init
# 1st question => your-app-name
# 2nd question => your-app-window-name
# 3rd & 4th question => ../dist

[amrbashir]

It seems like building the application selects which features in cargo.toml or maybe I'm just crazy. I think cli was autoremoved until I added a cli config into tauri.conf.json and then it was auto-added. Currently I'm using: tauri = { version = "1.0.0-beta.5", features = ["api-all", "cli", "window-all"] }

That is correct, the cargo features are added or removed depending on your tauri.conf.json