The FDK CLI enables theme developers to create, initialize, and customize themes for the Fynd Platform. It facilitates local development and allows you to update the theme on your sales channel. This document provides instructions on how to utilize the FDK CLI for theme development.
Before we start
Before we can start working on our theme, there are a few prerequisites that need to be met.
- Node.js is a prerequisite for installing the FDK CLI. Please ensure that you have Node.js installed on your computer. It's important to note that Node versions are limited to Node 15, although future releases may be supported. Download the recommended version of Node.js.
- Git installed on your computer to create new themes. Git is essential for version control and managing the codebase of your themes. Please make sure you have Git installed before proceeding with theme creation.. You can download Git from here.
- Basic knowledge of VueJS.
- [MacOS]: You need to install Rosetta for MAC. Visit this link to see how to install.
Install FDK CLI
The FDK CLI is a command-line tool designed to assist developers in building themes, extensions, and more. To install the FDK CLI, please follow the instructions provided below:
npm install -g @gofynd/fdk-cli
Note: If global installation fails because of permission restrictions, execute the command above with sudo/root permissions.
To verify if the installation was successful, use the command below. If everything went well, you should see the FDK prompt with the CLI’s latest version.
fdk -—version
User Authentication
Before proceeding to create a theme, it is important to authenticate yourself using the Command Line Interface (CLI). In this case, you can utilize your partner account for authentication. To log in, kindly execute the command provided below:
fdk login
- Upon executing the command, your default web browser will launch, opening the partner panel.
- In the partner panel, log in using your partner account credentials.
- After logging in successfully, you will see a list of organizations associated with your partner account.
- Select the organization that corresponds to the project you are working on.
By completing these steps, you will authenticate yourself and gain access to the necessary resources to create your theme.
Create a theme using Emerge
Now that you have successfully installed the CLI, it's time to create a new theme. Follow these steps:
-
Choose a name for your theme and type of your theme. For example, let's call it "Dusk." And we want to create a vue2 theme.
-
Open your command-line interface (CLI) and run the following command to create a new folder with the theme name and the necessary code:
fdk theme new -n Dusk
This command will generate a folder named "Dusk" that includes all the required code for your theme.
- Now, navigate to the theme directory by running the command:
cd Dusk
This will take you to the "Dusk" folder where your theme files are located.
- Finally, open the "Dusk" folder in your preferred integrated development environment (IDE) to start working on your theme.
By following these steps, you will have successfully created a new theme folder named "Dusk" and can begin developing your theme by opening it in your chosen IDE.
Use an existing theme
To clone an existing theme code, you can execute the following command:
fdk theme init
Running this command will prompt you to select the account type, company, sales channel, and the desired theme to initialize.
After executing the command and making the appropriate selections, the cloning process will begin. Once it successfully completes, you can open the cloned theme code inside your favorite integrated development environment (IDE) to start working on it.
Previewing your changes
After you create your theme, you can preview any changes you make on the local system. Execute the command below to serve your theme.
fdk theme serve
By default, server-side rendering is enabled, but you can add the --ssr false flag to disable it. When you run this command, you will find a new tab w in your default browser with your sales channel. In case it does not open, you can navigate to the URL below on your browser.
https://localhost:5001
- We highly recommend our end users to never use --ssr false flag. It is only kept as a feature to view your theme/website in client side rendering mode during development phase.
- Our live application websites (SIT/UAT/Prod) are always ssr enabled.
- Developing your theme under —ssr false flag during fdk theme serve will not guarantee the same thing will also work on the live application. This might take your application down after fdk theme sync till you fix it.
- So be sure of the results and know what you are doing here.
Syncing your code with the application
You might now want to sync your theme to the application. To sync your theme, use the command below:
fdk theme sync
When the sync completes, visit the Theme panel on the Fynd Platform and apply the theme you created from the Themes library. After you apply your theme, you can visit your application and you should have your newly created theme live on your application.