Integrate into Existing Project

If you already have an existing web project, this guide will walk you through integrating Tauri into your project, whether it is Node.js-based (like Svelte, React, Vue, or Angular) or Rust-based (like Yew or Dominator).

info

Before we continue, make sure you have completed the prerequisites to have a working development environment.

Although Tauri is compatible with nearly any frontend framework, we'll use a React project throughout this guide created using create-react-app. We'll be assuming you're starting with a project structure similar to this:

.
│── package.json
│── public
│   ╰── index.html
╰── src
    │── App.css
    │── App.jsx
    │── index.css
    ╰── index.js

Crea il progetto Rust

At the heart of every Tauri app is a Rust binary that manages windows, the webview, and calls to the operating system through a Rust crate called tauri. Questo progetto è gestito da Cargo, il gestore ufficiale di pacchetti e lo strumento di costruzione tuttofare per Rust.

Tauri CLI utilizza Cargo dietro le quinte quindi raramente è necessario interagire con esso direttamente. Cargo ha molte caratteristiche utili che non sono esposte attraverso la CLI, come testing, linting, e formattazione, quindi invitiamo a riferirsi alla loro documentazione ufficiale per saperne di più.

Installa Tauri CLI

If you haven't installed the Tauri CLI yet you can do so with one of the below commands. Non sei sicuro quale usare? Dai un'occhiata alla voce FAQ.

npm
Yarn
pnpm
Bun
Cargo

npm install --save-dev @tauri-apps/cli@">1.0.0"

For npm to detect Tauri correctly you need to add it to the "scripts" section in your package.json file:

package.json
"scripts": {
  "tauri": "tauri"
}

yarn add -D @tauri-apps/cli@^1.0.0

pnpm add -D @tauri-apps/cli@1

bun add -D @tauri-apps/cli@1.0.0

cargo install tauri-cli --version "^1.0.0"

Per strutturare un progetto Rust minimale preconfigurato per utilizzare Tauri, apri un terminale ed esegui il seguente comando:

npm
Yarn
pnpm
Cargo

npm run tauri init

yarn tauri init

pnpm tauri init

cargo tauri init

Vi guiderà attraverso una serie di domande:

What is your app name?
This will be the name of your final bundle and what the OS will call your app. È possibile utilizzare il nome che si desidera.

What should the window title be?
This will be the title of the default main window. You can use any title you want here.

Where are your web assets (HTML/CSS/JS) located relative to the <current dir>/src-tauri/tauri.conf.json file that will be created?
This is the path that Tauri will load your frontend assets from when building for production.
For the project example in this guide, is ../build. Note that it may be something different like ../dist if you're using a different framework.

What is the URL of your dev server?
This can be either a URL or a file path that Tauri will load during development.
For the project example in this guide, this is http://localhost:3000. Note that it may be something different (or even a directory) if you're using a different framework.

What is your frontend dev command?
This is the command used to start your frontend dev server.
For the project example in this guide, this is npm run start (make sure to adapt this to use the package manager of your choice).

What is your frontend build command?
This is the command to build your frontend files.
For the project example in this guide, this is npm run build (make sure to adapt this to use the package manager of your choice).

info

Se hai familiarità con Rust, noterai che tauri init sembra e funziona molto come cargo init. È possibile utilizzare cargo init e aggiungere le dipendenze Tauri necessarie se si preferisce una configurazione completamente manuale.

Il comando tauri init genera una cartella chiamata src-tauri. È una convenzione per le applicazioni Tauri dove inserire tutti i file correlati al nucleo in questa cartella. Attraversiamo rapidamente i contenuti della cartella:

Cargo.toml
Cargo's manifest file. È possibile dichiarare crates Rust da cui la tua app dipende, metadati sulla tua app, e molto altro. Per il riferimento completo vedi Formato Manifesto di Cargo.
tauri.conf.json
This file lets you configure and customize aspects of your Tauri application from the name of your app to the list of allowed APIs. Vedere Configurazione API di Tauri per l'elenco completo delle opzioni supportate e le spiegazioni approfondite per ciascuno.
src/main.rs
This is the entry point to your Rust program and the place where we bootstrap into Tauri. Troverete due sezioni in esso:
src/main.rs
```
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

fn main() {
tauri::Builder::default()
   .run(tauri::generate_context!())
   .expect("error while running tauri application");
}
```
The line beginning with the cfg! ha un solo scopo: disattiva la finestra del prompt dei comandi che normalmente apparirebbe su Windows se si eseguisse un app impacchettata. Se sei su Windows, prova a commentarlo e vedi cosa succede.
La funzione main è il punto di entrata e la prima funzione che viene invocata quando il programma viene eseguito.
icons
Chances are you want a snazzy icon for your app! Per farti andare velocemente, abbiamo incluso un set di icone predefinite. Dovresti cambiarli prima di pubblicare la tua applicazione. Scopri di più sui vari formati di icone nella guida delle icone di Tauri.

And that's it, you have now added Tauri to your existing project and you should see a src-tauri directory that looks something like this:

│── package.json
│── public
│   ╰── index.html
│── src
│   │── App.css
│   │── App.jsx
│   │── index.css
│   ╰── index.js
╰── src-tauri
    │── Cargo.toml
    │── build.rs
    │── icons
    │── src
    ╰── tauri.conf.json

Invoca Comandi

Tauri lets you enhance your frontend with native capabilities. Chiamiamo queste funzionalità Comandi, sono essenzialmente funzioni Rust che puoi chiamare dal tuo Frontend JavaScript. Questo ti consente di gestire elaborazioni pesanti o chiamate al SO tramite codice Rust più performante.

Facciamo un piccolo esempio:

src-tauri/src/main.rs
#[tauri::command]
fn greet(name: &str) -> String {
   format!("Ciao, {}!", name)
}

Un Comando è come qualsiasi funzione Rust, con l'aggiunta dell'attributo macro #[tauri::command] che permette alla tua funzione di comunicare con il contesto JavaScript.

Infine, dobbiamo anche dire a Tauri del nostro nuovo Comando in modo che possa indirizzare le chiamate di conseguenza. Questo è fatto con la combinazione della funzione .invoke_handler() e della macro generate_handler![] che puoi vedere sotto:

src-tauri/src/main.rs
fn main() {
  tauri::Builder::default()
    .invoke_handler(tauri::generate_handler![greet])
    .run(tauri::generate_context!())
    .expect("Errore nell'eseguire l'applicazione tauri");
}

Now you're ready to call your Command from the frontend!

There are two different ways you can invoke commands from your frontend project:

Using the @tauri-apps/api JavaScript library (preferred)
Using withGlobalTauri to use a pre-bundled version of the Tauri API

We'll go through both below.

Using JavaScript Library

To call our newly created command we will use the @tauri-apps/api JavaScript library. Fornisce l'accesso a funzionalità di base come finestre, il filesystem e molto altro attraverso convenienti astrazioni JavaScript. È possibile installarlo utilizzando il gestore di pacchetti JavaScript preferito:

npm
Yarn
pnpm
Bun

npm install @tauri-apps/api@">1.0.0"

yarn add @tauri-apps/api@^1.0.0

pnpm add @tauri-apps/api@1

bun add @tauri-apps/api@1.0.0

You can now import the invoke function from the library and use it to call our command:

src/App.jsx
import logo from './logo.svg';
import './App.css';

import { invoke } from '@tauri-apps/api'

function App() {
  // now we can call our Command!
  // Fai clic con il pulsante destro sullo sfondo dell'applicazione e aprire gli strumenti da sviluppatore.
  // Vedrai "Hello, World!" stampato nella console!
  invoke('greet', { name: 'World' })
  // `invoke` returns a Promise
  .then((response) => console.log(response))

  return (
    // -- snip --
  )
}

Using `withGlobalTauri`

To interact with Tauri from your frontend without using the @tauri-apps/api JavaScript package you will need to enable withGlobalTauri in your tauri.conf.json file:

tauri.conf.json
{
  "build": {
    "beforeBuildCommand": "npm run build",
    "beforeDevCommand": "npm run dev",
    "devPath": "http://localhost:3000",
    "distDir": "../build",
    "withGlobalTauri": true
  },

In questo modo verrà iniettata una versione pre-impacchettata delle funzioni API nel frontend.

You can now modify the App.jsx file to call your command:

src/App.js
import logo from './logo.svg';
import './App.css';

// access the pre-bundled global API functions
const { invoke } = window.__TAURI__.tauri

function App() {
  // now we can call our Command!
  // Fai clic con il pulsante destro sullo sfondo dell'applicazione e aprire gli strumenti da sviluppatore.
  // Vedrai "Hello, World!" stampato nella console!
  invoke('greet', { name: 'World' })
  // `invoke` returns a Promise
  .then((response) => console.log(response))

  return (
    // -- snip --
  )
}

Running Your App

You can now run the following command in your terminal to start a development build of your app:

npm
Yarn
pnpm
bun
Cargo

npm run tauri dev

yarn tauri dev

pnpm tauri dev

bunx tauri dev

cargo tauri dev

consiglio

If you want to know more about the communication between Rust and JavaScript, please read the Tauri Inter-Process Communication guide.

Integrate into Existing Project

Crea il progetto Rust​

Invoca Comandi​

Using JavaScript Library​

Using withGlobalTauri​

Running Your App​

Crea il progetto Rust

Invoca Comandi

Using JavaScript Library

Using `withGlobalTauri`

Running Your App