Setting up the Manifest Document
Authors:
Cameron Johns, Cille Schliebitz, Anita Gu
Changed on:
3 Feb 2025
Overview
This lesson introduces the Manifest document, a crucial component in defining the structure and layout of Fluent Web Apps. We'll cover how to set up your development environment with a pre-configured VS Code workspace, understand the key elements of a Manifest document, and learn how to create a new web app by defining an account-level setting. We'll also explore the different types of routes used in Manifests and walk through creating a simple page route. This setup and introduction will prepare you for more advanced Manifest configurations in later lessons.
Key points
- VS Code Setup: Use the provided VS Code workspace for Manifest editing.
- Manifest Definition: The Manifest defines a Fluent Web App's structure, layout, navigation, and data.
- Account Setting: Manifests are stored as account-level settings.
- Web App Access: Web apps are accessed via URLs based on the Manifest's appName.
- Key Elements (Name, Title, Context, Routes): Manifests define these core elements.
- Route Types: Page, Section, and Reference routes define navigation within the app.
Download the VS Code Workspace for configuring Manifests
We've provided a VS Code Workspace project, which comes preconfigured with the Manifest Schemas to enable Auto-Complete in VS Code.
Simply download the attached Zip file, extract it on your computer, and open the workspace file in VS Code.
Once complete, type "Done" into the "Your Response/Notes" form, select "Movyn John OR Randy Chan" as your instructor, and then click "Submit Assignment".
Please Note:
Before you can start following the online course practically, you will need your Fluent Account credentials.
If you have not yet received your credentials, please type "Waiting for Credentials" into the response form, or email learning@fluentcommerce.com to request them.
Please allow up to 48 hours to receive the email with details.
Please download the zip here.
Introduction to the Manifest Document
The Manifest document describes the structure and layout of a Fluent Web App, including the navigation, and all pages within the application.
The manifest document is added as an ACCOUNT level setting.
The name defined in the manifest determines the URL path required to access the Fluent Web App.
For example, a manifest declaring a name or "mywebapp" would be accessible via the following URL:
`https://[ACCOUNTID].sandbox.apps.fluentcommerce.com/mywebapp/`The manifest also determines the context of the Web App, either "retailer" or "location", and delivers Role based visibility management, so that each Web App and screen can be configured based on each client's unique organisational structure.
The manifest also defines the data to be provided to the page via GraphQL queries.
Watch the video below to see a simple new manifest document structure...
Creating a new manifest
How to create a new manifest document
Creating a Web App is as simple as creating an Account level setting with the following naming convention:
`fc.mystique.manifest.[appName]`...where [appName] is the name of the web app. The Setting should be a JSON type, and store the manifest document in the JSON value. To access the web app, you would use the following URL:
`https://[ACCOUNTID].sandbox.apps.fluentcommerce.com/[appName]/`Each Fluent Web App should a define Name, a Title, a Context, and a set of Routes.
The Context is the scope of interaction with the Fluent Order Management system.
For example, the Fluent Store Web App is set to a Location Context, since all the actions and data present within the Web App are specific to an individual Store.
A Retailer Context Web App would provide Retailer scoped actions and data management.
Routes are the URL paths that point to Pages or screens.
There are 3 types of Routes that can be configured in a Manifest:
- A Page Route - which is a direct link to a page
- A Section Route - which is a navigation grouping header
- A Reference Route - which is a reference to another manifest document called a fragment, which allows you to split and manage large manifests in separate documents
Watch the video below to see how to create a new app...
To follow along on your own training account, log in to Fluent Admin Console using the FC_FASHION retailer user:
`fc_fashion_admin`Setting up the manifest document
This video shows how to set up the manifest document
Since this web app was configured to a `
`location``F_syd@fcfashion.com.au`Note: Don't worry about the "error" text displayed - we'll fix this next!
Let's add a simple Page route to the Manifest:
A Page Route should be set to type "page", declare a relative URL path, use a foundation or page based component, and optionally a nav configuration for the main menu.
Once you have your first page, you can now set your web app's home path.
Let's see it in action...
How to add a blank page
This video shows how to add a blank page
Learn more about configuring the manifest document.
