Fluent Commerce Logo
Docs
Sign In

Understanding Manifest Structure

Essential knowledge

Authors:

Cameron Johns, Cille Schliebitz, Anita Gu

Changed on:

3 Feb 2025

Overview

This lesson details the structure of Manifest documents, covering both main web application manifests and fragment manifests. We'll explore the required fields and optional configurations for the main manifest, including context, routes (section, page, and reference), and plugin integration. We'll also examine the simpler structure of fragment manifests and how they contribute to managing complex UI configurations.

Key points

  • Manifest Types: There are two types of Manifests: main and fragment.
  • Main Manifest Structure: Required fields include manifestVersion, name, title, context, and routes. Optional fields include homePath.
  • Context Configuration: Defines whether the app operates at a LOCATION or RETAILER level and allows role-based access control.
  • Routes (Section, Page, Reference): Routes define the navigation menu. Section routes group menu items, Page routes link to specific pages, and Reference routes include fragment manifests.
  • Fragment Manifests: Fragment manifests contain only manifestVersion and routes, allowing for modular management of large Manifest configurations.
  • Plugin Integration: The Manifest can include references to custom component plugins hosted externally.

Top Level Manifest Structure

There are two types of manifest document formats. The primary type is the main web application manifest, and the second type is a fragment that can be referenced from the main Manifest document.

The main manifest document structure is as follows:

1{
2     "manifestVersion": "2.0",
3     "name": "store",
4     "title": "Fluent Store",
5     "context": {
6         "level": "location"
7     },
8     "routes": MystiqueRoute[]
9 }

Language: plain_text

Name: Main manifest document structure

Description:

[Warning: empty required content area]

The required fields include:

  • manifestVersion
  • name
  • title
  • context
  • routes

Additionally, a main manifest can also set the homePath, which is the default path to load on login.

The Context configuration defines whether the app operates at a LOCATION or a RETAILER level. You can also declare that a user should have a specific role assigned in that context to be allowed access to the App.

Routes drive the Navigation menu drawer. The simplest type of Route is a Section route, which defines the navigation group header. For example, you may want to group a number of top-level menu items under a section called "Admin," "Customer Service," or "Inventory Management."

No alt provided

The primary Route type is a page route. This defines a specific page to display when the user clicks on the navigation item.

No alt provided

Finally, there are Reference routes, which provide manifest fragmentation capability, so that you do not need to manage the whole UI configuration in a single (and very large) JSON document.

`{`

`    "type": "reference",`

`    "settingName": "fc.mystique.manifest.servicepoint.fragment.pickandpack"`

`}`

The structure of a fragment Manifest is as follows:

`{`

`    "manifestVersion": "2.0",`

`    "routes": MystiqueRoutes[]`

`}`

Finally, the Manifest document can also be configured to read custom plugins containing custom components referenced within the Manifest.

`"plugins": [{`

`    "name": "Example",`

`    "src": "https://example.com/bundle.js"`

`}]`

The Configuration Guide provides more information and instructions on configuring each part of the Manifest document.

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