Another option for Tauri cross-ends

background

The company began to require double-code checking every day, self-checking before going to work every day, and submitting screenshots through smart form filling. The background management personnel downloaded all submission records and downloaded pictures for archiving according to the information. In the early stage, the students in the background provided a JAR package, which was downloaded by inputting commands and parameters on the console. It was ok for the students with development experience in the department to use it, but the girls in the general management department also wanted to use it. They did not want to configure Java environment, and they hoped to have an interface program for them to use. My boss asked me to see if I could turn the JAR into an interface program. The boss said so. Let’s set it up.

Communicate well with the students of JAR package development, packaging is powerless, regardless of the function is quite simple, spend a day to masturbate one.

Set the plan

The first thought is Web, Jar into API, but due to the network policy server can not connect to the Internet Web solution excluded; C#, 6-7 years of use, forget it; Flutter, who wrote an App 4 years ago, was too long to be preferred; Python, Go can only Hello World, but also need to read Excel, write files, too complex rule; Web shells, in addition to shells, are familiar with the field available, open dry.

Choose framework

Since Vue3 has been the core of the technology stack recently, the development of pages takes precedence over Vue3 + Vite. Shell words mainly have Electron, Tauri, in the impression of Electron application volume is too large, and the appeal (simple function, product volume should be small, too large is ridicule, in fact, mainly want to test the water) does not conform, exclude.

Tauri

First Encounter Tauri is the most popular item in the JavaScript Star project of 2021, ranking fifth. Due to the popularity of Vite, ESbuild, SWC and other tools, the efficient and cross-language front-end construction tools based on Go and Rust have entered the explosion stage. Coupled with the excellent experience of Bundleless, Rust and Go have become another door of front-end ER (due to their syntax and positioning, Most of the frontend is Rust. Due to Tauri’s Rust background, plus the small build product, WebView2 built in Win11, and Mac built in WebKit, we paid special attention to it (clicked a Star).

Rust prospects are still very good, such as Linux kernel to accept Rust, deno to adopt Rust, Microsoft to embrace Rust, Fuchsia Rust code accounted for more than 50%, Apple in the bottom all-in Rust, six consecutive years stackOverflow most popular language. It’s just that the bar is a little bit higher

introduce

Build smaller, faster, and more secure desktop applications with a web frontend

The official description is “build a smaller, faster, more secure desktop application with front-end technology”. In terms of technical implementation, WebView of operating system is used in the front end, and Rust is used in the back end and operating system integration. Further down the line, tao is used as an interface processing library on macOS and Windows, and GTK-based WRY is used on Linux. Although both are called WebViews, they utilize WebKit on macOS, WebView2 on Windows, and WebKitGTK on Linux.

Tauri is just one of a growing number of frameworks that everyone defaults to as an alternative to Electron as a new desktop cross solution. They both try to solve two big problems of Electron:

• Build artifacts are too large. Electron smoothes the differences at each end through Chromium and Node, and the construction product must have this part of content, resulting in tens of meters of product compression
• Large memory consumption. Chromium eats memory, and Node, which provides OS access, consumes a lot of memory and is not friendly to small projects

Both of these problems have been solved by Tauri, but the drawback of New Force is that the documentation is not perfect and the supporting system is not up to speed. All the materials are from the official website (a little shabby, enough for now).

WebView2 Microsoft has great support for it. In order to improve the experience of Office and OutLook, Windows 2101 and above will be pushed from April 2021, and Windows 11 will be built-in by default. The Runtime package is small, around 1.8MB, and uses the new Edge kernel. As Microsoft internal desktop applications gradually switch from electron to WebView2, Tauri feels like a time-stuck framework, a phenomenon-level framework for the spiral-upward development of desktop applications.

Compared with Electron

After comparison, it feels that the whole line kills in seconds, and supports bytecode delivery. Besides desktop, iOS and Android mobile terminals will be supported later. If you don’t want anything special, feel free to try.

Environmental installation

Tauri is nothing like a regular NPM package. Because of the underlying implementation, we need to have the Rust environment, which is different from the system. But you can also follow the official tutorial. So here’s the notice term

Mac

Install xcode-select –install. Install xcode-select –install. Install xcode-select –install.

Node front-end development has this environment, if not, it is recommended to go directly to the official download installation package, there is no need to do what NVM

Window 10

Install Microsoft Visual Studio C++ build tools. Make sure to select C++ x64/x86 Build Tools, C++ Build Tools, Windows SDK (the first three), otherwise the lack of Windows connector link.exe will not be able to compile.

The first Tauri App

You can create a new project directly using NPX create-tauri-app, or you can add a dependency @tauri-apps/cli to the created project, and then add commands to the scripts of package.json

// package.json
{
  // This content is just a sample
  "scripts": {
    "tauri": "tauri"}}Copy the code

If you want to add a dependency to an existing project, you need to initialize it after the installation. The src-tauri directory is generated, which contains some configuration files. Note the port number and static resource directory when selecting this directory

npm run tauri init
Copy the code

After initialization, please check the build attribute of src-tauri\tauri.conf.json file if any existing projects are added. You need to manually add Web startup and build commands

{
  "build": {
    "distDir": ".. /dist"."devPath": "http://localhost:3000".// web dev command, if the following prompt is displayed, check whether the command is correct
    // [tauri:dev] Waiting for your frontend dev server to start on http://localhost:3000/... 
    "beforeDevCommand": "npm run dev".// web build command
    "beforeBuildCommand": "npm run build"}}Copy the code

After completion, it is recommended to review the environment. The command is as follows:

npm run tauri info
Copy the code

If development Dev succeeds but Tauri Build fails, it is recommended to review the environment, especially Windows. WebView2 is not installed when C++ build tools is installed, dev is ok, but build reports rust compilation error.

Dev

Once finished, we can start the project using NPM run tauri dev. The first time we start the project, we will download some rust libraries from outside.

Build

Although Tauri is cross-terminal, the build can still only build the App of the current system. For example, Mac can only produce DMG, not exe. The platform products can be built through Github’s Actions CI. If the code is not easy to expose, consider using Docker, or building it on a machine that doesn’t work.

Mac

Mac build everything goes well, the product in/SRC – tauri/target/release/bundle directory

Windows

For Windows, build downloads a package called Wix311-Binaries. Zip, which has a high probability of failure. You can download and unzip the Issue-Build error with Wix3112 to src-tauri/WixTools

If you encountered error running light.exe window while building, find the WiX add-on language for Windows in the taur.conf. json bundle. Related issue-error running light.exe window

"windows": {
  "wix": {
    "language": "zh-CN"}}Copy the code

After the success of the building, product also in/SRC – tauri/target/release/bundle directory

Exe in the release directory can be used directly, but in the bundle directory is the installation file, so you can put some webview2 stuff in there, so the user can install it directly, regardless of the environment, or you can set it in tauri.conf.json to exclude webview2.

The policy can be adjusted according to the actual situation. I choose to provide the bare package directly without Webview2 to remind users of Windows 10 and below to install Webview2.

The next article will cover development considerations and common apis. In my opinion, Tauri is quite invasive. For example, file reading and pop-up prompts all need to call its Api. If the code is directly the same as the code on the Web side, there will be a lot of conditional judgment, increasing the complexity.

Source: tauri – – the demo app