App development process

Use this method to install Node.js v24.11.0 and the FDK together on your system via Homebrew (on MacOS and Linux).

Note:If you already have Homebrew installed on your system, skip this section and proceed with the FDK installation step. Otherwise, refer to the following information on installing Homebrew.

• For MacOS or Linux: Install the latest version of HomeBrew.

1. Run the following command to enable Homebrew to access the Freshworks CLI repository and auto-configure the CLI.

   brew tap freshworks-developers/homebrew-tap

2. Run the following command to install the latest CLI version.

   brew install fdk

   This command performs the following tasks:

   • Creates the custom_node_location folder in your system.

     Note:The terminal displays the location where the custom_node_location folder is created.

   • Installs Node.js version 24.11.0, compatible with the CLI, into the custom_node_location folder.

   • Installs the Freshworks CLI in the same custom_node_location folder.

3. Add the following command to the appropriate environment file (.bash_profile, .bashrc, or .zshrc) on your system. This command loads the necessary settings required for using the CLI commands.

   source "$(brew --repository freshworks-developers/homebrew-tap)/path.bash.inc"

4. Apply the changes made to the environment file in the current terminal by either closing and reopening the terminal or by running the source ~/.{file_name} command. For example, source ~/.bashrc.

5. Run the following command to verify the CLI installation.

   fdk version

   Ensure that the installed CLI version is 10.0.0 or later.

1. From the command-line, navigate to the empty directory in which you want to create an app.

2. Run the fdk create command. A prompt to choose a template is displayed.

3. Select common-starter-template. A new app with the following directories/files is created based on the template.

   Directories and files that the create command generates for common-starter-template

   Directory/File	Description
   Important:When building an app, do not modify the default folder/file names.
   app/	Contains all the files required for a front-end app or the front-end component of an app.
   app/index.html	Contains files to render the front-end components of an app. This is the first page that is loaded when the app is activated. When building an app, if the app uses Data method, Request method, Installation settings, or Data store, update the index.html file with the following client JS resource: <script async src="{{{appclient}}}"></script>
   app/scripts (All js files are ES6 compatible)	Contains all the javascript files required to support the front-end functionality of an app.
   app/scripts/app.js	Placeholder file for your app logic (app code).
   app/styles	Contains the styles required for the front-end components of an app.
   app/styles/styles.css	Contains CSS rules that are incorporated to HTML files, when referenced.
   app/styles/images	Contains images that can be used in the app.
   app/styles/images/icon.svg	Contains the app icon. If you intend to extend the app, you can replace the icon.svg file. The icon file should be of SVG type with a resolution of 64 x 64 pixels.
   config/	Contains the installation parameters and OAuth configuration files.
   config/iparams.json	Specifies all the installation parameters whose values are set when the app is installed. For more information, see App settings.
   log/	Contains the files in which the app debugging information is captured.
   log/fdk.log	Contains all debugging information, warnings, and errors generated when an app is created, run, packed or validated.
   manifest.json	Contains details such as the platform version the app uses, module on which the app is deployed, placeholders for the front-end app rendering, request templates that the app code uses, and FDK version used to build, test, validate, and pack the app.
   README.md	Contains additional instructions, information, and specifications.

   Note:To ensure quick app reviews, if you use React or any other front-end framework, include the source files of your app in the src directory (which is auto-created when you use fdk create and select react-starter-template to create your app files).

After creating the default front-end app files, to build the app,

1. Configure the app manifest.

2. Implement your app logic.

   1. Navigate to app.js and code your app logic.

   2. Use our front-end methods to formulate your app logic.

      • For your app to react to app initialization, activation, or deactivation, use the appropriate app lifecycle methods.

      • For your app to retrieve the information about the different objects on the product UI and use the information to process the app logic, use the appropriate data method.

      • For your app to react to the events (such as button clicks or changes/updates to field values) that occur on the product UI, use the appropriate event methods.
      • For your app to trigger certain actions on the product UI, use the appropriate interface methods.

   3. Use our developer toolkit to help solve specific requirements of your app.

      • To use external libraries, use our provision to include external libraries into your app files.

      • To place secure http calls from your app to a third-party domain, use the request method.

      • To enable communication between the various instances of your app, use the instance method.

      • To enable your app to access third-party resources that require an OAuth authentication, use the provision to place OAuth requests.

      • To persist and use data throughout your app’s lifecycle, use our data storage tools.

3. Use our app UI guidelines or Crayons (the Freshworks component library) to construct your app’s UI.

4. Configure app settings.

Since custom modules are configured differently for an account, rendering the front-end app on custom modules through local testing is not supported.

To test the app, you need to validate, pack, and publish the app as a Custom app.