Fluent Commerce Docs

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.

Cross-Origin Resource Sharing (CORS)

CORS is a mechanism that allows a server to specify which origins (domains, ports or schemes) are permitted to access its resources. It is essential for integrating applications and ensuring secure interactions between different domains.What you need to doAdd these HTTP headers to your server responses:

Access-Control-Allow-Origin: https://`{{account}}`.sandbox.apps.fluentcommerce.com
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization

Note - the domain in the Access-Control-Allow-Origin will need to be updated depending if it is Sandbox or Production related and the `{{account}}` tag will need to be substituted for the Fluent Account ID.

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.

Deploying Multiple Plugins

You can deploy multiple plugins for a single project to a folder, and use the folder path as the plugin reference in your manifest document.

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

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

Deploying a Custom Component Plugin

Deploying a Custom Component Plugin

Overview

Key points

Cameron Johns

Contributors:

Knowledge Tracks Related To This Topic

Building Blocks

By Type

Helpful Resources

Quick Links