Tauri+vue develops a small cross-OS desktop application - stock examination

Recently, I plan to write a software for stock physical examination. For example, stocks with too high equity pledge ratio are unqualified, stocks with ROE less than 10 are unqualified, stocks with PE greater than 80 are unqualified, etc., just like giving people a physical examination. Do a stock check. It also implements some automatic stock selection according to technical indicators and fundamentals, backtesting of real trading points, and so on. I developed such a software with vue, and currently only I use it on the browser. Many friends told me: "You can make it a website". Not to mention anything else, this kind of website is enough for me to drink a pot!

So I want to make a desktop software on the PC side, and distribute it to my friends to install it on their own computers! Before the emergence of tauri, the first choice must be electron, "the core development language is that you can use js, vue and the like to develop desktop applications" , the visual studio code that we all know is developed using electron technology, "after the construction is completed, you can Cross-end installation. For example: windows, macos, linux are all supported" . However, the installation package developed by electron is really too large, at a few hundred MB. Some friends may say that the visual studio code installation package is only a few dozen M, but isn't it a Microsoft team? Personally, I don't have the strength to slim down the installation package. "At this time, tauri appeared, and electron has some advantages, such as support for front-end language development, support for cross-end installation, and more importantly, the use of tauri to build application installation packages generally only has a dozen MB, and the version installation files constructed in this article only have 2.9M, is also absolutely!" . So let's start the first tauri desktop application project.

1. Preparation:

The following preparations are based on Windows as the development operating system, and the tools need to be installed. It should be noted that these tools are for developers, and users of desktop applications do not need to install these tools.

1. Microsoft Visual Studio C++ Build Tools

First, you need to install the Microsoft Visual Studio C++ build tools, download address: Build Tools for Visual Studio 2022 .. This step can be said to be the most important step in the preparation of the entire tauri development environment. Almost all the previous failures of the author were due to the failure of this step. If you install the first page of the Microsoft Visual Studio C++ build tools, not the above page, but the following page, it proves that you have installed the "Visual Studio Build Tools" before. I strongly recommend that you uninstall all the "Visual Studio Build Tools" that have been installed, and then install it again to enter the above page. During the installation process, you must check all the red boxes in the above picture.

2. WebView2

The download address is webview2 . After the download is complete, follow the prompts to install it foolishly.

Tauri applications rely on webview2 for display and rendering. It stands to reason that if a user uses a desktop application developed by tauri, the user's operating system must install webview2, otherwise it cannot be displayed. "But" after my experiments with my friends, I uninstalled the webview2 runtime, and the desktop application developed by tauri can also run. This is kind of magical, I don't understand how it works yet, if anyone knows, I'd appreciate it. In short, whether users need to install this webview2 or not, as a developer, it must be installed.

3. Rust

The bottom layer of tauri is based on the rust language, so developers need to install rust. https://www.rust-lang.org/tools/install , pay attention to check the actual corresponding operating system bits: 32-bit, 64-bit. It is recommended to install a newer rust version, greater than 1.60.0, you can use runstc -V to view the rust version number. When I used the 1.60.0 version, the tauri software build failed, as shown below.

4. Install nodejs

Because the core development language of our software interface is still javascript, nodejs needs to be installed, and the version 12 or above is required. If it has been installed, use the command node -v to check the version number of nodejs

2. New tauri project

After the preparations are done, we use the following command npm create tauri-app to create a new tauri project. This command will give us some hints, and then help us create a new tauri project based on our options and templates. After the command is executed, some tauri official websites will be displayed, as well as some URL links for the preparations for building the tauri project (we have completed the preparations). The following information is prompted, so we can continue building the project by simply pressing any key on the keyboard.

 npm create tauri-app
…… 这里省略若干行提示信息
Press any key to continue...

Then we are prompted to enter the project name (app name, a new directory with the same name will be created in the current directory), windows title (that is, the application name in the upper left corner of the PC desktop software). The stock-check and "stock-check" below are the app name and windows title I entered.

 ? What is your app name? stock-check
? What should the window title be? (Tauri App) 股票体检

Then the next step is to choose the build tool used for front-end development (vue), we choose to use vite. If you don't know vite, don't panic, here we don't need to understand the usage of vite, or even understand what vite is, it is only used as a construction tool. In most scenarios of tauri desktop application development, you don't even experience its existence. The next step prompts whether to install tauri-app/api. Of course, we are developing a tauri desktop application. Of course, choose Y.

 ? Add "@tauri-apps/api" npm package? (Y/n) Y

Then prompt information, ask us which front-end framework to use for development, I choose vue. If you are proficient in react, you can also choose react. After this step is completed, the automatic generation of the code structure of the project starts, and the following content is finally displayed, which proves that our project code directory was successfully generated.

 Your installation completed.

$ cd stock-check
$ npm run tauri dev

Friends who are familiar with the development of Vue front-end projects see whether this directory structure is extra friendly. Except for the src-tauri directory, the rest is basically the same as the Vue project structure. Later, when we develop desktop applications, it is exactly the same as developing Vue projects. The src-tauri directory is more effective in the project construction and packaging process, and is rarely involved in the development process.

Third, the development environment to run the project

The new project above is completed, and the final output information prompts us:

 Your installation completed.

$ cd stock-check
$ npm run tauri dev

Execute cd stock-check to enter the project directory, execute npm run tauri dev to make the project run, after running, you can view the effect on the browser, or as a windows desktop software to view the effect. But during the author's experiment, after entering the project directory, before npm run tauri dev , you need to execute a command npm install to introduce some js dependency modules used in front-end development. The running effect of the desktop application is as follows:

The process of running the build for the first time will take a long time. Due to well-known reasons, some dependent packages may not be installed correctly, and you need to prepare some network access capabilities in advance.

Fourth, the project is packaged as an msi installation file

When we develop a desktop software, we definitely want to distribute it to users, so we need to package an installation file, such as: aaa.exe、bbb,msi and the like. There is a tauri.conf.json file in the src-tauri directory. This file is the configuration file of the tauri project environment. The JSON structure in this file is tauri > bundle > identifier The default value is com.tauri.dev , We need to modify it to package, generally modify it to the reverse of the domain name of your organization, for example: com.zimug.stock-check .

 {
 "package": {
     "productName": "stock-check",
     "version": "0.1.0"
  },
 "tauri": {
    "bundle": {
        "identifier": "com.zimug.stock-check",
    },
  }
}

After the modification is completed, run the package command. The package name and version information can be configured in the tauri.conf.json file, such as the package configuration above.

 npm run tauri build

After the package is completed, only 2.9M will be generated, and the msi installation file will be generated in the relative path under the root directory of the project src-tauri\target\release\bundle/msi/stock-check_0.1.0_x64_en-US.msi , distribute this msi file to your users, they can install and use your development on the PC side Windows desktop software. Of course, tauri, like electron, can be cross-platform, and can also package desktop application installation packages compatible with Windows, MacOS, and Linux.

5. Small problems

Some friends may ask, do I need to learn the rust language if I want to use tauri to develop desktop applications? The answer is: no need! Unless you develop desktop applications that are strongly associated with Windows hardware, such as bluetooth, drivers, etc., you do not need any rust language foundation. Most of the development work is to write the interface and write the logical data interaction, which is the same as developing a web application!
If you find it helpful, please like and share! Your support is my inexhaustible creative motivation! . More exciting content public number: Antetokounmpo Zatan. Antetokounmpo blog: zimug.com