archived-tauri-docs/docs/getting-started/beginning-tutorial.md

import Command from '@theme/Command' import Link from '@docusaurus/Link'

Your First Tauri App

:::caution You must have completed all the steps required for setting up the development environment on your machine. Please see the setup page for your operating system if you haven't done this yet. :::

There are two ways to integrate with Tauri depending on your needs:

• Start a new Tauri project
• Or add Tauri to existing project

1. Start a New Tauri Project

yarn create tauri-app
#OR
npx create-tauri-app

Follow the instructions and choose the web front-end framework you prefer. create-tauri-app creates a template project depending on your inputs. You can go straight to check tauri info after this.

1. Add Tauri to Existing Project:

The Tauri CLI tool helps you build your project, so install it first.

You can install Tauri CLI using Node.js or using Rust

Install Tauri CLI package as a dev dependency:

cd project-folder

# Not required if you already have a package.json:
# yarn init
# OR
# npm init

yarn add -D @tauri-apps/cli
# OR
npm install -D @tauri-apps/cli

:::note You can install Tauri as both a local and a global dependency, but we recommend installing it locally. :::

If you decide to use Tauri as a local package with npm (not yarn), you need to add a custom script to your package.json:

{
  // This content is just a sample
  "scripts": {
    "tauri": "tauri"
  }
}

Alternatively, install Tauri CLI as a cargo subcommand:

The following command installs tauri-cli as a Cargo subcommand on the cargo binary folder (by default on $HOME/.cargo/bin):

cargo install tauri-cli --locked --version ^1.0.0-rc

For more installation options, see cargo install.

Install Tauri API Package as a Dependency (optional):

The @tauri-apps/api package is recommended for projects using ES modules or modern build tools such as Webpack or Vite. It is the most secure way to access the Tauri APIs.

yarn add @tauri-apps/api
# OR
npm install @tauri-apps/api

2. Initialize Tauri in Your App

This command places a new folder in your current working directory, src-tauri.

└── src-tauri
    ├── .gitignore
    ├── Cargo.toml
    ├── rustfmt.toml
    ├── tauri.conf.json
    ├── icons
    │   ├── 128x128.png
    │   ├── 128x128@2x.png
    │   ├── 32x32.png
    │   ├── Square107x107Logo.png
    │   ├── Square142x142Logo.png
    │   ├── Square150x150Logo.png
    │   ├── Square284x284Logo.png
    │   ├── Square30x30Logo.png
    │   ├── Square310x310Logo.png
    │   ├── Square44x44Logo.png
    │   ├── Square71x71Logo.png
    │   ├── Square89x89Logo.png
    │   ├── StoreLogo.png
    │   ├── icon.icns
    │   ├── icon.ico
    │   └── icon.png
    └── src
        ├── build.rs
        ├── cmd.rs
        └── main.rs

3. Check tauri info to Make Sure Everything Is Set up Properly:

Which should return something like:

Operating System - Darwin(16.7.0) - darwin/x64

Node.js environment
  Node.js - 12.16.3
  @tauri-apps/cli - 1.0.0-rc.0
  @tauri-apps/api - 1.0.0-rc.0

Global packages
  npm - 6.14.15
  pnpm - Not installed
  yarn - 1.22.17

Rust environment
  rustup - 1.24.3
  rustc - 1.58.1
  cargo - 1.58.0
  toolchain - stable-x86_64-unknown-linux-gnu

App directory structure
/node_modules
/src-tauri
/src
/public

App
  tauri.rs - 1.0.0-rc.0
  build-type - bundle
  CSP - default-src 'self'
  distDir - ../public
  devPath - ../public
  framework - Svelte
  bundler - Rollup

This information can be beneficial when triaging problems.

Recipes

We've also defined prebuilt configurations called "Recipes". They may help you to customize Tauri to fit your needs. See more about recipes.

Vue CLI Plugin Tauri

If you are using Vue CLI, it is recommended to use the official Vue CLI plugin.