Zendesk ZCLI React App 생성

2025ver

 

https://developer.zendesk.com/documentation/apps/build-an-app/using-react-in-a-support-app/

Using React in a Support app

1. zcli 설정 후 앱 생성(하단의 2, 3, 4 항목까지 동일)

 - 앱을 생성한 후 해당 폴더에서 "npm install" 하는거 까먹지 않기.

2. npm run build >> dist 폴더 생성함

3. zcli apps:server dist >> 로컬에서 실행

 - https://{zendesk domain}?zcli_apps=true

 

---

 

1. libsecret 설치

https://seokbong.tistory.com/291

libsecret install

 

2. zendesk zcli 설치

// 설치
npm install @zendesk/zcli -g

// 확인
zcli help

 

3. profile 등록

// 로그인
zcli login -i

// 프로필 확인
zcli profiles:list

// 프로필 변경
zcli profiles:use {subdomain}

 

4. Zendesk React App 설치

zcli apps:new --scaffold=react

 

5. Zendesk React App 실행 (Local)

// 빌드를 하기 위해 webpack 설치 (App 최상단 폴더에서)
npm install --save-dev webpack webpack-cli

// 빌드
npm run build

// 시작
zcli apps:server {app_directory}

// (빌드 후 앱 패키징 >> dist 폴더 내 tmp에 압축 파일 생성됨)
zcli apps:package dist

 

6. App Local Test (도메인 + ?zcli_apps=true)

https://{subdomain}.zendesk.com/agent/tickets/{123}?zcli_apps=true

 

7. 앱 업로드 / 업데이트

// 빌드한 앱 업로드
zcli apps:create ./dist

// 빌드한 앱 업데이트
zcli apps:update ./dist

---

[1]. https://developer.zendesk.com/documentation/apps/getting-started/setting-up-new-apps/#setting-the-app-location

Setting up new apps

[2]. https://developer.zendesk.com/documentation/apps/getting-started/using-zcli/

Using ZCLI

[3]. https://developer.zendesk.com/documentation/apps/build-an-app/using-react-in-a-support-app/