![]() ![]() In the case of SvelteKit, for example, we'd need to make sure the static adapter was used. In a manual process, we would also need to set framework-specific parameters in the front-end configuration step. Configure the Tauri application to watch the front-end application.Configure the front-end project to work with Tauri.Create a front-end project using a framework such as SvelteKit.Tauri works by running a Rust-native application that watches the web application and reflects code changes there. In the previous section, we used npm create tauri-app, which is a shortcut for the manual process of creating a Tauri application. Note that the first time you do this, Tauri will install its dependencies, which will take a moment. Thereafter, the startup will be quick.Īs you write code and make changes, they will be reflected automatically by the native UI, provided you are using a development setup (like SvelteKit) that automatically updates the dev build. To see Tauri's magic at work, type npm run tauri dev. That will launch both the SvelteKit application and the Tauri front end as realized by its Tauri Rust twin. Tauri will spawn a native window that reflects the same UI as the web interface. The SvelteKit front end for a Tauri application.Ĭurrently, the screen only shows the SvelteKit application. Now, if you visit localhost:1420 you will see the application with a screen like the one shown in Figure 1. You can integrate Tauri with pre-existing applications. See the Tauri guides to learn more.įor our present purpose, once we have run npm create tauri-app, we can follow the prompts, giving a name to the project (mine is iw-tauri). Next, you’ll specify a package manager (Yarn for this example), then the framework you are using (SvelteKit). Once that is done, you can cd into the new iw-tauri directory and type yarn install to install the packages, then yarn run dev to start the development server. The Tauri quickstart describes other ways to install the Tauri infrastructure for your application, such as using a shell script or Rust cargo. We'll need npm anyway for SvelteKit, so we’ll use that. Once Rust is available, you can scaffold a new Tauri layout with npm create tauri-app, which requires that you have npm installed. rustc -version should return a response on your command line. To set up Rust, you can follow the setup steps in the Tauri documents. Remember to run rustup update and verify the install with rustc -version. We'll look at the process for running Tauri against a SvelteKit application. Each stack has its own requirements but the overall steps are consistent.įirst, we need to have Rust installed. Tauri uses Rust for its performance, cross-platform, and security characteristics. Next, you run the Tauri connector (the IPC, or inter-process communication), launch the native application, and watch as your changes to the web application are reflected there. When you are ready to deliver the application for production, you can build a release bundle for specific platform targets. The process for developing a Tauri-enabled web application is to create or introduce the Rust plumbing alongside the application code, then run Tauri in web application development mode. ![]() ![]() Tauri just decorates the existing process. It combines with the front end to derive a native application for the required operating system.Īrchitecturally, Tauri runs the front-end application code alongside a Tauri process that generates the native application in parallel. As a result, you can develop the native application in tandem with the web application, and you can incorporate Rust calls in the native application to access operating system capability. This is a hybrid process and gives Tauri much of its power the development process remains exactly the same no matter which stack you use. Tauri is a cross-platform framework that turns JavaScript or TypeScript code into a native application for virtually any operating system. While it is similar to Electron or React Native, Tauri is able to handle a wide range of front-end technologies. ![]()
0 Comments
Leave a Reply. |