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?
- Install FDK CLI
- Generate the starter code for your extension using FDK CLI
- Preview your extension on a development account
Prerequisites
To successfully complete this guide, you will need the following:
- You have created a partner account.
- You have created a development account.
- You’ve installed one of these backend languages and package managers:
- Node.js (v16.x) with npm
- Python (>=v3.7, <v3.11) with pip
- Java (v17) with maven
- You have installed Git.
- You have installed Redis.
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:
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:
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
To create the extension run the following command:
fdk extension init
To know more about the init command, click here.
Enter Extension Name
Select Extension Type. You can select between Private and Public.
Select your preferred technology stack from these options:
- Node+Vue
- Node+React
- Python+Vue
- Python+React
- Java+Vue
- Java+React
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
Change the directory to your extension directory by running the following command:
cd "Example Extension"
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
- 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.
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.
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.
- Build extension front end and start backend server.
npm run build
npm run start
Don’t forget to repeat the above last step every time changes are made to the Extension code.
- Copy Preview URL and paste it into the browser to Install/Launch Extension
Congratulations you have created your first extension. Start building your extension features by using our APIs and SDKs.
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.