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
섹션을 확인하고,devPath
와distDir
경로를 설정합니다.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