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 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.

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.

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. | | --custom-tunnel | Use this option when you want to use custom tunnel url. | | --port | Specify the port number on which the application is listening. This option is mandatory if tunnel URL option is provided. | | --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 --company-id 999

To start a preview with a custom URL and port:

fdk extension preview --tunnel-url https://custom-tunnel-url.com --port 8080

• Automatic Tunnel Creation: If no options related to the tunnel URL and port are provided, the command will automatically use Cloudflared as the tunneling tool.

• Custom Tunnel URL: If you wish to use a custom tunnel URL, you can provide it using the --tunnel-url option. In this case, you must also specify the port using the --port option.

• Interactive Prompt: If --custom-tunnel option is provided, the command will prompt you to enter the tunnel URL listening on a provided port number.

• 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

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.