Skip to main content

Get Started

This guide will help you to create a new extension with all the dependencies, starter code, and recommended folder pre-created. The starter code comes with pre-implemented OAuth flow and easy-to-set-up webhook configuration.

What you will learn?​

  1. Install FDK CLI
  2. Generate the starter code for your extension using FDK CLI
  3. Preview your extension on a development account

Prerequisites​

To successfully complete this guide, you will need the following:

Install FDK CLI​

FDK-CLI is a command-line interface tool to simplify the theme and extension development process. You can read the documentation here.

To install the latest version of FDK-CLI, run the following command in your terminal:

npm install -g @gofynd/fdk-cli

Check if fdk-cli is successfully installed by running this command:

fdk --version

If it is installed successfully, it will return the version:

cli_version

tip

To see a list of available commands and their descriptions, use fdk --help.

Generate the starter code for extension​

Follow below steps in FDK CLI to generate your extension's starter code:

  1. Login in to FDK-CLI using command below:

    fdk login

    Verify if you are logged in or not by running the following command:

    fdk user

  2. To create the extension run the following command:

    fdk extension init

    To know more about the init command, click here.

  3. Enter Extension Name

  4. Select Extension Type. You can select between Private and Public.

  5. Select your preferred technology stack from these options:

    • Node+Vue
    • Node+React
    • Python+Vue
    • Python+React
    • Java+Vue
    • Java+React

    extension init

    FDK-CLI will create the extension folder into the current directory of the local system with starter code and register the extension in your Fynd Partners account. Navigate to Partner Panel > Extensions > Your Extension, to check and edit your extension's registration details

  6. Change the directory to your extension directory by running the following command:

    cd "Example Extension"
info

Internally FDK CLI installs FDK Extension and Client libraries in the starter code which helps in OAuth implementation, calling SDK methods and configuring webhooks. Check out the documentation of these libraries in your preferred technology stack.

FDK Extension Libraries​

The FDK Extension library facilitates seamless configuration of authentication for accessing Fynd Platform APIs and webhooks subscriptions. OAuth implementation is essential for establishing the necessary foundational authentication for both functionalities. Explore the following libraries in your preferred language.

FDK Client Libraries​

FDK Client Library is a peer dependency in FDK Extension Library and contains all the methods to call Fynd platform API's.

Preview your extension on a development account​

  1. Run following fdk command to get the extension preview URL.
fdk extension preview-url

FDK CLI will generate a preview URL using Ngrok on default port 8080. Notice that preview URL has been added in the EXTENSION_BASE_URL in your extension's .env file and in the 'Extension Setup' form on the partner panel.

What is Extension Base URL

Base URL is where you host your extension. This is used by Fynd Platform to launch your extension on Fynd Platform. Base URL is also called Extension URL.

You need to provide Base URL in ‘Extension Setup’ form in your partner panel and also in your extension codebase in .env file.

info

fdk extension preview-url command supports two tools for tunneling: Cloudflared and Ngrok. By default, the command uses Cloudflared. Cloudflared will be automatically installed on first use, and no auth-token is required for Cloudflared tunnelling.

To use Ngrok as a tunneling tool, you need to provide the --use-tunnel ngrok option with the command. It will prompt you to enter your auth-token. You do not need to install Ngrok separately, as it is automatically installed with FDK-CLI. However, you will need an Ngrok auth-token, which can be obtained from their website.

fdk extension preview-url --use-tunnel ngrok

To update your Ngrok auth-token, add the --update-authtoken flag along with the --use-tunnel ngrok option, and it will prompt you to add your new auth-token.

fdk extension preview-url --use-tunnel ngrok --update-authtoken

You can read Ngrok docs to know more.

note

Don’t close terminal window in which the above command is run. Run the following commands in a new terminal window and keep extension preview-url command running in another terminal.

  1. Build extension front end and start backend server.
npm run build
npm run start
note

Don’t forget to repeat the above last step every time changes are made to the Extension code.

  1. Copy Preview URL and paste it into the browser to Install/Launch Extension

extension_launch

Congratulations you have created your first extension. Start building your extension features by using our APIs and SDKs.

info

For more information about other options, check out this link.

Advance guide​

  • If you are using different environment(cluster) for extension development, check current environment using below command

    fdk env get

    Command will return the current active environment. Ensure that the active environment returned by this command matches the environment in which you intend to create your extension. For example, if your partner account exists at partners.fynd.com, your environment should be Fynd.