DocFlow
Tutorial
Distribution

Distribution

Intro

  • Tauri 를 이용해 정적 사이트를 데스크탑 앱으로 빌드합니다.
  • 자세한 내용은 Guide 섹션을 참조하세요

프로젝트 생성

  • Tauri Project를 생성합니다.
npx create-tauri-app DocFlow_app
  • 다음과 같이 설정합니다.
    • frontend language : TypeScript / JavaScript
    • package manager : npm
    • UI template : React
    • UI flavor : JavaScript
PS D:\Playground> npx create-tauri-app DocFlow_app
✔ 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
PS D:\Playground>

설정

tauri.conf.json 파일 설정

  • D:/Playground/DocFlow_app/src-tauri/tauri.conf.json 파일의 build 섹션을 확인하고, devPath와 distDir 경로를 설정합니다.
  • build 섹션이 없는 경우 추가합니다.
{
  "build": {
    "distDir": "../../DocFlow_web/Public",
    "devPath": "../../DocFlow_web/Public"
  },
  "tauri": {
    "windows": [
      {
        "title": "DocFlow",
        "width": 800,
        "height": 600
      }
    ]
  }
}
  • bundle 섹션을 확인하고, identifier 를 변경합니다.
"bundle": {
      "active": true,
      "targets": "all",
      "identifier": "com.tauri.docflow",

의존성 설치 

cd DocFlow_app
npm install
PS D:\PlayGround> cd DocFlow_app
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>

애플리케이션 빌드

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

npm run tauri build

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

d:\Playground\DocFlow_app\src-tauri\target\release\docflow_app.exe

tauri_app.png

Buy me a coffee Buy me a coffee
DeploymentThings to Learn