Use of this software is subject to important terms and conditions as set forth in the License file

Run this command. You can download this project in your local environment

npx create-zendesk-react-app my-app

zendesk에서 지원하는 scaffold를 업그레이드 한 react-template 입니다.

기존 scaffold는 class component로 되어있으며, 특정 라이브러리 버전들이 낮거나 지원을 하고 있지 않습니다.

apps for Zendesk products.

• 폴더 구조
• 클래스 컴포넌트 -> 함수형 컴포넌트
• babel, react 버전 업그레이드

• Node.js >= 18.12.1
• Ruby = 2.6.x

1. Clone or fork this repo
2. Run yarn

To run your app locally in Zendesk, you need the latest Zendesk CLI.

?zcli_apps=true로 Zendesk 인스턴스에 앱을 제공하려면 새 터미널을 열고 다음을 실행합니다.

yarn watch

그런 다음 현재 프로젝트 경로에서 새 터미널을 열고 다음을 실행합니다.

yarn start

react-template을 clone 한 뒤에, 조건에 맞게 zendesk에서 나타낼 정보를 수정해야합니다.

<!-- manifest.json -->
{
"name": "[application name]",
  "author": {
    "name": "[name]",
    "email": "[email]",
    "url": "[url(optional)]"
  },

   "location": {
    "support": {
      }
    }
  },

├── src
│   ├── images
│   └── javascript
│       ├── api
│       ├── components
│       ├── hooks
│       ├── lib
│       ├── pages
│       ├── stores
│       └── utils
├── App.js
├── index.js
├── zafClient.js
├── templates
├── translations
├── index.css
└── manifest.json

현재 Jest로 테스트하도록 설정되어 있습니다. spec을 실행하려면 새 터미널을 열고 다음을 실행하십시오.

yarn test

Specs live under the spec directory.

Installing and updating ZCLI

yarn add @zendesk/zcli -g

앱이 서버 측 유효성 검사를 통과하는지 확인하려면 다음을 실행하세요.

yarn validate

or

zcli apps:validate dist

확인에 성공하면 다음을 실행하여 Zendesk 계정에 새로운 앱을 업로드할 수 있어요.

yarn upload

or

zcli apps:create dist

계정에서 생성된 후 앱을 업데이트하려면 다음을 실행하세요.

yarn update

or

zcli apps:update dist

수동 업로드를 위한 zip 아카이브를 생성하려면 다음을 실행하세요.

yarn package

or

zcli apps:package dist

The folder and file structure of the App Scaffold is as follows:

The dist directory is created when you run the app building scripts. You will need to package this folder when submitting your app to the Zendesk Apps Marketplace, It is also the folder you will have to serve when using ZCLI. It includes your app's manifest.json file, an assets folder with all your compiled JavaScript and CSS as well as HTML and images.

The spec directory is where all your tests and test helpers live. Tests are not required to submit/upload your app to Zendesk and your test files are not included in your app's package, however it is good practice to write tests to document functionality and prevent bugs.

The src directory is where your raw source code lives. The App Scaffold includes different directories for JavaScript, stylesheets, templates, images and translations. Most of your additions will be in here (and spec, of course!).

This directory contains custom tooling to process translations at build time:

• translations-loader.js is used by Webpack to convert .json translation files to JavaScript objects, for the app itself.
• translations-plugin.js is used to extract compulsory translation strings from the en.json file that are used to display metadata about your app on the Zendesk Apps Marketplace.

.babelrc is the configuration file for babel compiler.

.browserslistrc is a configuration file to specify browsers supported by your application, some develop/build tools read info from this file if it exists in your project root. At present, our scaffolding doesn't reply on this file, default browserslist query is used by Babel and PostCSS

jest.config.js is the configuration file for Jest

package.json is the configuration file for Yarn, which is a package manager for JavaScript. This file includes information about your project and its dependencies. For more information on how to configure this file, see Yarn package.json.

postcss.config.js is the configuration file for PostCSS

webpack.config.js is a configuration file for webpack. Webpack is a JavaScript module bundler. For more information about webpack and how to configure it, see What is webpack.

The App Scaffold provides some helper functions in /src/javascripts/lib/helpers.js to help building apps.

The I18n (internationalization) module in /src/javascripts/lib/i18n.js provides a t method to look up translations based on a key. For more information, see Using the I18n module.

For more information on the Zendesk CLI please see the documentation.

External dependencies are defined in webpack.config.js. This ensures these dependencies are included in your app's index.html.

• Put up a PR into the master branch.
• CC and get a +1 from @zendesk/vegemite.

Submit Issues via GitHub or email support@zendesk.com.

Links to maintaining team, confluence pages, Datadog dashboard, Kibana logs, etc

• https://developer.zendesk.com/
• https://github.com/zendesk/zendesk_apps_tools
• https://webpack.github.io
• https://developer.zendesk.com/documentation/apps/build-an-app/using-react-in-a-support-app/

Copyright 2018 Zendesk

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License.

You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.