Desktop App 생성

Desktop App 생성

프로젝트 생성

npx create-tauri-app DocFlow_app
PS D:\PlayGround> npx create-tauri-app DocFlow_app
Need to install the following packages:
create-tauri-app@4.1.0
Ok to proceed? (y)
 Package name · docflow_app
 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 DocFlow_app
  npm install
  npm run tauri dev
npm notice
npm notice New minor version of npm available! 10.7.0 -> 10.8.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.8.2
npm notice To update run: npm install -g npm@10.8.2
npm notice
PS D:\PlayGround>
  • 몇 가지 설정이 있는데, 여기서는 다음과 같이 설정합니다.
    • frontend language : TypeScript / JavaScript
    • package manager : npm
    • UI template : React
    • UI flavor : JavaScript
  • 설정완료 후 다음과 같은 구조가 됩니다.
D:\Playground
├── DocFlow  # obsidian 으로 작성한 .md 파일들이 있는 폴더
├── DocFlow_web\Public  # Hugo로 빌드된 파일들이 있는 폴더
├── DocFlow_app\       # Tauri 프로젝트 폴더

설정

tauri.conf.json 파일 설정

  • D:/Playground/DocFlow_app/src-tauri/tauri.conf.json 파일의 build 섹션을 확인하고, devPathdistDir 경로를 설정합니다.
    • distDir: 빌드(npm run tauri build) 명령어를 실행할 때 Tauri가 참조하는 소스 파일들이 위치한 폴더입니다.
    • devPath: 개발 모드(npm run tauri dev) 명령어를 실행할 때 Tauri가 참조하는 소스 파일들이 위치한 폴더입니다.
{
  "build": {
    "distDir": "../../DocFlow_web/Public",
    "devPath": "../../DocFlow_web/Public"
  },
  "tauri": {
    "windows": [
      {
        "title": "DocFlow",
        "width": 800,
        "height": 600
      }
    ]
  }
}
  • bundle 섹션을 확인하고, identifier 를 변경합니다. -
    • identifier 값은 전 세계적으로 고유해야 하며, 특히 macOS와 iOS에서 애플리케이션을 배포할 때 중요합니다. -
    • 일반적으로 com.yourcompany.yourappname 형식으로 작성하여 고유성을 확보합니다.
"bundle": {
      "active": true,
      "targets": "all",
      "identifier": "com.tauri.docflow",
  • identifier 값이 중복된 경우, 다음과 같은 에러가 발생합니다.
PS D:\PlayGround\DocFlow_app> npm run tauri build
> docflow_app@0.0.0 tauri
> tauri build
       Error You must change the bundle identifier in `tauri.conf.json > tauri > bundle > identifier`. The default value `com.tauri.dev` is not allowed as it must be unique across applications.

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

의존성 설치

npm install
PS D:\PlayGround\docflow_app> npm install
added 74 packages, and audited 75 packages in 10s
9 packages are looking for funding
  run `npm fund` for details
found 0 vulnerabilities
PS D:\PlayGround\docflow_app> 

개발 서버 실행

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

npm run tauri dev

애플리케이션 빌드

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

npm run tauri build

결과물은 다음의 경로에서 확인 가능합니다.

docflow_app\src-tauri\target\release\docflow_app.exe