Fluent Commerce Docs

This lesson provides a step-by-step guide to downloading, installing, and setting up a new Component SDK project. You'll learn how to prepare your development environment, install necessary dependencies, and run the project locally. We'll also cover the crucial step of referencing your local plugin within your Fluent Web Apps manifest, enabling you to integrate your custom components into your applications.

Key points

Download and Extract: Download the Component SDK zip file and extract it to a suitable development location on your computer.
Yarn Installation: Navigate to the `omx-component-sdk` folder in your terminal and run yarn install to download all project dependencies.
Visual Studio Code Setup: Open the project in Visual Studio Code and verify that the sample components (e.g., `Hello.tsx`) are error-free.
Local Development Server: Start the development server using yarn start. This allows you to run your plugin locally and test it within your Fluent Web Apps.
Manifest Configuration: Add a reference to your local plugin project (running on localhost:3001) within your Fluent Store main manifest (`fc.mystique.manifest.store`) using a "type": "url" and "src" entry, linking your development environment to your application.

In this lesson, you will follow the steps to download the Component SDK and set up a new Component plugin project.

Use your assigned Training Account

This course assumes you are using your assigned Training Account, which has been set up with the correct setup to facilitate all the practical labs. Labs may not work correctly on a different Account.

Complete the steps below:

Download the Component SDK file.
Save the Component SDK zip file to your computer, and extract the zip file to a suitable location for development.

Extracting ZIP Folders

This video explains how to extract the ZIP folder

The Component SDK is a React-based web project that uses the yarn package manager. Watch the following video to complete the steps below to install the Component SDK:

Open a terminal (command line) window, and change the directory into the `omx-component-sdk` folder.
Next, run `yarn install` — this will download all the required dependencies set by the SDK.
Now open the `omx-component-sdk` folder in Visual Studio Code — You will notice that the project contains some sample components.
Open the `Hello.tsx` file and make sure that the Hello component file doesn't contain errors or red underlines.
While in development mode, you can run the project locally and reference it in your Fluent Web Apps manifest — You will configure this later in the course. However, in the meantime, switch back to the terminal window and start the project using `yarn start`

Installing Yarn

This video explains how to install Yarn

To use your plugin in a Fluent Web App, you can add a reference to your local plugin project running on localhost to your manifest file.You should also have the Fluent Store main manifest overridden in your account, as this was used in the UX Framework course.Open the `fc.mystique.manifest.store` setting and add the plugin reference as shown in the video below.`{`
` "type": "url",`
` "src":"http://localhost:3001/"`
`}`

Updating the Manifest

This video explains how to update the manifest

Knowledge Tracks Related To This Topic

Component SDK

Extending the UX Framework with the Component SDK

Building Custom Components with the Component SDK

Setting Up Your Component SDK Project

Client Scenario: Building a Product Availability Map

Creating and Registering a Custom Component

Configuring Custom Components via the Manifest

Accessing User and Location Context with the useAuth Hook

Integrating a Third-Party Map Component

Adding Nested (Child) Components

Accessing Page Query Data

Style and Theme Your Component

Make Your Component Interactive

Configuring Components with Settings

Configuring Components with Dynamic Attributes

Extending Forms with Custom Field Components

Implementing a Custom Form Field

Enhance Your Custom Fields: Leveraging Existing Components from the Registry

Fetching Data with the useQuery Hook

Completing the Custom Form Field: Outputting the Result

Creating Custom Template Helpers

Unit Testing Custom Components

Deploying a Custom Component Plugin

Content in this track:

Extending the UX Framework with the Component SDK

Building Custom Components with the Component SDK

Setting Up Your Component SDK Project

Client Scenario: Building a Product Availability Map

Creating and Registering a Custom Component

Configuring Custom Components via the Manifest

Accessing User and Location Context with the useAuth Hook

Integrating a Third-Party Map Component

Adding Nested (Child) Components

Accessing Page Query Data

Style and Theme Your Component

Make Your Component Interactive

Configuring Components with Settings

Configuring Components with Dynamic Attributes

Extending Forms with Custom Field Components

Implementing a Custom Form Field

Enhance Your Custom Fields: Leveraging Existing Components from the Registry

Fetching Data with the useQuery Hook

Completing the Custom Form Field: Outputting the Result

Creating Custom Template Helpers

Unit Testing Custom Components

Deploying a Custom Component Plugin

End Of Track

Setting Up Your Component SDK Project

Setting Up Your Component SDK Project

Overview

Key points

Extracting ZIP Folders

Installing Yarn

Updating the Manifest

Cameron Johns

Contributors:

Knowledge Tracks Related To This Topic

Building Blocks

By Type

Helpful Resources

Quick Links

Extracting ZIP Folders

Installing Yarn

Updating the Manifest