Skip to main content

Get Started with Logistics extension

This page provides all the steps needed to create your first logistics extension. It covers the following tasks:

  1. Install Fynd Development Kit Command-line Interface (FDK-CLI)
  2. Generate boilerplate for extension
  3. Populate test data
  4. Preview your extension

Prerequisites​

Before getting started, you'll need the following:

Steps to create a Development Company
  1. Go to Fynd Partners↗.
  2. Login to the Fynd Partners.
  3. Select a suitable organization.
  4. In the left pane, click Companies and go to Development tab.
  5. Click Add.
  6. Fill in the required details.
  7. Click Save. Your account is created and will be available in the development company page.
  8. Click the required development company from the listing page. You will be redirected to the development company in the Fynd Commerce.

1. Install FDK CLI​

The FDK CLI simplifies theme and extension development using commands for creating, testing, and deploying projects. For more details, refer to the GitHub documentations↗.

  • Run the following command in your terminal to install FDK CLI:
npm install -g @gofynd/fdk-cli
note

You can run fdk --version to check if FDK CLI is successfully installed.


2. Generate a Boilerplate​

  1. Run the following command to log into your Fynd Partner account:
fdk login
  1. Select the account for which you want to create the extension.
note

After login, you can run fdk user to verify if you've logged in.

  1. Go back to your terminal and run the following command to initialise a new extension:
fdk extension init
  1. Select Create new extension.

  1. Select Logistics Extension.

  2. Enter a name for your extension.

  3. Select the extension type as Private.

  4. Select your preferred technology stack for the template.
    We recommend building with Node + React.js + SQLite.

info

The fdk extension init command creates a folder in your local system and downloads the boilerplate for you to get started. This command also registers a "Company Level" extension in the Fynd Partner's account. You can change all the extension details in the Partners panel.

The boilerplate contains your API credentials and takes care of authentication into Fynd Commerce for using the Platform API, Storefront API, and webhooks.


3. Populate Test Data​

  1. Run the following command to navigate to the extension directory:
cd "extension-name"
  1. Run the following command:
fdk populate
  1. Select your development company.

note

The fdk populate command adds a predefined set of products to the selected development company. This can be done only once per development company. However, if preferred, you can also create the products manually.


4. Preview Your Extension​

  1. Run the following command:

    fdk extension preview

    By default, FDK uses a Cloudflare tunnel to expose your local extension for preview. If you prefer to use a different tunneling service, refer to Preview Extension with Custom Tunnel for steps.

  2. Copy the preview URL from your terminal into the browser.


  1. Click Accept and Continue.
🏆Congratulations!

You've successfully created and launched your first extension.


Preview Extension with Custom Tunnel​

To enhance flexibility during local development, FDK supports a custom tunnel URL in the fdk extension preview command.

By default, FDK uses Cloudflare to expose your local extension. However, you might prefer to use other tunneling service for extension preview.

There are two ways to preview your extension using custom tunnel:

  1. --custom-tunnel flag
fdk extension preview --custom-tunnel

When you run this command, the CLI will prompt you to enter a custom tunnel URL. This tunnel must be listening on the port number suggested by the CLI.

For example:

? Please enter the Tunnel URL that is listening on port 46456 : https://you-tunnel-url

If you do not to provide a custom tunnel, the FDK will automatically use to the default Cloudflare tunnel.

  1. --tunnel-url and --port flag
fdk extension preview --tunnel-url https://your-tunnel-url --port <port-number>

This method bypasses the interactive prompt by directly specifying the tunnel URL and port number when running the command.

Next Steps​

Explore the Extension Development Guide to understand the how boilerplate code works.


Was this section helpful?