In this section, you'll learn how to build a simple Freshdesk app from scratch. We will cover the following steps:
Step 1: Install Node
Step 2: Install the SDK
Step 3: Create your First App
Step 4: Install Developer Extension
Step 5: Test your App
Step 6: Validate and Pack
You will need to install Node.js to use Freshdesk SDK. You can install node.js from here (any version below 6.10 will not be supported). Once installed, you can verify the version using the following command:
$ node –v
Install the SDK
You will need to install the Freshdesk SDK in your development machine to build, test, and publish apps on the Freshdesk Marketplace.
By installing and using the SDK, you agree to these Terms and Conditions.
If you are using Mac/Unix, run the following command:Copied Copy
|sudo npm install http://dl.freshdev.io/sdk/frsh-sdk-3.1.0.tgz -g|
If you are using command prompt (Windows), run this command to install the SDK:Copied Copy
|npm install http://dl.freshdev.io/sdk/frsh-sdk-3.1.0.tgz -g|
The -g command option ensures that your installation is global. With a global installation, you will be able to call commands and work on your apps and SDK from anywhere within your machine.
Once you have installed the SDK, you can verify the version using the following command:$ frsh version
Create your First App
In this section, you will learn how to create a simple app that is visible in both the ticket details page and the contact details page. The app will show the Freshdesk logo and the name of the ticket requester or contact (depending on the page).
Open the terminal window, navigate to the directory under which you want to create your app, and run the following command: $ frsh init my_first_app
my_first_app is an optional argument that denotes the directory in which the app’s files will be stored.
Once init is successful, the "my_first_app" directory will be created with the app files as shown below: To learn more about the app configuration, see Code Walkthrough.
Install Developer Extension
To enable local testing, you will need to install the Freshdesk Developer Extension. Once installed, in the Chrome browser, you can see the Freshdesk developer extension icon beside the address bar as shown below:
Test your App
Once you have installed the Freshdesk developer extension for Chrome, you can locally render and test your app from your developer machine.
- Open your console, navigate to your project folder, and execute the following command: $ frsh run
- Open the chrome browser and click the Freshdesk Developer Extension icon beside the address bar. Check if the chrome plugin status shows “All Good! Happy Coding!”. This status indicates that your local server is running and its ready for testing.
- Log into your Freshdesk account (if you do not have a Freshdesk account, sign up here).
- In the home page, select the Tickets tab and click any ticket. The rendered app will be displayed on the right side of the page as shown below.
- In the Ticket details page, click the contact displayed in the Requester Info tab. In the Contact details page, the rendered app will be displayed on the right side of the page as shown below:
Validate and Pack
Now that you have tested the app, you can check if the app is error-free and package it for submission.
- Navigate to your project folder and run the following command: $ frsh validate
- Once the validation is successful, you can pack the project by running the following command: $ frsh pack The pack command generates the file dist/my_first_app.zip file. This is the file that needs to be uploaded in the developer portal for publishing it to the Freshdesk Marketplace. For information on the submission process, see Types of Apps section under Marketplace Listing.