Tauri is a cross-platform framework that transforms JavaScript or TypeScript code into native applications for virtually any operating system. Although similar to Electron or React Native, Tauri can handle a variety of front-end technologies. Combined with the front end, it extracts native applications for the required operating system.
Architecturally, Tauri Phone Number List runs front-end application code in parallel with Tauri processes that generate native applications. Therefore, you can develop native applications alongside web applications and use operating system features by integrating Rust calls into native applications.
Many of Tauri's powerful features come from this hybrid process. In other words, the development process is completely the same regardless of which stack you use. Tauri simply decorates an existing process.
Tauri and Svelkit
The process for developing a Tauri-enabled web application consists of creating or adopting a Rust connectivity structure along with the application code and then running Tauri in web application development mode. You can then run the Tauri Connector (IPC, inter-process communication), run your native application, and see the changes to your web application reflected. When you are ready to deliver your application for production, you can release a bundle for a specific platform target.
Here we look at the process of running Tauri against the Svelkit application. Each stack has its own requirements, but the overall steps are similar. First, Rust must be installed. Tauri uses Rust for performance, cross-platform, and security. Typing rustc –version returns a response to the command line. To set up Rust, follow the setup steps in the Tauri documentation . Run rustup update and check installation with rustc --version .
Once Rust is available, you can configure a new Tauri layout with npm create tauri-app . To do this, npm must be installed. Tauri Quick Start DocumentationThere are also other ways to install Tauri infrastructure for your application. For example, you could use a shell script or Rust Cargo. Anyway, since it is also needed for Sveltkit, npm is used here. After running
npm create tauri-app , follow the prompts and specify a project name (iw-tauri in my case). Next, specify the package manager (Yarn in this example) and the framework you are using (Sveltkit). You can then use cd to navigate to the new iw-tauri directory , type yarn install to install the package, and type yarn run dev to start the development server. Now, when you visit localhost:1420, the application opens and a screen like <Figure 1> is displayed.
<Screen 1> Sveltkit frontend for Tauri app ⓒ IDG
Currently, only the Svelkit application is displayed on this screen. To check out Tauri's features, type npm run tauri dev . This will run both the Svelkit application and the Tauri frontend (enabled by the Tauri Rust Twin). Tauri creates native windows for UI-like web interfaces. Please note that if this is your first time doing this, it will take Tauri a little while to install the dependencies. Next time it starts quickly. If you are using a development environment (such as Sveltkit) that automatically updates dev builds, your code creation and changes will be automatically reflected by the native UI.
How to create a Tauri application
Tauri watches web applications and runs Rust native applications that reflect code changes there. In the previous section, we used npm create tauri-app , which is a shortcut to the manual process of creating a Tauri application. This process consists of the following steps:
Create a front-end project using a framework such as Sveltkit.
Configure your frontend project to work with Tauri.
Run the Tauri application.
Configure the Tauri application to watch the front-end application.
The manual process also requires setting framework-specific parameters during the frontend configuration step. For example, for Svelkit, you need to make sure that a static adapter is used. You can find the code for Tauri in the /src-tauri directory. This directory contains the tauri.conf.json file for configuring Tauri itself . You can see how it works by looking at the file created with create tauri-app , and more details can be found here . <List 1> contains part of the Tauri configuration code.
As you can see in <List 1>, it instructs Tauri what to do before running dev. That is, start the web application in development mode using yarn dev and then tell the application where it is running (localhost, port 1420). A video guide to developing web-based native applications using Tauri can be found at Tauri, a Rust-based Electron alternative. You can also find more information on how to manually set up a Tauri project in our Tauri guide .