Setting Up a Theme Locally

Introduction:

Welcome to the first tutorial in the Fynd Platform Theme Development series. In this session, we will cover how to set up a local development environment to create and customize themes. This tutorial includes installing tools, initializing a theme project, and previewing changes locally.

1. Prerequisites

Before starting, ensure you have the following:

• Node.js: Install Node.js v16.19 or above. Git: Required for version control and managing code repositories.
• FDK CLI: A command-line tool for managing themes on the Fynd Platform.
• A Fynd Partner Account: Access to a development or live account in your partner organization introduction​theme-creation.

2. Installing the FDK CLI

To install the FDK CLI:

npm install -g @gofynd/fdk-cli

Verify the installation:

fdk --version

If installation fails due to permission restrictions, use sudo or run as an administrator.

3. Authenticating Your Partner Account

Log in to your Partner Account:

fdk login

This opens a browser window where you can authenticate with your credentials. After logging in, you will see your partner organizations. Select the one where you want to create your theme.

Verify login:

fdk user

This will display your authenticated user details.

4. Initializing a Theme Project

Create a new theme project using the FDK CLI:

fdk theme new --name <theme-name>

This command generates a project folder containing the base theme code. Use the following commands to navigate to the project folder:

cd <theme-name>

Run fdk theme serve to preview the default theme.

5. Running the Local Development Server

Start the development server:

fdk theme serve

6. Understanding the Theme Structure

The theme code follows a React based architecture. The directory structure includes:

theme/pages/: Contains page templates (e.g., home, product).
theme/sections/: Reusable UI components.
theme/assets/: Static files such as images and fonts.

7. Editing and Previewing Changes

Modify theme files to customize the look and feel. For example, add a heading to the homepage:

Navigate to theme/pages/home.jsx.
Insert the following code snippet:

<h1>Welcome to My Custom Theme</h1>

Save the file, and the changes will automatically reflect in the local preview.

8. Syncing Your Theme

After testing locally, sync your theme to the Fynd Platform:

fdk theme sync

Visit the Theme Panel on the platform to apply and preview your changes in the live environment.

9. Best Practices

Always test thoroughly in the local environment before syncing.
Follow Fynd's guidelines to ensure compatibility with the platform and improve performance.

Conclusion:

You have now set up your local development environment for creating themes on the Fynd Platform. In the next tutorial, we’ll explore creating and updating sections to enhance your theme's functionality. See you there!