introduce:
Welcome to the first tutorial in the Fynd platform theme development series. In this session, we’ll cover how to set up a local development environment to create and customize themes. This tutorial covers installing the tool, initializing the theme project, and previewing changes locally.
1. Prerequisites
Before you begin, make sure you have the following:
- Node.js: Install Node.js v16.19 or higher. Git: Required for version control and managing code repositories.
- FDK CLI: Command line tool for managing themes on the Fynd platform.
- Fynd Partner Account: Visit a partner organization to introduce a development or live account in topic creation.
2. Install FDK CLI
To install the FDK CLI:
npm install -g @gofynd/fdk-cli
Verify installation:
fdk --version
If the installation fails due to permission restrictions, please use sudo or execute as an administrator.
3. Verify your partner account
Log in to your partner account:
fdk login
This will open a browser window where you can authenticate using your credentials. Once logged in, you will see your partner organizations. Select the location where you want to create the theme.
Verify login:
fdk user
This will display your authenticated user details.
4. Initialize theme project
Use the FDK CLI to create a new theme project:
fdk theme new --name
This command generates a project folder containing the base theme code. Navigate to the project folder using the following command:
cd
Run fdk themeserve to preview the preset theme.
5. Run the local development server
Start the development server:
fdk theme serve
6. Understand the topic structure
The theme code follows a React-based architecture. The directory structure includes:
theme/pages/: Contains page templates (e.g. homepage, products).
theme/sections/: Reusable UI components.
theme/assets/: Static files such as images and fonts.
7. Edit and preview changes
Modify theme files to customize the look. For example, to add a new title to the home page:
Navigate to theme/pages/home.jsx.
Insert the following code snippet:
<h1>Welcome to My Custom Themeh1>
Save the file and your changes will automatically be reflected in the native preview.
8. Sync your themes
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 a live environment.
9. Best Practices
Always test thoroughly in your local environment before synchronizing.
Follow Fynd’s guidelines to ensure platform compatibility and improve performance.
in conclusion:
You have now set up a native development environment for building themes on the Fynd platform. In the next tutorial, we’ll explore building and updating sections to enhance the functionality of our theme. See you then!