Fynd Development Kit

Note: Experimental support for Windows is available, it may not be fully stable.

Fynd development Kit (FDK CLI) is a cli tool developed by Fynd to create and update themes, extensions and various other components of the Fynd Platform.

Quick Links

| Fynd Platform | Fynd Partners | Partners Documentation | Platform Documentation | Other Projects | Contributing |

Prerequisites

• You must have created a partner account
• You must have created development account guide
• You must have installed Git, if you don't already have it.
• You must have installed Nodejs version 18.X.X or higher version, if you don't already have it.
• Optional Prerequisites
  • Maven (To use fdk extension init for java extension initialization)

Installation

npm install -g @gofynd/fdk-cli

Basic Commands

To help you get started, there are some basic commands you can use.

fdk --help

To see the current fdk version, enter:

fdk version

To see the available theme commands, enter:

fdk theme

To see the available extension commands, enter:

fdk extension

See the the Command reference for syntax details and usage examples of the commands.

Commands

---

Global Commands

Command	Description
login	Login user
user	Shows user details of logged in user
logout	Logout user
populate	Populate sample data into development account to get started with theme and extension development
tunnel	Create a tunnel on the specified port number to enable remote access for development and testing.

Theme Commands

Command	Description
new	Create new theme
init	Clone or download the code of the live website onto your local machine to set up a local development environment for testing and modifications.
serve	Initiate theme development on your local machine. Your changes will automatically reflect in the browser whenever you save
sync	This command will sync your local changes on live store website so you can preview it.
pull	Pull latest theme code of your store website
pull-config	Retrieve the most recent theme configuration values from the theme editor on your local machine.
open	Returns links that provide preview of the current theme.
package	Package your local theme files into a ZIP file. This will allow you to upload the theme to the partners panel and list it on the marketplace.
context	Add context of a theme
context-list	List all available contexts
active-context	show currently active context

Extension Commands

Command	Description
init	Utilize this command to set up a new extension locally, leveraging existing templates of your choice.
preview	Start the extension development server and provide a tunnel URL to preview the extension on the development company.
pull-env	Retrieve extension context values from the partners panel and update current extension context.
launch-url	Get/set extension's lanuch url

Extension Binding Commands

Command	Description
init	Utilize this command to set up a new extension section binding locally, leveraging existing templates of either Vue 2 or React JS.
draft	Create a draft entry of section binding accessible on dev companies.
publish	Publish the bindings across all the companies where extension is installed..
preview	Create a tunnel and provide a link to tryout extension on any company.
show-context	Show current extension section context.
clear-context	Clear current extension section context.

Partner Commands

Command	Description
connect	Add partner access token so that you don't need to add it explicitly

Config Commands

Command Type	Description
set	Set configuration values.
get	Retrieve current configuration values.
delete (alias: rm)	Delete configuration values.

Debug Mode

Add the --verbose flag to the command you want to run in debug mode.

This will create debug.log file at the current working directory. In case you encounter any issues, this log file can be shared with maintainers for effective issue resolution.

Example

fdk login --verbose

Commands Reference

---

Authentication Commands

To use fdk cli command the user has to login to the cli.

login

This command allows user to login via partner panel.

Syntax

fdk login [options]

Command Options

Option	Description
--host	URL of the partners panel host or API host
--help	Show help
--verbose, -v	enable debug mode

Example

fdk login

fdk login --host partners.fynd.com

fdk login --host api.fynd.com

---

user

This command show user details of the currently logged in user.

Syntax

fdk user

---

logout

This command will logout the user.

Syntax

fdk logout

---

populate

Using this command populate sample data into development account to get started with theme and extension development.

Syntax

fdk populate

---

tunnel

This command will start a tunnel using cloudflare by which you can access your local port on public url

Syntax

fdk tunnel [options]

Command Options

Option	Description
--port	Port (required)
--help	Show help
--verbose	enable debug mode

Example

fdk tunnel --port 8080

---

Theme Commands

A theme is a VueJS project that developers can scaffold using this cli tool. Themes change the look and feel of websites built using Fynd Platform. Always create a new directory while creating or initializing a theme.

new

This command is used to create a new theme for your application

Syntax

fdk theme new [options]

Command Options

Option	Description	Required
--name, -n	Theme name	Yes
--help	Show help	No
--verbose, -v	enable debug mode	No

Example

fdk theme new -n [your-theme-name]

---

init

This command is used to initialize an exisiting theme on your local system.

Syntax

fdk theme init [options]

Command Options

Option	Description
--help	Show help
--verbose, -v	enable debug mode

Example

fdk theme init

---

context

Context is a JSON object which holds the configurations related the the application and theme. When you initialize or create a new theme a context is created with the name provided in the commands and assigned as the active context. You can add multiple contexts if you want to use the same theme on multiple applications or envoirnments.

This command is used to add a new context.

Syntax

fdk theme context [options]

Command Options

Option	Description	Required
--name, -n	Context name	Yes
--help	Show help	No
--verbose, -v	enable debug mode	No

Example

fdk theme context -n [context-name]

---

context-list

This command is used to get a list of available context. You can also set active context by selecting one of the options in the list

Syntax

fdk theme context-list

---

active-context

This command is used to get currently active context.

Syntax

fdk theme active-context

---

serve

This command is used to run a theme on your local system.

Syntax

fdk theme serve [options]

Command Options

Option	Description
--ssr	Enable/disable Server-side rendering
--port	Pass custom port number to serve theme. Default: 5001
--help	Show help
--verbose, -v	enable debug mode

By default Server-side rendering is enable. To disable it use --ssr false with the serve command

Example

fdk theme serve

fdk theme serve --port 5002

---

sync

This command is used to sync your theme to the application.

Syntax

fdk theme sync

Always verify if you have set the correct context before syncing your theme. Refer context commands.

---

pull

This command is used to pull latest theme code.

Syntax

fdk theme pull

---

pull-config

This command is used to pull latest theme config.

Syntax

fdk theme pull-config

---

package

This command is used to create a zip file of theme.

Syntax

fdk theme package

---

open

This command is used to preview the theme on browser.

Syntax

fdk theme open

Extension Commands

Extensions are pluggable snippets of code that can be installed in your applications so improve the feature set of your application. To know more visit - Fynd Partners

init

This command is used to create a extension's initial code with required dependency. It will also register extension for you on your partner account.

Prerequisites

• You must have installed Git, if you don't already have it.

Syntax

fdk extension init [options]

Command Options

Option	Description
--target-dir	Target Directory
--template	Specify the template you want to use to create the extension
--help	Show help
--verbose	enable debug mode

Example

fdk extension init --target-dir [your-directory]

fdk extension init --template [template-name]

You can pass the following values for the template:

1. node-vue
2. node-react
3. java-vue
4. java-react

---

preview

This command will return the preview URL, which the user can use to launch or install the extension.

Syntax

fdk extension preview [options]

Command Options

Option	Description
--company-id	Unique identifier of your company
--api-key	Extension API key
--access-token	Partner Access Token
--tunnel-url	Specify a manual Tunnel URL to bypass automatic tunnel creation.
--no-auto-update	Disables auto-updating of tunnel URL as extension launch url on partners panel
--reset	Resets the extension's context data, prompting you to re-enter all required details. Useful for a fresh start!
--help	Show help
--verbose	Enables debug mode, providing detailed logs for troubleshooting.

Example

fdk extension preview

fdk extension preview --tunnel-url https://broke-casey-eric-recommendations.trycloudflare.com

fdk extension preview --company-id 999

• Cloudflared will be used as the tunneling tool.

• If you pass Tunnel URL, it will not created new tunnel and use the passed url as tunnel url.

---

pull-env

This command will fetch extension context details from partners panel and update current extension context.

Syntax

fdk extension pull-env

Example

fdk extension pull-env

---

launch-url

This command is used to get or set the launch url of your extension

Syntax

fdk extension launch-url get/set [options]

Command Options

Option	Description
--url	URL to be set
--api-key	Extension ID
--help	Show help
--verbose	enable debug mode

Set Launch URL Example

fdk extension launch-url set --url [url] --api-key [Extension API Key]

Get Launch URL Example

fdk extension launch-url get --api-key [Extension API Key]

---

Extension Binding Commands

Extensions bindings are reusable components which are pluggable through the theme editor to improve the user interface of your application. These can be used just like theme sections.

Set the active environment before running extension commands

fdk env set -u api.fynd.com

init

This command is used to create a basic boilerplate code for extension binding with required dependencies.

Syntax

fdk binding init [options]

Command Options

Option	Description
-n, --name	(Optional) Name of the section binding
-i, --interface	(Optional) Interface where this binding will be used. Currently, we only support Web Theme.
-f, --framework	(Optional) Runtime framework. Supported values are vue2 and react

Example

fdk binding init

---

draft

This command is used to register the binding with your development companies for alpha or beta testing.

Syntax

fdk binding draft [options]

Command Options

Option	Description
-n, --name	(Optional) Name of the section binding
-f, --framework	(Optional) Runtime framework. Supported values are vue2 and react
-id, --extensionId	(Optional) Extension Id of the current extension.
-org, --organisationId	(Optional) Organisation Id of the current extension.

Example

fdk binding draft

---

publish

This command is used to publish the binding across all live companies.

Syntax

fdk binding publish [options]

Command Options

Option	Description
-n, --name	(Optional) Name of the section binding
-f, --framework	(Optional) Runtime framework. Supported values are vue2 and react
-id, --extensionId	(Optional) Extension Id of the current extension.
-org, --organisationId	(Optional) Organisation Id of the current extension.

Example

fdk binding publish

---

preview

This command will allow developers to locally serve the extension binding which has been added to a live storefront.

Syntax

fdk binding preview [options]

Command Options

Option	Description
-n, --name	(Optional) Name of the section binding
-f, --framework	(Optional) Runtime framework. Supported values are vue2 and react
-id, --extensionId	(Optional) Extension Id of the current extension.
-org, --organisationId	(Optional) Organisation Id of the current extension.

Example

fdk binding preview

---

show-context

This command will allow developers to see the current extension section context.

Syntax

fdk binding show-context

---

clear-context

This command will allow developers to clear the current extension section context.

Syntax

fdk binding clear-context

Partner Commands

connect

This command is used to add your partner access token to update extension details on partners panel.

Syntax

fdk partner connect [options]

Command Options

Option	Description
--help	Show help
--verbose, -v	enable debug mode

Example

fdk partner connect

---

Config Commands

Set Commands

The set commands allow you to configure the cafile and strict-ssl settings for the tool. This is useful for ensuring that the tool uses the correct SSL certificates and validation settings according to your requirements.

Command	Description
set cafile <file-path>	Sets the CA file to the specified file path.
set strict-ssl <true/false>	Enables or disables strict SSL validation.

Example

fdk config set cafile /etc/ssl/certs/ca-certificates.pem

fdk config set strict-ssl false

Notes

• Ensure that the file path provided for the CA file is valid and accessible.
• The strict SSL setting should be either true or false.

Environment Variables

Developers can configure settings using environment variables.

---

FDK_EXTRA_CA_CERTS: Set this variable to specify the CA file path (cafile).

---

FDK_SSL_NO_VERIFY: Set this variable to true to disable strict SSL validation (strict-ssl=false).

---

Example

FDK_EXTRA_CA_CERTS=/path/to/your/cafile fdk login

FDK_SSL_NO_VERIFY=true fdk login

Get Commands

The get commands allow you to view the current configuration values for cafile and strict-ssl. This is useful for verifying what values are currently set and ensuring that your configuration is correct.

Command	Description
get cafile	Retrieves the current CA file path.
get strict-ssl	Retrieves the current strict SSL setting.

Example

fdk config get cafile

fdk config get strict-ssl

Delete Commands

The delete commands allow you to remove the current configuration for cafile and strict-ssl. This can be useful for resetting configurations or removing settings that are no longer needed.

Command	Description
delete cafile	Deletes the current CA file configuration.
delete strict-ssl	Deletes the current strict SSL configuration.
rm cafile	Alias for delete: Deletes the current CA file configuration.

Example

fdk config delete cafile

fdk config delete strict-ssl

fdk config rm cafile

---

Known Issues

Cloudflare Tunnel Startup Issue on Apple Silicon Machines

When attempting to start a Cloudflare tunnel using the fdk tunnel or fdk ext preview commands, users on Apple Silicon machines may encounter difficulties due to the Cloudflare binary's compatibility requirements.

Solution: Install Rosetta, which allows you to run applications that contain x86_64 instructions on Apple Silicon. You can do this by executing the following command in your terminal:

softwareupdate --install-rosetta

This command prompts your system to install Rosetta, resolving the compatibility issue and allowing the Cloudflare tunnel to run smoothly on your machine.

Other Fynd projects

Project	Link
Nitrozen Vue
Javascript SDK
Extension SDK
Extension Bridge

---

Contributing

Checkout CONTRIBUTING.md for more information on how to get started contributing to this repository.

---