Fluent Commerce Logo
Docs
Help & Feedback
Sign In

Content in this track:

Extending the UX Framework with the Component SDK

1

Building Custom Components with the Component SDK

2

Setting Up Your Component SDK Project

3

Client Scenario: Building a Product Availability Map

4

Creating and Registering a Custom Component

5

Configuring Custom Components via the Manifest

6

Accessing User and Location Context with the useAuth Hook

7

Integrating a Third-Party Map Component

8

Adding Nested (Child) Components

9

Accessing Page Query Data

10

Style and Theme Your Component

11

Make Your Component Interactive

12

Configuring Components with Settings

13

Configuring Components with Dynamic Attributes

14

Extending Forms with Custom Field Components

15

Implementing a Custom Form Field

16

Enhance Your Custom Fields: Leveraging Existing Components from the Registry

17

Fetching Data with the useQuery Hook

18

Completing the Custom Form Field: Outputting the Result

19

Creating Custom Template Helpers

20

Unit Testing Custom Components

21

Deploying a Custom Component Plugin

22

End Of Track

23

Deploying a Custom Component Plugin

Essential knowledge

Authors:

Cameron Johns, Cille Schliebitz, Anita Gu

Changed on:

3 Feb 2025

Overview

This lesson covers the deployment process for custom component plugins. Unlike server-side plugins, component plugins are frontend JavaScript bundles that can be hosted on any web server. We'll explore the key steps involved in preparing your plugin for production, including versioning, bundling, and deployment, and how to reference the deployed plugin in the manifest document.

Key points

  • Frontend Deployment: Custom component plugins are deployed as frontend JavaScript bundles, simplifying the deployment process compared to server-side plugins.
  • Versioning: Versioning the bundle.js file (e.g., using Webpack's contenthash) is crucial for cache busting and ensuring updates are immediately reflected.
  • Bundling with Yarn: The yarn run bundle command is used to create the production-ready bundle, which is placed in the dist folder.
  • Web Hosting: The contents of the dist folder can be deployed to any web host.
  • Manifest Reference: The deployed plugin is referenced in the manifest document via its URL.
  • Multiple Plugins: Multiple plugins for a single project can be deployed to a single folder, with the folder path used in the manifest.

Unlike the OMX Workflow Framework where custom Rules plugins are required to be uploaded and activated within the Fluent platform, custom Component plugins are simple frontend javascript bundles that can be hosted on any web server, and referenced through the manifest document via URL.

There are a few things you should do when preparing to deploy your production ready plugin to your web host:

  • Versioning
  • Bundle
  • Deploy
  • Add your plugin reference to the Manifest document

Since browsers cache files, versioning of the 

`bundle.js`
file is important to ensure that your changes are immediately reflected once deployed. This can be done using webpack  
`contenthash`
 feature. 

Once you've configured your package.json file with plugin versioning, you can use 

`yarn run bundle`
to bundle your plugin. This will create a distribution folder called 
`dist`
, which can be deployed to a web host of your choice.

To see more about how to version your plugins, go to Component SDK > Plugin Versioning. 

Cameron Johns

Cameron Johns

Contributors:
Cille Schliebitz
Anita Gu

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
    • Building Blocks
    Building Blocks
    Packages & Modules
    UI Components
    Workflows
    Settings
    Interface Contracts
    Rules
    By Type
    All Types
    Knowledge Tracks
    Extend Knowledge
    Glossary
    How-to Guides
    Sitemap
    Topics
    Use Cases
    Helpful Resources
    Platform Limits
    Support Policy
    Service Level Agreement (SLA) - Enterprise
    Deprecation Policy
    Extend Knowledge Content – Terms and Conditions
    System and Organization Controls (SOC) 3 Report
    Data Privacy Addendum
    Security Policy
    Quick Links
    For Partners
    Customer Resources
    Webinars and Events
    eLearning

    Copyright © 2025 Fluent Retail Pty Ltd (trading as Fluent Commerce). All rights reserved. No materials on this docs.fluentcommerce.com site may be used in any way and/or for any purpose without prior written authorisation from Fluent Commerce. Current customers and partners shall use these materials strictly in accordance with the terms and conditions of their written agreements with Fluent Commerce or its affiliates.

    Fluent Logo