설치

Rust 설치

> rustc --version
  rustc 1.78.0 (9b00956e5 2024-04-29)
> cargo --version
  cargo 1.78.0 (54d8815d0 2024-03-26)

Tauri 설치

> cargo install tauri-cli
  --- download / install ---
> cargo-tauri --version
  tauri-cli 1.5.14

npx 설치

> npx --version  
  10.8.0
  • npx 가 설치되어 있지 않다면 npx도 함께 설치합니다.

프로젝트 생성

> npx create-tauri-app DocFlow_Tauri
D:\Obsidian>npx create-tauri-app Aprofl_Tauri
✔ Package name · aprofl_tauri
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, bun)
✔ Choose your package manager · npm
✔ Choose your UI template · React - (https://react.dev/)
✔ Choose your UI flavor · JavaScript

Template created! To get started run:
  cd Aprofl_Tauri
  npm install
  npm run tauri dev


D:\Obsidian>cd aprofl_tauri
  • 몇 가지 설정이 있는데, 여기서는 다음과 같이 설정합니다.

    • frontend language : TypeScript / JavaScript
    • package manager : npm
    • UI template : React
    • UI flavor : JavaScript
  • 설정완료 후 다음과 같은 구조가 됩니다.

D:\Obsidian
├── DocFlow_Hugo\Public  # Hugo로 빌드된 파일들이 있는 폴더
├── DocFlow_Tauri\       # Tauri 프로젝트 폴더

설정

tauri.conf.json 파일 설정

  • D:/Obsidian/DocFlow_Tauri/src-tauri/tauri.conf.json 파일의 build 섹션을 확인하고, devPathdistDir 경로를 설정합니다.
    • distDir:
      • npm run tauri:build 명령어를 실행할 때 Tauri가 참조하는 소스 파일들이 위치한 폴더입니다.
      • 빌드 시에 사용할 HTML, CSS, JavaScript 파일들이 위치한 경로를 지정합니다.
      • 빌드된 결과물은 src-tauri/target/release 폴더에 생성됩니다.
    • devPath:
      • npm run tauri:dev 명령어를 실행할 때 Tauri가 참조하는 소스 파일들이 위치한 폴더입니다.
      • 개발 모드에서 사용할 HTML, CSS, JavaScript 파일들이 위치한 경로를 지정합니다.
{
  "build": {
    "distDir": "../../DocFlow_Hugo/Public",
    "devPath": "../../DocFlow_Hugo/Public"
  },
  "tauri": {
    "windows": [
      {
        "title": "DocFlow",
        "width": 800,
        "height": 600
      }
    ]
  }
}

의존성 설치 및 개발 서버 실행

의존성 설치

npm install

개발 서버 실행

Tauri 개발 모드를 실행하여 애플리케이션이 제대로 동작하는지 확인합니다:

npm run tauri dev

애플리케이션 빌드

애플리케이션을 포터블 형식으로 빌드합니다:

npm run tauri build

npx i