Skip to main content

Create a Theme

Video: Installing FDK CLI for Theme Development

In this tutorial, we will use FDK CLI to create a new theme. This theme is created using the default theme template Emerge.

What will you learn?#

After you've finished this tutorial, you'll have accomplished the following:

  • Setup your local development environment
  • Have the default template ready for you to use.
  • Previewed changes made to your local code in real-time
  • Sync the code to your application

Before we start#

There are a few prerequisites before we can start working on our theme.

  • Node.js: In order to install FDK CLI you will need to have Node.js (we recommend the latest stable version- but the maintenance and active LTS releases will also work) installed on your computer. Download the recommended version of Node.js.

  • Git: Additionally, you'll need Git to create new themes. You can download Git from here.

  • Basic knowledge of VueJS.

  • Add entry to /etc/hosts

    • Execute the command sudo nano /etc/hosts
    • Add the following lines to the end of the file
127.0.0.1 localdev.fynd.com

Step 1: Install FDK CLI#

FDK CLI is a CLI tool that helps developers build themes, extensions, etc. Follow the below instructions to install FDK CLI.

npm install -g @gofynd/fdk-cli

Note: If global installation fails due to restricted permissions you can execute the command with sudo/root permissions.

To verify the installation was successful use the below command. If everything went well you should be prompted with the latest version of the CLI

fdk —version

Step 2: Authenticate the CLI#

Before we start creating a theme we must first authenticate using the CLI for the next commands to work. You can use your registered mobile number or email. For mobile OTP login use the below command.

fdk login -m <mobile_number>

An OTP will be sent to the mobile number after which you can enter the OTP into the prompt. In case of email & password login, use the below command.

fdk login -e <email_id>

You will be prompted to enter your password. Enter your password to authenticate the CLI.

Step 3: Create a theme using Emerge#

Now that you have successfully installed the CLI it is time to create a new theme. For this, you will need a theme token. Find your theme token here.

Next, you will need a name for your theme. Let’s say we name it Dusk, we can execute the below command. This will create a new folder with the theme name will all the necessary code required for a theme to work properly

fdk theme new -t <theme_token> -n Dusk

Now navigate to the directory of your theme name and open it any IDE of your liking

cd Dusk

Step 4: Previewing your changes#

After you create your theme you can preview your changes on the local system. Execute the below command to serve your theme.

fdk theme serve

By default server-side rendering is enabled but if you want to disable it you can add --ssr false flag to disable it. After running this command a new tab will open in your default browser. In case it does not open navigate to the below URL on your browser

https://localdev.fynd.com:5001

Step 5: Syncing your code to the application#

You might now want to sync your theme to the application. To sync your theme use the below command

fdk theme sync

After syncing is complete visit the Theme panel on Fynd Platform and apply the theme you created from the theme library. Once applied you can visit your application and you should have your newly created theme live on your application.