Build a Fynd Extension using Node.js + Next.js

This project outlines the development process for a Fynd extension that displays product listings for a company and its associated applications. By following this guide, you'll be able to set up the development environment, build the extension locally, and understand the testing procedures.

Quick start

Prerequisites

• You have installed globally Node 18.X.X or above version.
• You have fdk-cli installed install
• You have created a partner account.
• You have created a development account and populated test data in it.

Install Template Locally

To initialize your extension template locally, run the following command:

fdk extension init --template node-next

Enter your preferred extension name and type, and you are all set.

Local Development

To start local development, execute the following command:

fdk extension preview

This command will provide a partner’s panel URL where you can interact with your extension. For more information, please read this guide.

Docker Instructions

To run the application using Docker in Production environment, follow these steps:

• Build the Docker image:

  docker build -t extension .

• Run the Docker container

  docker run -p 8080:8080 extension 
  

To Run the extension with Docker locally, ensure you first prepare your environment:

• Copy the .env.example file and rename it to .env at the root of your project.
• Fill in all the required values in the .env file.

After setting up your .env file, you can proceed with the Docker commands listed above to build and run your extension locally.

Directory structure

Below is the structure of the project directory along with brief descriptions of the main components:

  ├── README.md                              # Project documentation
  ├── fdk.ext.config.json                    # Configuration file for FDK extension
  ├── server.js                              # Entry point for the application.
  ├── sqlite.js                              # Sqlite session storage
  ├── jest.config.mjs                        # Jest configuration for unit tests
  ├── next.config.mjs                        # Custom configuration for Next.js.
  ├── package-lock.json                      # Lockfile for npm dependencies
  ├── package.json                           # Project metadata and dependencies
  ├── public                                 # Static assets folder.
  │   ├── assets                             # Folder for images and other static files.
  └── src                                    # Source code for the application.
      ├── tests                              # Test case folder
      ├── components                         # Components of next js
      └── index.css                          # CSS for the index page.
      └── pages                              # Next.js pages directory.
          ├── company                        # Dynamic route handling for company-related pages.
              └── [id].js                    # Home page for company route
              └── [id]                       
                └── [application]            
                  └── [applicationId]        # Home page for application route