This documentation is for the v2 development platform which is used to build apps for the new Freshdesk Mint UI. To build apps on the existing UI, use the v1 platform.
In this section, you will learn to build a simple Freshdesk app using the following steps.
Step 1: Install Node
Step 2: Install the CLI
Step 3: Create your First App
Step 4: Test your App
Step 5: Validate and Pack
First, you need to install Node.js to use the Freshworks CLI. To install Node.js, click here (only versions 6.10.x are supported). Once installed, you can verify the version by using the following command.
$ node –v
For Windows, you need to install a few required tools and configurations by using the following command.$ npm install --global --production windows-build-tools
Install the CLI
Next, you need to install the Freshworks CLI on your machine to build, test, and publish apps in Freshdesk Marketplace.
By installing the CLI, you agree to these Terms and Conditions.
To install the CLI, run the following command:
- For Mac/Unix - Copied Copy
- For Windows - Copied Copy
|sudo npm install https://dl.freshdev.io/cli/fdk-4.4.3.tgz -g|
|npm install https://dl.freshdev.io/cli/fdk-4.4.3.tgz -g|
The -g command option ensures global installation with which you will be able to run the CLI anywhere on your machine.
Once you install the CLI, you can verify the version by using the following command.$ fdk version
Create your First App
In this section, you will learn to create a simple app to display the Freshworks logo and name of the ticket requester on the Ticket Details page.
Open the terminal window, navigate to the directory (my_first_app) in which you want to create your app, and run the following command. $ fdk create --template your_first_app
Once create is successful, the app files shown below will appear in the my_first_app directory.
|app/||This directory contains all the files (HTML, JS, CSS, images, library) required for the front-end component of your app. The JS files must follow the ES5 standard.|
|app/icon.svg||This is the product icon file in the app directory created as part of the sample project. You can replace it with your own assets while building your app.
Note: The icon file should be of SVG type with a resolution of 64 x 64 pixels.
|app/template.html||This file contains the HTML required for the app’s UI which is rendered in an IFrame.|
|config/||This directory contains installation parameters and OAuth configuration files.|
|config/iparams.json||This file contains all the installation parameters which users will have to specify/set when they install the app. For more information on installation parameters and related APIs, see Installation Parameters.|
|config/iparam_test_data.json||This file contains the installation parameter values which you will specify to test the app on your machine.|
|manifest.json||This file contains details about your app and its characteristics.|
|README.md||This file contains any additional instructions or specifications which developers might want to outline.|
For a detailed walkthrough of the app, see Code Walkthrough.
Test your App
To test your app on your machine, follow the steps given below.
- Open your console, navigate to your project folder, and execute the following command. $ fdk run
- Log in to your Freshdesk account (if you do not have a Freshdesk account, sign up here).
- Go to the Ticket Details page, and in the address bar append the URL with ?dev=true. For example, the URL should look like this: https://subdomain.freshdesk.com/helpdesk/tickets/1?dev=true.
- For Chrome browsers:
- When you test your app on your machine, you may see a shield icon in the browser address bar. Clicking the icon will display a warning message as the Support portal runs on HTTPS while the server used for testing runs on HTTP.
- Click Load unsafe scripts to continue testing.
- On the Home page, from the left global sidebar, select Tickets and click any ticket. The rendered app is displayed on the right side of the page as shown below.
- For Firefox browsers:
- On the address bar, click the Lock icon and then click Secure Connection -> Secure connection details.
- Click Disable protection for now.
- On the Home page, from the left global sidebar, select Tickets and click any ticket. The rendered app is displayed on the right side of the page.
Validate and Pack
To check if the app is error-free and package it for submission, follow the steps below.
- Navigate to your project folder and validate the code by using the following command. $ fdk validate [--app-dir DIR] Here, DIR is the relative or absolute path to the project directory.
- Once validation is successful, you can pack the project by running the following command. $ fdk pack [--app-dir DIR] The pack command generates the dist/my_first_app.zip file which you need to upload in the Developer portal to be published in Freshdesk Marketplace. For information on the submission process, see the Types of Apps section in Marketplace Listing.