Building Extensions #3: Setting up the development environment and building extensions for Zoho Desk

This series aims to equip developers with all they need to build extensions for Zoho Desk in Zoho Sigma and publish them in Zoho Marketplace.

Welcome back, Developers!

With our previous post on the basics of extensions and the scope of building them, we'd like to continue the momentum by discussing the process of actually building extensions for Zoho Desk. In this post, we'll address the technical prerequisites to develop extensions for Zoho Desk. We will also take you through the steps involved in creating and testing your extension.

The first step to build extensions for Zoho Desk is to download and install Node.js, followed by ZET (Zoho Extension Toolkit). ZET is the CLI tool offered by Zoho Desk that comes with a built-in http server to render the extension. It also enables you to build, test, validate, and package your extensions.

Setting up the development environment

Installing Node.js

You can install the Node.js runtime environment here (versions 7.1.0 and above are supported). Once you have installed Node.js, run the following command to verify it.

$ node -v
$ npm -v

Installing ZET CLI

Install ZET CLI, which enables you to build your extensions for Zoho products.

If you are a Mac/Unix user, run the following command to install ZET:

$ sudo npm install -g zoho-extension-toolkit

If you are a Microsoft Windows user, run the following command:

$ npm install -g zoho-extension-toolkit

Use the following command to check the version:

$ zet -v

Use the help command to view all the available commands in ZET CLI and their usage.

$ zet -help

ZET commands:

init: Creates the skeleton of the extension project. It scaffolds the index file of your project with the necessary code to ease the development process.

run: Starts an https server in the current directory to serve the assets in it.

validate: Helps developers to ensure the extension is in alignment with the Zoho Desk guidelines.

pack: It will create ZIP file in the current directory to host extension's static assets in Zoho servers.

Building your extension

Once the required development environment is set up, you are ready to build and test your extension. To start building your extension, you need to create a new project in ZET CLI.

Create a new project

Open your terminal and move to the directory under which you will be creating a new project for your extension.

Run the following command. This command will display the list of all Zoho Products for which extensions can be developed.

$ zet init

Use the arrow keys to choose Zoho Desk and press Enter.

$ zet init

? Select the Zoho service for your widget and hit enter key (Use arrow keys)

> Zoho Desk

Zoho CRM

YES

You will be prompted for the Project Name.
Provide a project name and click Enter. You will have to choose Yes/No based on your need for module support.

Note: We will be discussing module support in detail in a separate post. If you are a beginner developing your first extension, you can choose No.

Now, the project directory with all the necessary folders, dependency code packages, and files will be created.

D:\zet\projects>D:\zet\projects>zet init

? Select the Zoho service for your widget and hit enter key Zoho Desk

? Project Name demoproject

Initializing project at: D:\zet\projects\demoprojects

Installing NPM dependencies…

Project Initialized D:\zet\projects\demoprojects

Run the following commands:

cd demoproject

zet run

The image below represents the project's default folder structure. The widget.html file is the default widget created within the project. Let's test this extension using this sample widget.

Testing your extension

You need to perform the following steps to test your extension:

Start server in your local host
Activate development mode in Zoho Desk

Starting the server

To start the local host server, navigate to the newly created project's directory and execute the following command.

$ zet run

The http server will start and be accessible through port 5000 of your local machine.

Activate development mode

Log into your Zoho Desk account.
Click on the gear icon in the top right corner and go to the Setup page.
Click Build Extensions under Developer space.
Click the Enable Developer Mode button in the top right corner of the page.Developer mode will be enabled.
Go to the Tickets module and open a ticket.
Click the Extension icon to the right of the Ticket details page. The extension widget page will appear.