Get a clear, visual introduction to two core concepts in Contentstack: Organizations and Stacks. Learn how Organizations provide centralized control for users and permissions, while Stacks act as flexible, dedicated workspaces for managing content, assets, workflows, and publishing. Whether you’re launching a single site or managing global digital experiences, this video will help you understand how to structure your projects for success.

Understanding Organizations And Stacks

Understanding Organizations & Stacks

UnderstandingOrgsStacks_Thumbnail.jpg

<h2>Introduction to Taxonomy in Content Management</h2>
Welcome to the&nbsp;Taxonomy course in Contentstack! This module will explore how taxonomy is crucial in organizing and managing content within your digital ecosystem.
<h2>Understanding Taxonomy</h2>
Taxonomy helps you categorize pieces of content within your stack to facilitate easy navigation, search, and retrieval of information. You can hierarchically organize your web properties based on your requirements, such as their purpose, target audience, or any other aspects of your business.
This systematic organization gives developers and content managers complete control over their content and helps users find relevant content more efficiently, thus improving the overall user experience.
<h2>Key Features of Taxonomy</h2>
Let's delve into the key features of Taxonomy as they apply to Contentstack:
<ol>
 <li>
 
 Structured Hierarchy:&nbsp;Taxonomies arrange terms in a hierarchical structure, simplifying the categorization and navigation of information.
 
 </li>
 <li>
 
 Categorization and Classification:&nbsp;With taxonomy, you can categorize and classify entries using terms, enabling you to group similar content elements together logically.
 
 </li>
 <li>
 
 Enhanced Search Efficiency:&nbsp;By narrowing down search results to relevant categories, taxonomy enhances search efficiency, allowing users to find the content they need quickly and effortlessly.
 
 </li>
 <li>
 
 Use the APIs to retrieve Entries tagged with Taxonomy terms in the frontend web application.
 
 </li>
</ol>
<h2>Role-based Advantages</h2>
Now, let's explore how Taxonomy benefits different roles within your organization:
<ol>
 <li>
 
 Content Managers:&nbsp;Taxonomy significantly enhances content organization and navigation for content managers. They can categorize and manage content across multiple types, making locating and maintaining specific content easier.
 
 </li>
 <li>
 
 Developers:&nbsp;For developers, Taxonomy offers a structured approach to organizing content facilitating the building and maintenance of website content. Developers can access content based on taxonomy terms using the APIs, allowing more advanced queries with the Content Delivery API.
 
 </li>
 <li>
 
 Content Editors:&nbsp;Taxonomy streamlines workflow for content editors, allowing them to navigate and categorize content intuitively due to the hierarchical structure. This boosts productivity and reduces the time spent searching for specific content.
 
 </li>
</ol>

<h2>Real-World Example: E-commerce Product Taxonomy</h2>
Imagine you are managing an e-commerce platform that sells a wide range of products, from electronics to clothing. Let's apply the principles of taxonomy to organize the product catalog effectively.
1. Structured Hierarchy:
<ul>
 <li>
 Category:&nbsp;Electronics
 <ul>
 <li>
 Subcategories:&nbsp;Smartphones, Laptops, Cameras
 </li>
 </ul>
 
 </li>
 <li>
 Category:&nbsp;Clothing
 <ul>
 <li>
 Subcategories:&nbsp;Men's Clothing, Women's Clothing, Kids' Clothing
 </li>
 </ul>
 
 </li>
 <li>
 Category:&nbsp;Home &amp; Kitchen
 <ul>
 <li>
 Subcategories:&nbsp;Furniture, Appliances, Cookware
 </li>
 </ul>
 
 </li>
</ul>
2. Categorization and Classification:
<ul>
 <li>
 Within the "Smartphones" subcategory, products can be further classified based on brands such as Apple, Samsung, or Google.
 </li>
 <li>
 In the "Men's Clothing" category, items can be categorized by type, including shirts, pants, and accessories.
 </li>
</ul>
3. Enhanced Search Efficiency:
<ul>
 <li>
 A user searching for "Samsung smartphones" can quickly find relevant products within the "Smartphones" category under the "Electronics" section, narrowing down search results.
 </li>
 <li>
 Similarly, searching for "men's shirts" will lead users to the appropriate category within the "Clothing" section.
 </li>
</ul>

Taxonomy in Content Management

Welcome to Taxonomy

If you have not yet configured Postman to work with the Academy training instance, this module will help you download and setup the Contentstack Postman collections.
1.&nbsp;<a href="https://www.contentstack.com/docs/developers/apis/postman-collections">Download the Postman collections</a>
2.&nbsp;<a href="https://www.contentstack.com/docs/developers/apis/postman-collections">Download and install the Environment files for both Content Management and Content Delivery</a>
3. Create a&nbsp;<a href="https://www.contentstack.com/docs/developers/create-tokens/create-a-delivery-token">Delivery Token</a>&nbsp;for Preview and Production
4.&nbsp; Create a&nbsp;<a href="https://www.contentstack.com/docs/developers/create-tokens/generate-a-management-token">Management Token</a>

Configuring Postman with the Contentstack APIs

Using Postman and APIs in Contentstack

Introduction:&nbsp;In this module, you will learn how to create a taxonomy within Contentstack to effectively organize and structure your website's content.
Understanding Taxonomy:&nbsp;Taxonomies enable efficient content management and retrieval.&nbsp; Centrally managing taxonomies allow organizations to classify their content in a structured manner, enabling them to easily find content and also retrieve content based on the taxonomy and terms applied.&nbsp; In this course, we will look at how we can use taxonomies in Contentstack to structure and organize our content.
Step-by-Step Guide:
<ol>
 <li>
 
 Accessing Taxonomy Settings:
 <ul>
 <li>
 Log in to your Contentstack account.
 </li>
 <li>
 Navigate to the desired stack where you want to create a taxonomy.
 </li>
 <li>
 Click on the "Settings" icon (shortcut: press "S") located on the left navigation panel.
 </li>
 <li>
 Select "Taxonomy" from the settings menu. 
 </li>
 </ul>
 
 </li>
</ol>
<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltff4db51667495e31/6649053a4bfb7158ef42c0f1/new-taxonomy.png" alt="new-taxonomy.png" height="auto" />

<ol>
 <li>
 
 Creating a New Taxonomy:
 <ul>
 <li>
 Once in the Taxonomy section, click on the "+ New Taxonomy" button.
 </li>
 <li>
 Enter a Name for your taxonomy. Please note that the Unique ID will be auto-generated and can be edited until the taxonomy is saved. Once saved, the UID cannot be changed.
 </li>
 <li>
 Optionally, you can add a 'Description' of your taxonomy to provide additional context.
 </li>
 <li>
 Click on "Create Taxonomy" to finalize the creation process.
 </li>
 </ul>
 
 </li>
</ol>
<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltcb31202438264335/6649059b16e6bf7617590c83/new-dialog.png" alt="new-dialog.png" height="auto" />


Adding Terms to the Taxonomy:
<ul>
 <li>
 Within your newly created taxonomy, you can begin adding terms associated with the taxonomy.
 </li>
 <li>
 For example, if your taxonomy is based on "Superhero," you can create terms such as "Natural Powers," "Mystic Origins," "Scientific Experimentation," "Super Strength," etc.
 </li>
 <li>
 This step allows you to further organize and classify your content based on specific criteria.
 </li>
</ul>

<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt1cafb7dd805ee8bb/664905e8d4d02ee5f02eaba3/terms.png" alt="terms.png" height="auto" />Conclusion:&nbsp;Congratulations! You have successfully learned how to create a taxonomy within Contentstack to organize and structure your website's content. By leveraging taxonomies, you can enhance the usability and navigation of your website, providing users with a seamless browsing experience. Don't forget that&nbsp;you can also create taxonomies programmatically using the&nbsp;<a href="https://www.contentstack.com/docs/developers/apis/content-management-api#taxonomy">Create a Taxonomy API request</a>&nbsp;for added flexibility and automation.

Creating a Taxonomy

Creating a Taxonomy Walkthrough

After we create a Taxonomy we&nbsp; need to add it to a Content Type before we can start using it.&nbsp; To do that, we will need to edit an existing Content Type and add a new Taxonomy field.&nbsp; Currently, Contentstack allows one Taxonomy field per Content Type, and within this field it is possible to select one or more taxonomies to use for selecting and adding terms to the Entry.&nbsp; Let's take a look at a practical example to understand how we can add our Taxonomy to our Content Type.&nbsp;
1.&nbsp; Navigate to the Content Models window and edit the&nbsp;Character Content Type.
2.&nbsp; Add a new Taxonomy field<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltf9b6eb87c30d5f53/6649073a0a0de6d1a2314d19/taxonomy-content-type.png" alt="taxonomy-content-type.png" height="auto" />3. Select the Superhero Taxonomy&nbsp;

<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt023a2d4f291d753e/664907705c2483f6a6bc3484/superhero-taxonomy.png" alt="superhero-taxonomy.png" height="auto" />4. Save the Content Type

Using the Taxonomy in a Content Type

Using a Taxonomy to a Content Type Walkthrough

Welcome to the module on editing taxonomies within Contentstack! This module will explore how to easily modify your taxonomies to suit your evolving content organization needs.
Overview
Once you've created a taxonomy, you may need to make adjustments, such as updating its name or description. This module will guide you through the steps to edit a taxonomy efficiently.
Accessing Taxonomies
To begin editing a taxonomy, follow these steps:
<ol>
 <li>
 
 Log in:&nbsp;Access your Contentstack account.
 
 </li>
 <li>
 
 Navigate to Settings:&nbsp;On the left navigation panel, click on the "Settings" icon (shortcut: press "S").
 
 </li>
 <li>
 
 Select Taxonomy:&nbsp;Within the Settings section, choose the "Taxonomy" option.
 
 </li>
</ol>
Editing a Taxonomy
Once you've accessed the Taxonomy section, follow these steps to edit a taxonomy:
<ol>
 <li>
 
 Locate the Taxonomy:&nbsp;Identify the taxonomy you wish to edit from the list displayed.
 
 </li>
 <li>
 
 Access Edit Options:&nbsp;In the Actions column for the respective taxonomy, click on the ellipsis (three dots) icon.
 
 </li>
 <li>
 
 Initiate Editing:&nbsp;Select the "Edit" button from the options provided.
 
 </li>
</ol>
<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blted5a3726271be0d9/6649083e42843219ee1989c5/edit-taxonomy.png" alt="edit-taxonomy.png" height="auto" />
Making Changes
In the Edit Taxonomy modal, you can modify the following aspects of the taxonomy:
<ul>
 <li>
 Taxonomy Name:&nbsp;Update the name of the taxonomy to reflect any changes in its purpose or scope.
 </li>
 <li>
 Description:&nbsp;Edit or add a description to provide context or additional information about the taxonomy.
 </li>
</ul>
Please note: The Taxonomy UID cannot be edited once the taxonomy is created.
Saving Changes
Once you've made the necessary edits, click the "Update" button in the Edit Taxonomy modal to save your changes.
<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltd92f9c2458b232ef/6649086b6d7055d1ed4d90d9/save-edits.png" alt="save-edits.png" height="auto" />
Conclusion
In this module, you've learned how to effectively edit taxonomies within Contentstack, enabling you to adapt your content organization structure to meet your requirements better. Should you have further questions or require assistance, don't hesitate to contact our support team.

Editing a Taxonomy

Editing a Taxonomy Walkthrough

Here's a step-by-step guide for adding a taxonomy to a content type in your Contentstack account:
1. Log in to Your Contentstack Account: &nbsp; &nbsp;Open your web browser and navigate to the Contentstack login page. Enter your credentials to log in to your account.
2. Access Content Models: &nbsp; &nbsp;Once logged in, you'll be directed to your dashboard. On the left navigation panel, click the "Content Models" icon. Then, either create a new content type or select an existing one where you want to add the taxonomy.
3. Open Content Type Builder: &nbsp; &nbsp;On the "Content Type Builder" page, you'll see the fields of your selected content type. To add a new field, click the "Insert a field" (+ icon) that appears when you hover the cursor.
4. Select Taxonomy Field: &nbsp; &nbsp;From the list of available fields, choose "Taxonomy." <img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt1955decba4e089d9/664909a4dda14b775adff5fb/add-taxonomy.png" alt="add-taxonomy.png" height="auto" />
5. Configure Taxonomy Field Properties: &nbsp; &nbsp;Click on the properties (cog icon) to configure the properties of the taxonomy field.
Note:&nbsp;that the default UID for the taxonomy field is set to "taxonomies" and cannot be updated.

<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltb17fde85126bc9a8/664909d0dda14bd66fdff5ff/configure.png" alt="configure.png" height="auto" />
6. Add Taxonomy: &nbsp; &nbsp;Click the "+ Add Taxonomy" button. A dropdown menu will appear with available taxonomies within the stack. Select the taxonomy you want to add. Note: You can include multiple taxonomies within a single taxonomy field in a content type.

<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt773afb5030bd9b0c/66490a045c2483cdbcbc3488/add-taxonomy2.png" alt="add-taxonomy2.png" height="auto" />
7. Set Maximum Number of Terms: &nbsp; &nbsp;You can limit the maximum number of terms for the taxonomy field by entering a number in the "Maximum Number of Terms" field.
Note&nbsp;that the maximum number of terms allowed per entry is 25.
8. Make Field Mandatory (Optional): &nbsp; &nbsp;If you want to make this taxonomy field mandatory, disable the "Optional Field" toggle.
9. Apply Changes: &nbsp; &nbsp; Once you've configured the taxonomy field according to your requirements, click "Apply" to add the taxonomy to the content type.
11. Start Categorizing Entries: &nbsp; &nbsp; With the taxonomy field added to your content type, you can begin adding entries and categorizing them using your selected taxonomy. 10. Confirmation: &nbsp; &nbsp; Upon successful addition, you'll receive a confirmation message. You can now see the taxonomy field included in your content type.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltb0f09f2ab2af37b2/66490a375fd9afddf270e288/confirm.png" alt="confirm.png" height="auto" />By following these steps, you can seamlessly integrate taxonomy into your content types and efficiently organize your content.

Add Taxonomy to a Content Type

Welcome to the module on Deleting a Taxonomy in Contentstack. In this module, we'll explore the process of removing a taxonomy from your stack.
Introduction
If you have any questions or need assistance, please contact our support team for more information.
Deleting a Taxonomy
Contentstack allows you to delete a taxonomy you've created within your stack. However, it's crucial to understand that unless you're the Owner or Admin of the stack, you cannot delete taxonomies created by other stakeholders.
Step-by-Step Guide
Let's walk through the steps to delete a taxonomy:
<ol>
 <li>
 
 Accessing Taxonomy Settings:
 <ul>
 <li>
 Log in to your Contentstack account and navigate to the stack where you want to delete a taxonomy.
 </li>
 <li>
 Click on the "Settings" icon (shortcut: press "S") located on the left navigation panel.
 </li>
 <li>
 Select "Taxonomy" from the settings options.
 </li>
 </ul>
 
 </li>
 <li>
 
 Selecting and Deleting the Taxonomy:
 <ul>
 <li>
 Identify the taxonomy you wish to delete from the list.
 </li>
 <li>
 Click on the "ellipsis" (three dots) icon in the Actions column next to the taxonomy you want to remove.
 </li>
 <li>
 From the dropdown menu, choose "Delete."
 </li>
 </ul>
 
 </li>
</ol><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt3d7ef070c8554ae8/66490ab952619d0cc1a90a6c/delete.png" alt="delete.png" height="auto" />

<ol>
 <li>
 
 Confirming Deletion:
 <ul>
 <li>
 In the prompted Delete Taxonomy modal, type "DELETE" to confirm your action.
 </li>
 <li>
 Click on the "Delete" button to finalize the deletion process.
 </li>
 </ul>
 
 </li>
</ol><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt8e1438a4941b4fbc/66490ae70b508aca6cdcfc91/delete-confirm.png" alt="delete-confirm.png" height="auto" /> Warning
It's important to understand the consequences of deleting a taxonomy:
<ul>
 <li>
 Permanent deletion of the taxonomy and removal of its association with added content types.
 </li>
 <li>
 Deletion of all terms within the taxonomy and removal from entries.
 </li>
</ul>
Additional Deletion Option
Alternatively, you can also delete a taxonomy by following these steps:
<ul>
 <li>
 Click on the "ellipsis" (three dots) at the top right corner of the taxonomy page.
 </li>
 <li>
 Select "Delete Taxonomy."
 </li>
</ul>
<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blta3dc2fcc177f1e2f/66490b55428432fa191989cc/delete-confirm.png" alt="delete-confirm.png" height="auto" /> Conclusion
In conclusion, deleting a taxonomy in Contentstack involves a straightforward process, but it's essential to proceed with caution due to the permanent nature of this action. Understanding the implications of deletion ensures smooth management of your content structure.

Deleting a Taxonomy

With Contentstack, you can easily export a taxonomy in a JSON or CSV file.
To export a taxonomy, log in to your&nbsp;<a href="https://www.contentstack.com/login">Contentstack account</a>&nbsp;and perform the following steps:
<ol>
 <li>
 Go to your&nbsp;<a href="https://www.contentstack.com/docs/developers/set-up-stack/about-stack">stack</a>&nbsp;where you want to export a taxonomy, navigate to the “Settings” icon (press “S”) on the left navigation panel, and select&nbsp;Taxonomy.
 </li>
 <li>
 Select the taxonomy you want to export and click the “ellipsis” (three dots) in the&nbsp;Actions&nbsp;column.
 </li>
 <li>
 Choose the file format for exporting your taxonomy by selecting either&nbsp;Export as JSON&nbsp;or&nbsp;CSV.
 </li>
</ol>
<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltdd5f3916194f4ddc/66490bbadda14b0548dff606/export.png" alt="export.png" height="auto" />This will download your taxonomy's JSON or CSV file and save it to your local storage system.

Exporting a Taxonomy

Import a Taxonomy

Terms serve as the primary classification elements within a taxonomy, allowing you to establish hierarchical structures and incorporate them into entries.
Example -&nbsp;In the Superhero taxonomy, we have two child terms: Origin &amp; Powers and Abilities.&nbsp; Each of these terms has two child terms.&nbsp;
Another Example -&nbsp;In a taxonomy related to "Animals," terms could include "Mammals," "Birds," "Reptiles," etc. Each of these terms represents a distinct category within the taxonomy.
Terms are used to classify and tag entry items. When creating or editing entries, users can select terms from predefined taxonomies to indicate the subject, topic, or category that the entry belongs to. This helps organize and structure entries, making searching, filtering, and managing easier.

<h1>Creating&nbsp;a Term</h1>
To&nbsp;create a term&nbsp;in Contentstack, follow these steps -
<ol>
 <li>
 
 Login to Contentstack: Go to the Contentstack&nbsp;<a href="https://www.contentstack.com/login">login page</a>&nbsp;and enter your credentials to log in to your account.
 
 </li>
 <li>
 
 Access Taxonomies: Navigate to the "Settings" icon once logged in. Under "Settings," you'll find an option for "Taxonomies." Click on it to access the Taxonomies section.
 
 </li>
 <li>
 
 Select&nbsp;a Taxonomy: In the Taxonomies section, you'll see a list of existing taxonomies, if any. Choose the taxonomy where you want to create the term.&nbsp;
 
 </li>
 <li>
 
 Add Term: After selecting the appropriate taxonomy, you'll see a button&nbsp;to "+ New Term."&nbsp;Click on it to create a new term within the selected taxonomy. We are creating a new term under the "Genre" taxonomy here.
 
 </li>
</ol><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt3e1bff326b9b32eb/66490fb052619df401a90a72/new-term.png" alt="new-term.png" height="auto" />
Enter Term Details: In the "Term Details" page, you can enter details for the new term. This typically includes:
- Term Name: Enter the name of the term. For Example -&nbsp;Fiction
- Term UID: The Unique ID is automatically populated, which you can edit.
<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt68fc44593ccfb6d2/66490fdab2e852b513451914/term-details.png" alt="term-details.png" height="auto" /> Save Term: Once you've entered the required details for the term, click on the "Save"&nbsp;button to create the term.

<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltf928dc426249a726/66490ffe16e6bf4dff590ca0/save-term.png" alt="save-term.png" height="auto" /> After saving the term, you should see a confirmation message indicating that the term has been successfully created. The following shows the term "Fiction" created under the "Genre"&nbsp;taxonomy.

<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltbf49c5b76f147235/66491058acadaf2407728327/genre.png" alt="genre.png" height="auto" /> Now, if you want to create a sibling term (a term at the same level as the current term) or a child term (a term nested within the current term), you can select any one from the button dropdown as shown below.

<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt419dc0a78431e93d/664910800b508ae4bedcfc97/sibling.png" alt="sibling.png" height="auto" />
 To Create a Sibling Term -
<ol>
 <li>
 Select the&nbsp;option to "Create a Sibling Term" from the dropdown. The selected option is always "Create a Sibling Term"&nbsp;by default. Click on the button&nbsp;"Create a Sibling Term". Here, we are creating a sibling term for the term "Fiction."
 </li>
</ol><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt5bce5b24075215db/664910b13092d0fa8b63f9dc/create-sib.png" alt="create-sib.png" height="auto" />This takes you to the "Term Details" page. Enter the Term Name and Term UID. Here, we are creating&nbsp;a new sibling term,&nbsp;"Non-Fiction." <img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt0f2a0ccb99ee1bbf/66491102efc97a0b144c0a81/non-fiction.png" alt="non-fiction.png" height="auto" />Click on the "Save" button to create the term successfully.&nbsp;The following shows the term&nbsp;"Non-Fiction"&nbsp;being created under the "Genre"&nbsp;taxonomy.

<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltc88b4a3bac5dfb41/6649113f4bfb713cf742c101/non-fiction2.png" width="auto" alt="non-fiction2.png" height="auto" max-width="auto" style="max-width: auto;width: auto;height: auto;" /> You can also create a sibling term by clicking the following icon and the above steps.
<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt8ecc56c1036ca4a7/664911705fd9af38df70e290/add-sibling.png" width="698" alt="add-sibling.png" height="auto" max-width="698" style="max-width: 698px;width: 698;height: auto;" />
To Create a Child Term -
<ol>
 <li>
 Select the&nbsp;option to "Create a Child Term" from the dropdown. Click on the button&nbsp;"Create a Child Term". Here, we are creating a child term for the term "Fiction."
 </li>
</ol>
<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt5bcd18629f02d153/664911ae342fb50f7a62cc5c/create-child.png" width="698" alt="create-child.png" height="auto" max-width="698" style="max-width: 698px;width: 698;height: auto;" /> This takes you to the "Term Details" page. Enter the Term Name and Term UID and click the "Save" button.&nbsp;Here, we are creating&nbsp;a new child term,&nbsp;"Historical Fiction."&nbsp;The following shows the term&nbsp;" Historical Fiction"&nbsp;being created under the "Genre"&nbsp;taxonomy.
<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltae145a26adaf6260/664911ec3092d022d263f9e0/term-details2.png" alt="term-details2.png" height="auto" /> You can also create a child term by clicking the following icon and the above steps.
<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltf305bc137e7448fb/664912210b508a12abdcfc9f/add-child-btn.png" width="695" alt="add-child-btn.png" height="auto" max-width="695" style="max-width: 695px;width: 695;height: auto;" /> By following these steps, you can effectively create&nbsp;terms within your Contentstack account, facilitating better organization and classification of your entry items.

Creating Terms

Once you've created terms, you retain the flexibility to adjust terms, empowering you to make changes like updating their names as needed. To&nbsp;edit a&nbsp;term&nbsp;in Contentstack, follow these steps -
<ol>
 <li>
 
 Login to Contentstack: Go to the Contentstack&nbsp;<a href="https://www.contentstack.com/login">login page</a>&nbsp;and enter your credentials to log in to your account.
 
 </li>
 <li>
 
 Access Taxonomies: Navigate to the "Settings" icon once logged in. Under "Settings," you'll find an option for "Taxonomies." Click on it to access the Taxonomies section&nbsp;to access the list of taxonomies in your Contentstack organization.
 
 </li>
 <li>
 
 Choose Taxonomy: From the list of available taxonomies, select the taxonomy containing the term you want to edit. Here, we select the taxonomy&nbsp;"Genre."
 
 </li>
 <li>
 
 Locate Term: Find the term you wish to edit within the selected taxonomy. You may need to expand categories or scroll through the list to locate the specific term and click on the term you need to edit.&nbsp;Here, we will edit the term&nbsp;"Historical Fiction,"&nbsp;under the term&nbsp;"Fiction."
 
 </li>
</ol>
<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blte0a2e094e2870f56/664913ed4b531e6623c327f9/edit-term1.png" alt="edit-term1.png" height="auto" />
Edit Term: When you click on the term you want to edit, it opens the "Term Details" page, where you can update the term's name. Here, we will update the name of the term&nbsp;"Historical Fiction."
<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltfb2b2d57857bbb19/6649140fd4d02e180b2eac07/edit-term2.png" alt="edit-term2.png" height="auto" />
We will update the name of the term&nbsp;"Historical Fiction"&nbsp;to&nbsp;"Historical/Old Fiction."&nbsp;Click the "Update" button to update the term successfully.

<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltf83833ed72fc6e7c/6649143916e6bf5faf590ca4/edit-term3.png" width="auto" alt="edit-term3.png" height="auto" max-width="auto" style="max-width: auto;width: auto;height: auto;" />
The following shows the updated name for the term&nbsp;"Historical/Old Fiction"&nbsp;being created.

<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltf2fdd3d5eefde954/664914e452619d964ba90a76/hiatorical.png" alt="hiatorical.png" height="auto" />

Editing Terms

Within your stack, you can delete terms from a taxonomy.&nbsp;To&nbsp;delete a term&nbsp;in Contentstack, follow these steps -
<ol>
 <li>
 
 Login to Contentstack: Go to the Contentstack&nbsp;<a href="https://www.contentstack.com/login">login page</a>&nbsp;and enter your credentials to log in to your account.
 
 </li>
 <li>
 
 Access Taxonomies: Navigate to the "Settings" icon once logged in. Under "Settings," you'll find an option for "Taxonomies." Click on it to access the Taxonomies section&nbsp;to access the list of taxonomies in your Contentstack organization.
 
 </li>
 <li>
 
 Choose Taxonomy: From the list of available taxonomies, select the taxonomy containing the term you want to delete. Here, we select the taxonomy&nbsp;"Genre."
 
 </li>
 <li>
 
 Choose Term: Select the term you want to delete from the list of available terms.
 
 </li>
</ol>
<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltd6b3065ffc2be7b9/664918433092d04da863f9e5/delete1.png" alt="delete1.png" height="auto" />Delete Term: Click on the ellipsis(three dots) icon on the top right corner of the page, which opens a dropdown list from which click the&nbsp;"Delete Term"&nbsp;option.


<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt53ad850417bf1712/664918684bfb71e49b42c106/delete5.png" width="auto" alt="delete5.png" height="auto" max-width="auto" style="max-width: auto;width: auto;height: auto;" />
 Click on Delete: Clicking on the "Delete Term" option opens a dialog box that asks you to confirm the delete operation. Deleting a parent term will also automatically delete its child term(s). Here, it shows that we will delete the term "Fiction," which contains the child term "Historical/Old Fiction," which will also be&nbsp;deleted. <img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blte16e4232a1532d3c/664918685fd9afd68670e295/delete3.png" width="auto" alt="delete3.png" height="auto" max-width="auto" style="max-width: auto;width: auto;height: auto;" /> After successful deletion, you can see that the "Fiction" term is deleted along with its child term, "Historical/Old Fiction." <img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt1b8e0895d4479e66/66491868a3f9df6ea1c10bba/delet2.png" alt="delet2.png" height="auto" />Following these steps, you can effectively delete terms within your Contentstack account, facilitating better organization and classification of your entry items.

Deleting Terms

Let's&nbsp;consider an example. Our stack has the following taxonomy created.We have terms inside&nbsp;Superhero, as seen in the image below.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blta2c07a004b22deaf/66491a5c52619de069a90a7a/cm1.png" alt="cm1.png" height="auto"/><h2>Get all&nbsp;taxonomies</h2>The Get All Taxonomies request provides detailed information about every taxonomy available within your company's specific stack.Example:&nbsp;Let's retrieve every taxonomy found within our stack.&nbsp;Take into consideration the example given in the Overview section.Below is the curl command for the same.&nbsp;<pre>curl --location 'https://api.contentstack.io/v3/taxonomies' \ --header 'api_key: **************' \ --header 'authorization: *******************' \ --header 'Content-Type: application/json' \ &nbsp;--data ''</pre>View the screenshot below to view the outcome of the postman call.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blte56d3a57b7d08f32/66491abb5c2483ea33bc3490/cm2.png" alt="cm2.png" height="auto"/><h2>Get a single taxonomy</h2>The "Get a single taxonomy" request provides detailed information about a single taxonomy in a given stack.Example: Consider the example given in the Overview section for this.&nbsp;Let's fetch&nbsp;superhero&nbsp;taxonomy.Below is the curl command to fetch&nbsp;superhero&nbsp;taxonomy<pre>curl --location 'https://api.contentstack.io/v3/taxonomies/superhero' \ --header 'api_key: **************' \ --header 'authorization: ****************' \ --header 'Content-Type: application/json' \ --data ''</pre>View the screenshot below to see the outcome of the postman call.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt7a5e0ccf8f22c799/66491af40bbc62953a7fabeb/cm3.png" alt="cm3.png" height="auto"/><h2>Get a single term</h2>The "Get a single term" request provides detailed information about a single term in a given taxonomy.<pre>Example:&nbsp;Consider the following example, which is provided in the Overview section. Obtain a single term from the superhero taxonomy that refers to powers and abilities.</pre><pre>curl --location 'https://api.contentstack.io/v3/taxonomies/superhero/terms/powers_and_abilities' \ --header 'api_key: ***************' \ --header 'authorization: **********************' \ --header 'Content-Type: application/json' \ --data ''</pre>View the screenshot below to see the outcome of the postman call.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt76708a5e5731c2a7/66491b500a0de6460e314d1e/cm4.png" alt="cm4.png" height="auto"/><h2>Create a term</h2>Within your stack, a term in a specific taxonomy is created via the Create a Term request.Since terms are organized hierarchically in a taxonomy, it's important to define the order when creating new terms. For instance, when creating a term at the root level, set the&nbsp;parent_uid&nbsp;as&nbsp;null&nbsp;and specify the level as 1 or above to position it in the list. To create a child term, provide the&nbsp;parent_uid&nbsp;of the parent term where you want to add the new child term and indicate the desired position within the order parameter.<h2>Creating a Term&nbsp; at the Root level</h2>When creating terms at the parent level, the request body should look like this:Example:&nbsp;We would like to&nbsp; make a new Term at the root level.&nbsp; For this, consider the example provided in the previous modules. And add the term "Films" to the "Superhero"&nbsp;taxonomy.&nbsp; Notice that the parent UID is&nbsp;null.Below is the curl command to create a term.&nbsp;<pre>curl --location 'https://api.contentstack.io/v3/taxonomies/superhero/terms' \ --header 'api_key:**************' \ --header 'authorization: ********************' \ --header 'Content-Type: application/json' \ --data '{ &nbsp; "term": { &nbsp; &nbsp; "uid": "films", &nbsp; &nbsp; "name": "Films", &nbsp; &nbsp; "parent_uid": null &nbsp; } }'</pre>View the screenshot below to see the outcome of the postman call.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blte499ee888d5dbecf/66491b9b342fb5f06e62cc64/cm5.png" alt="cm5.png" height="auto"/>The result should be a new Term 'Films' located in the Superhero Taxonomy at the root level. <img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltad086fe9c6e5a3d6/66491bc34ac76eba9f40f88c/cm6.png" alt="cm6.png" height="auto"/><h2>Creating a Term under a parent Term</h2>When creating terms at the child level, the request body should look like this:<pre>curl --location 'https://api.contentstack.io/v3/taxonomies/superhero/terms' \ --header 'api_key:**************' \ --header 'authorization: ********************' \ --header 'Content-Type: application/json' \ --data '{ &nbsp; "term": { &nbsp; &nbsp; "uid": "scientific_experimentation", &nbsp; &nbsp; "name": "Scientific Experimentation", &nbsp; &nbsp; "parent_uid": "origin" &nbsp; } }'</pre><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltb7de7c5f1d2ec22f/66491cd2a3f9dfedffc10bc2/cm7.png" alt="cm7.png" height="auto"/> The result should be a new Term located under the Origin parent term:<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt160628212409b4a6/66491d1cf445aa8b7254c5c4/cm8.png" alt="cm8.png" height="auto"/>

Content Management APIs for Taxonomy

Using the Content Management API to Read the Taxonomy Information

Creating a New Taxonomy with the Content Management API

Querying using the Taxonomy IN Operator

Querying with the Taxonomy Equals or Below Operator

Use case
Breadcrumbs serve as a helpful navigation tool, enabling users to easily trace their path and understand their position within the hierarchical structure of a website, particularly useful for blogs and product listings.
Solutions
<ul>
 <li>
 The taxonomy terms hierarchy can be used to generate Breadcrumbs for Blog articles or product entries.
 </li>
 <li>
 Define the taxonomy terms in the hierarchy for product entries&nbsp;
 </li>
</ul>
<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt11ace396066f4b52/664924aaf445aaa5cb54c5f8/breadcrumbs.png" alt="breadcrumbs.png" height="auto" />
 
<ul>
 <li>
 Use this taxonomy&nbsp;hierarchy to generate breadcrumbs by using terms associated and its hierarchy and category-specific pages can be generated by making&nbsp;entries based on&nbsp;taxonomy&nbsp;Content delivery Api call&nbsp;in frontend.
 </li>
 <li>
 Also, Dynamic URLs generation for an entry based on the taxonomy hierarchy eg. e-commerce product pages are also can be done to match URL hierarchy with breadcrumbs&nbsp;
 </li>
</ul>

<h1>Advanced Search filter for Content</h1>
Use case:
We need a Blog listing page with sidebar filter for blog categories
Solution:
<ul>
 <li>
 Define a taxonomy structure and add&nbsp;nested terms for each blog category
 </li>
 <li>
 Each blog article will be tagged with the blog category term
 </li>
 <li>
 On the website we will list all blog categories with hierarchy in the sidebar and filter based on the selected combination of categories.&nbsp; The developer can make CDA API calls for blog articles filtered based on taxonomy terms. See the&nbsp;<a href="https://www.contentstack.com/docs/developers/apis/content-delivery-api#taxonomy">API guide</a>&nbsp;for more details.
 </li>
</ul>

<h1> Multi-Brand within Single stack architecture</h1>
<h3>Use case</h3>
Customer has&nbsp;one Stack and would like to accommodate multiple brand website which will have some global&nbsp;content&nbsp;
<ul>
 <li>
 
 Brand 1 Domain (https://www.brand1.com/)
 
 </li>
 <li>
 
 Brand 2&nbsp;Domain (https://www.brand2.com/)
 
 </li>
 <li>
 
 They need brand specific entries access control for brand specific custom roles&nbsp;
 
 </li>
 <li>
 
 CDA APIs to fetch brand specific content entries for each domain.
 
 </li>
</ul>
<h3>Solution Overview:</h3>
<ul>
 <li>
 
 Create a new Taxonomy to define brands
 
 </li>
 <li>
 
 In the Content Model we will add a Taxonomy field Selector for Brand&nbsp;in&nbsp;content types (Page, blog, product etc)
 
 </li>
 <li>
 
 Create an asset folder for each brand to store separate brand specific&nbsp;assets and set up asset permission in brand specific custom roles
 
 </li>
 <li>
 
 Setup custom Roles for each Brand&nbsp;Content editors with proper accessibility as per taxonomy access (upcoming enhancement in roles) and brand based asset folder access
 
 </li>
 <li>
 
 The editor will publish changes to the production&nbsp;Environment with the Taxonomy
 
 </li>
 <li>
 
 On each brand specific frontend site, the developer will make API calls with filtering content based on brand taxonomy to get pages specific to brand taxonomy&nbsp;
 
 </li>
</ul>

Use Cases for Taxonomy

Taxonomy Foundations Quiz

This course is intended to outline the Contentstack features and techniques for using the Taxonomy features with&nbsp;your content, understand the APIs, and how to leverage Taxonomy within your implementation.&nbsp; Completion of this course earns a 'badge' for this topic.!Required for this course:<ol><li>Account in Contentstack with access to a Stack as an Administrator or Developer. Create a training Stack&nbsp;<a href="https://www.contentstack.com/academy/training-instance" target="_blank">here</a>. Training stacks are available for 90 days. Alternatively, you can bootstrap a&nbsp;<a href="https://www.contentstack.com/docs/developers/cli/bootstrap-starter-apps">Starter App via the CLI</a>&nbsp;or from the&nbsp;<a href="https://app.contentstack.com/#!/marketplace/starters">Marketplace</a>.&nbsp;</li><li>Permissions to create a new Taxonomy and edit Content Types in a Stack.&nbsp;</li></ol>

Taxonomy Foundations Thumbnail

Taxonomy Foundations

<h1>Developer Onboarding Course - Introduction</h1> Welcome to our exciting new course on developing web applications with Contentstack! If you're looking to build powerful, scalable, and customizable web applications, then you're in the right place. In this course, we'll guide you through the fundamentals of Contentstack, including content modeling, API and SDK usage, and more. We'll also cover advanced topics such as extending a NextJS app, enabling localization, and optimizing your content delivery. With our easy-to-follow tutorials and hands-on exercises, you'll quickly gain the skills and knowledge needed to build stunning web applications that meet the needs of your clients and users. So, whether you're a seasoned developer or just starting out, join us on this exciting journey and take your web development skills to the next level with Contentstack!The main tasks in the course are:<ol><li>Create a new detail page (new content type, new NextJS Component, new CD API query)</li><li>Create a new gallery landing page (new content type, new NextJS Component, more complicated CD API Queries)</li></ol>We also cover the following:<ul><li>Starter app overview, install, and walk through</li><li>Using CMA to read and import content</li><li>SDKs / APIs overview and introduction</li><li>SDKs / APIs deep dive with patterns / practices&nbsp;</li><li>Roles &amp; Permissions</li><li>Workflow</li><li>Marketplace intro</li><li>Automation hub intro</li></ul><h1>What we will be building</h1><h2>Composable Hero&nbsp;Gallery Page</h2><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltd51a0c5b982c72f8/664c027a1983ea9d6dac29b4/composable-heros.png" alt="composable-heros.png" height="auto"/><h4> Composable Hero Detail Page</h4><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltcba8639d82e39f82/664c02a3785339639e9e3d9f/composable-heros-detail.png" width="auto" alt="composable-heros-detail.png" height="auto" max-width="auto" style="max-width: auto;width: auto;height: auto;"/><h1>Getting Started</h1>1.&nbsp; Create a new Training Instance - Go to&nbsp;<a href="https://www.contentstack.com/academy-old">https://www.contentstack.com/academy-old</a> and select 'Create a Training Instance'. 2.&nbsp; <a href="https://github.com/contentstack/contentstack-academy-playground">Download the course code from Github (https://github.com/contentstack/contentstack-academy-playground)</a> 3.&nbsp; Rename the .env.local.sample file to .env.local and update the configuration properties <img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltb3b6b76e3ee547ed/664c033cc9024cafa4ad58b4/rename-sample.png" alt="rename-sample.png" height="auto"/> 4. Build the project with 'npm i' 5.&nbsp; Run the website with 'npm run dev'

What We'll Build

Getting Started

<h1>Architecture</h1><h2>Big Picture Architecture Diagram</h2><h3>Backend</h3>The Backend of Contentstack is the CMS with the ability to create and publish content.&nbsp; The focus here is on editor ease-of-use by providing a simple, powerful and flexible UI for content creation and management.&nbsp; In addition to the out of the box functionality, we also provide an ability to extend the interface by creating UI Extensions using our App SDK and connect to 3rd-party applications such as DAM providers, Analytics, E-Commerce platforms and more.<h3>Frontend</h3>The focus on the frontend is high-performance for your website and web application. APIs and SDKs are provided to the developer for using in their applications to perform read-only queries to the content.&nbsp; The Content Delivery APIs use an internal CDN to cache all queries to the platform which results in higher performance for all your web applications.&nbsp; This is also where we find the Images API for delivering image assets.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt40df19fbdfa691c4/664c7d55a671fa7891f218bf/Architecture.png" alt="Architecture.png" height="auto"/><h2>Environments</h2><ul><li>One Stack can publish to multiple Environments. &nbsp;Think of Environments as “publish destinations”.</li><li>Each Environment has one Delivery Token, otherwise known as an Access Token. &nbsp;That token is unique per Environment.</li><li>Each Stack has an API key. &nbsp;There is only 1 API key per Stack and it is unique.</li><li>Most API calls will require both an API token and a Delivery / Access Token.</li></ul><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blta9f0e57d8a3c5a6e/664c7d9f79abee8ebd3d1534/environment.png" alt="environment.png" height="auto"/>Multi-Stack Architecture Diagram<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltd1dd48a1fcbec491/664c7de28a66292552b1397b/multi-stack.png" alt="multi-stack.png" height="auto"/>

Big Picture Architecture

Architecture Walkthrough

Environments Walkthrough

In this module, we'll dive into the world of Contentstack's powerful APIs that can help you build your digital experiences faster, easier, and better. Our APIs are designed to help developers access content and make updates programatically.First, we'll start with Contentstack's Content Delivery API. This API allows developers to retrieve content from Contentstack's headless CMS and deliver it to any digital platform or device. You'll learn how to use our API to retrieve content in a structured and organized manner, so you can easily integrate it into your website, app, or any other digital platform.Next, we'll explore Contentstack's Content Management API. This API enables developers to create, update, and manage content in Contentstack's headless CMS programmatically. You'll learn how to leverage our API to automate content creation, content management workflows, and enable seamless collaboration between developers and content editors, and increase the efficiency of your content creation processes.Finally, we'll dive into Contentstack's Images API. This API allows you to transform and optimize images on-the-fly, so you can deliver the best possible visual experience to your users. You'll learn how to use our API to resize, compress, and optimize images.By the end of this module, you'll have a deep understanding of Contentstack's powerful APIs and how to leverage them to build faster, better, and more engaging digital experiences. So, let's get started!<h1>Using the Content Delivery API</h1>Contentstack's Content Delivery API is a powerful tool that enables developers to retrieve content from Contentstack's headless CMS and deliver it to any digital platform or device. It allows you to fetch content in a structured and organized manner, which makes it easier to integrate into your website, app, or any other digital platform.The Content Delivery API is built on top of a powerful caching layer, which ensures lightning-fast performance even when you're dealing with large amounts of content. This caching layer also ensures that your content is always up-to-date and in sync with the latest updates made to the CMS.One of the biggest advantages of using Contentstack's Content Delivery API is that it's completely agnostic to the technology stack you're using. Whether you're building your website using a traditional CMS or a modern front-end framework like React or Vue.js, the Content Delivery API can be seamlessly integrated into your workflow.With the Content Delivery API, you can also retrieve content in multiple languages, which is essential for building global websites and apps. The API also allows you to fetch only the content you need, which reduces the amount of data transfer and improves the overall performance of your application.<a href="https://www.contentstack.com/docs/developers/apis/content-delivery-api/">Content Delivery API Documentation</a><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltbeecb6f7ab8cf28a/664d437c785339c0e89e4f8e/API-map.png" alt="API-map.png" height="auto"/>

Using the Content Delivery API

Here's how you can start using our&nbsp;Content Delivery API documentation:
<ol>
 <li>
 Go to the <a href="https://www.contentstack.com/docs/developers/apis/content-delivery-api/#get-all-entries">Get Entries</a> section of the Content Delivery Documentation.
 </li>
 <li>
 Click on the "Get all Entries" link to open the query window on the right.
 </li>
 <li>Update the parameters to use the following:<ul>
 <li>content_type_uid: blog_post</li>
 <li>environment: preview (or development; associated with the token that you'll be using)</li>
 <li>locale: en-us</li>
 <li>api_key: (found in the settings / tokens / content delivery token settings page)</li>
 <li>access_token:&nbsp;(found in the settings / tokens / content delivery token settings page)</li>
 </ul>
 If you have questions, see the <a href="https://www.contentstack.com/docs/developers/apis/content-delivery-api/#postman-collection" target="_self">CDA Postman guide</a> for more details.
 </li>
 <li>
 Execute the request with the "Try" button.
 </li>
</ol>
Congrats!&nbsp;You just queried the Contentstack Content Delivery API!

Using the Content Delivery API documentation

Querying the Content Delivery API with the Documentation Walkthrough

<h3>Using the Postman collection to connect with the Content Delivery API</h3><ol><li><a href="https://www.postman.com/downloads/">Download and install Postman</a></li><li><a href="https://www.contentstack.com/docs/developers/apis/postman-collections">Download the Contentstack Postman Content Delivery collection</a></li><li>To obtain the Content Delivery Token, follow these steps in Contentstack: navigate to the "Settings" page, select "Tokens," then choose "Content Delivery." If you haven't created a Delivery Token yet, <a href="https://www.contentstack.com/docs/developers/create-tokens/create-a-delivery-token/">create a new Delivery Token</a>. <a href="https://www.contentstack.com/docs/developers/create-tokens/#work-with-delivery-tokens">Additional information about tokens, including Delivery Tokens, can be found in our documentation</a>&nbsp;</li><li>Open Postman and select the 'Content Delivery API - Contentstack' collection.&nbsp; Entries, Get all entries</li><li>Edit the Postman variables and update the values for api_key and access_token.&nbsp; The api_key is found on the Delivery Token settings page.&nbsp; The access_token is the Delivery Token.&nbsp; These are used in the Headers of the request.
 Also, add the value of the content_type_uid as 'blog_post', environment as 'preview' and locale as 'en-us'.</li><li>Send the request.&nbsp; Contentstack replies&nbsp;with the JSON of all blog_post entries.</li></ol>

Using the Postman collection to connect with the Content Delivery API

Using Postman to query the Contentstack Content Delivery API Walkthrough

<h2>Getting Started using the JavaScript Content Delivery SDK</h2>To get started with the Content Delivery SDK and NodeJS, the first thing you need to do is to install it. You can do this by running the following command in your project directory:npm install contentstack <h2>Helpful Javascript Resources</h2><a href="https://github.com/contentstack/contentstack-javascript">Javascript SDK on Github</a>&nbsp;<a href="https://www.contentstack.com/docs/developers/sdks/content-delivery-sdk/javascript-browser/reference/">Javascript API Reference</a>
 Include the JS SDK in your projects<pre>https://cdn.jsdelivr.net/npm/contentstack@latest/dist/web/contentstack.min.js </pre>Once you have installed the SDK, you need to initialize it with your API key, delivery token, and environment name. Here's an example of how to do this:<pre>const Contentstack = require('contentstack'); const Stack = Contentstack.Stack({ api_key: 'your_api_key', delivery_token: 'your_delivery_token', environment: 'your_environment' }); </pre>With the SDK initialized, you can start retrieving content from Contentstack's API. The SDK provides several methods for fetching content, depending on your requirements.If you want to retrieve a single entry, you can use the Entry method, as shown in the following example:<pre>Stack.ContentType('your_content_type_uid').Entry('your_entry_uid').fetch() .then(function success(entry) { console.log(entry); }, function error(err) { console.log(err); }); </pre>In this example, your_content_type_uid is the unique identifier of the content type you want to retrieve, and your_entry_uid is the unique identifier of the entry you want to retrieve. The fetch() method retrieves the entry and returns it as a JavaScript object.If you want to retrieve multiple entries, you can use the Query method, as shown in the following example:<pre>const stack = Contentstack.Stack({"api_key":"bltc2242b759e36fcb9","delivery_token":"cs1470a664abc4563bd43a604d","environment":"development"});&nbsp; // use your api_key and delivery_token here from your Stack const query = stack.GetEntry('blog_post').Query(); query.toJSON() &nbsp; .find() &nbsp; .then( &nbsp; (result) =&gt; { &nbsp; &nbsp; console.log(result[0]); &nbsp; }, &nbsp; (error) =&gt; { &nbsp; &nbsp; console.error(error); &nbsp; }, ); </pre>In this example, your_content_type_uid is the unique identifier of the content type you want to retrieve. The find() method retrieves all the entries of the content type and returns them as an array of JavaScript objects.The SDK also provides methods for filtering and sorting entries, as well as retrieving entries with specific fields. You can learn more about these methods in the Contentstack documentation.There are also SDKs for most popular languages such as .Net, Java, PHP, Python, Ruby, iOS, Android, Dart, etc.Documentation links:<ul><li><a href="https://www.contentstack.com/docs/developers/sdks/content-delivery-sdk/javascript-browser/reference/">API Reference</a></li><li><a href="https://github.com/contentstack/contentstack-javascript">JavaScript SDK Github Repo</a></li><li><a href="https://www.contentstack.com/docs/developers/sdks/">All SDKs</a></li><li><a href="https://www.contentstack.com/docs/developers/web-framework/querying/">Query examples</a>
 </li></ul><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt31c71c762d48a421/664d45aa79abeeeb093d23a5/content-sdk.png" alt="content-sdk.png" height="auto"/>

Using the JavaScript Content Delivery SDK

<h2>Using the GraphQL API with Postman</h2> <h3>GraphQL</h3>Contentstack's GraphQL API is a powerful tool for developers who want to integrate Contentstack's content management system (CMS) into their web or mobile applications. It provides a flexible and efficient way to retrieve content from Contentstack's content repository using the GraphQL query language.With Contentstack's GraphQL API, developers can retrieve content from their Contentstack projects using a single API call. The API returns only the data that is requested, which reduces the amount of data transferred and improves performance. The API also supports pagination, filtering, and sorting, which enables developers to retrieve only the content they need and to organize it in a way that best suits their application.Contentstack's GraphQL API supports all of the content types and fields defined in a Contentstack project, including modular blocks and assets. This means that developers can retrieve any type of content from Contentstack, including text, images, videos, and more.In addition, Contentstack's GraphQL API is designed to work seamlessly with popular frontend frameworks and libraries, such as React, Vue.js, and Angular. This allows developers to easily integrate Contentstack's content into their applications and to build dynamic and engaging user experiences.
 <h3>GraphQL API Explorer</h3>Contentstack has a GraphQL API explorer to query Contentstack's Content Delivery API.&nbsp;&nbsp;<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt720a9df15d2b3c95/664d46208a0182e22014ca07/graphQL.png" alt="graphQL.png" height="auto"/><ol><li>In the Contentstack UI, navigate to Settings and then GraphQL</li><li>Build your queries</li><li>There is also an <a href="https://www.contentstack.com/docs/developers/graphql-api/use-the-graphql-queries-with-apollo-sdks/use-graphql-queries-with-apollo-client-javascript-sdk/">Apollo Client JavaScript SDK</a>&nbsp;for using the API&nbsp;</li></ol><h2>More GraphQL API Resources</h2><ul><li><a href="https://www.contentstack.com/docs/developers/apis/postman-collections/">GraphQL&nbsp;Postman Collection</a></li><li><a href="https://www.contentstack.com/docs/developers/graphql-api/graphql-sample-apps/">GraphQL Sample Apps</a></li><li><a href="https://www.contentstack.com/docs/developers/graphql-api/use-the-graphql-queries-with-apollo-sdks/use-graphql-queries-with-apollo-client-javascript-sdk/">Using GraphQL with the Apollo Client JavaScript SDK</a></li></ul>

Using the GraphQL API with Postman

<h1>CDN and Caching</h1>A Content Delivery Network (CDN) ensures that a cache of your content is stored at various locations around the globe. Consequently, whenever there is a page request, the content is served from the cache of the nearest CDN server, rather than the origin server ensuring quicker content delivery.<h2>How CDN Cache Works in Contentstack</h2>The CDN is always up-to-date. It ensures that the cache is always fresh through purging old data and caching new data.When any user requests a piece of content, the nearest CDN server checks if it has a cached copy of the requested content. If not, it checks with the shield server. And, if the shield server does not have the cache of the requested content, it fetches the content from the origin server.A shield server is an extra layer of caching that reduces the load on the origin server. It is located near the origin server, and it saves the cache of content that it serves to any CDN server. So, if any other CDN server requests the same data, the shield server would serve the cached content.Contentstack automatically purges content from the internal Contentstack CDN when published.&nbsp;&nbsp;Helpful links:<ul><li><a href="https://www.contentstack.com/docs/developers/cdn-and-caching/contentstack-cdn-cache-management/">How CDN Cache Management works in Contentstack</a></li></ul>

CDN and Caching

<h1>Query Examples with the Content Delivery API</h1><h2>Query by URL</h2><pre>const getContentByURL = async ({ contentType, slug, refUids, locale, filter }) =&gt; { try { const Query = global.Stack .ContentType(contentType) .Query() .language(locale) if (refUids) { let refs = refUids.replace(/ /g, '').split(',') Query.includeReference(refs) } let result = await Query .includeFallback() .where('url', `/${slug}`) .toJSON() .includeEmbeddedItems() .addParam('include_metadata', 'true') .find() if (result &amp;&amp; result.length &gt; 0 &amp;&amp; result[0].length &lt;= 0) { // for trailing slash match result = await Query .includeFallback() .where('url', `/${slug}/`) .toJSON() .includeEmbeddedItems() .addParam('include_metadata', 'true') .find() } (global.env === 'preview' || global.env === 'staging-preview' ||global.env === 'development') ? Contentstack.Utils.addEditableTags(result[0][0], contentType, true, locale) : '' //metadata key required for _metadata in cms entry data if(result.length &gt; 0 &amp;&amp; result[0].length &gt; 0) { result[0][0] = {...result[0][0], metadata: result[0][0]} } if (result) return result[0][0] } catch (error) { throw new Error(error) } }</pre> <h2>Query by UID</h2><pre>const getContentByUID= async ({ contentType, entryUid, refUids, locale }) =&gt; { try { const Query = global.Stack .ContentType(contentType) .Entry(entryUid) .language(locale) .includeFallback() .includeEmbeddedItems() if (refUids) { let refs = refUids.replace(/ /g, '').split(',') Query.includeReference(refs) } let result = await Query.toJSON().fetch() if (result) return result } catch (error) { return error } }</pre> <h2>Example to Get All Entries</h2><pre>const getEntries = async ({ contentType, refUids, locale }) =&gt; { let collectionData try { const Query = global.Stack.ContentType(contentType) .Query() .language(locale) if (refUids) { let refs = refUids.replace(/ /g, '').split(',') Query.includeReference(refs) } let result = await Query .includeFallback() .toJSON() .includeEmbeddedItems() .addParam('include_metadata', 'true') .find() if (result &amp;&amp; result.length &gt; 0 &amp;&amp; result[0].length &lt;= 1) { //for entry type = single (global.env === 'preview' || global.env === 'staging-preview' || global.env === 'development') ? Contentstack.Utils.addEditableTags(result[0][0], contentType, true, locale) : '' //metadata key required for _metadata in cms entry data result[0][0] = {...result[0][0], metadata: result[0][0]} return result[0][0] } //for entry type = multiple (global.env === 'preview' || global.env === 'staging-preview' || global.env === 'development') ? Contentstack.Utils.addEditableTags(result[0][0], contentType, true, locale) : '' if (result) return result } catch (error) { res.status(500).send(`Internal Server Error\n: ${error}`) // throw new Error(error) } }</pre>

Query Examples with the Content Delivery API

<h1>Using the Contentstack Images API</h1>Welcome, developers, to the Contentstack Images API! As you may know, images are an integral part of any digital experience, and we understand the importance of delivering optimized images quickly and efficiently. That's why we've created the Contentstack Images API, a powerful tool that allows you to manipulate, optimize, and deliver images to your web and mobile applications. Whether you're new to the platform or a seasoned developer, this guide will provide you with everything you need to know to get started with the Contentstack Images API. So let's dive in and explore the possibilities of this powerful tool together!Here are three advantages to using the Contentstack Images API:<ol><li>Performance: The Contentstack Images API allows you to deliver optimized images at scale, reducing load times and improving the overall performance of your web and mobile applications.</li><li>Flexibility: With the Contentstack Images API, you have the flexibility to resize, and transform images in real-time, giving you the ability to customize images to fit any layout or design.</li></ol><h1>Trying out the Image Delivery API</h1>The quickest way to get started with the Image Delivery API is to try it out with the <a href="https://www.contentstack.com/docs/developers/apis/image-delivery-api/#introduction">online documentation</a>.&nbsp;&nbsp;Resize an image on the flyContentstack's Images API resizes images on the server and provides the resized file in the response.&nbsp; This is highly performant as the resized image is stored in the CDN cache on the Contentstack side.<h2></h2><h2>Exercise:&nbsp; Resize an image with the Contentstack Images API</h2>1. Go to the following URL, <a href="https://www.contentstack.com/docs/developers/apis/image-delivery-api/#resize-images">https://www.contentstack.com/docs/developers/apis/image-delivery-api/#resize-images</a>2.&nbsp;Update the width of the image and see the image size and dimensions being changed<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt5b227000df104193/67dc54ed4a89c32ebfa2f78a/CSforDev_L15_Response200.png" alt="CSforDev_L15_Response200.png" height="auto"/><h2> Exercise: Auto-optimizing images with webp</h2>1.&nbsp;Navigate to the Automate Optimization section of the documentation,&nbsp;<a href="https://www.contentstack.com/docs/developers/apis/image-delivery-api/#enable-auto-optimization">https://www.contentstack.com/docs/developers/apis/image-delivery-api/#enable-auto-optimization</a>2. Leave the default as webp in the query parameters<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blta7976efcf6431992/67dc5524460eb47ea2946bed/CSforDev_L15_AutoOptimize.png" alt="CSforDev_L15_AutoOptimize.png" height="auto"/><h2>Using the Images API in your NextJS Applications</h2>Pass the width,&nbsp;height, or auto attributes to the src property in the img tag<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt7e849a1eb5110a73/67dc5540f7eccc98ca90cc79/CSforDev_L15_ImagesAPI.png" alt="CSforDev_L15_ImagesAPI.png" height="auto"/><h2>Exercise: Use the Images API to resize the home world image</h2>1.&nbsp; Update the NextJS code to apply a width param of 150px to the home world image.&nbsp; This resizes the image on the server-side and improves the performance of the page load. <img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt2cbba66331047777/67dc5553443bd63ff1f1bec6/CSforDev_L15_ImagesAPIresize.png" alt="CSforDev_L15_ImagesAPIresize.png" height="auto"/>

Using the Images API

<h1>Exercise: Creating the Character Content Type</h1>In this module we will cover the following topics:<ul><li>How to build a Content Type</li><li>Review Field Types</li></ul>Marketing has provided us with requirements to promote our Composable Heroes by creating&nbsp;a section of the site where each hero will have their own detail page and be listed on a gallery page. In the next few exercises we will define the content type for a Composable Hero and&nbsp;build a hero detail page. &nbsp;There’s no time to waste, let’s get started!<h2>Analyze the Page Design</h2>When defining a new Content Type it's important to have the page design available (in photo / HTML format) so we can model the Content Type and define fields for the content elements.&nbsp;&nbsp;Analyze the following pages and think of the properties that a superhero character would need.&nbsp; When analyzing pages we often look for as many representations of the same content as possible, and then we combine all these fields into one Content Type.&nbsp; In this exercise, let's take a look at these two pages and see what fields they contain.&nbsp; We will focus on the main page content and ignore the headers and footer.&nbsp; If you would like to learn more, the Content Modeling course covers the content type fields in more detail.<img width="auto" height="auto" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt2c5939936d2d2857/67dc6a95b1a1f33f473eeed0/CSforDev_L16_PageDesign_1.jpg" alt="CSforDev_L16_PageDesign_1.jpg" max-width="auto" style="width: auto; height: auto;max-width: auto;width: auto;height: auto;"/><img asset_uid="blt2c4e42a167b5a160" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt2c4e42a167b5a160/67dc6adc1bae684bc54c6ad2/CSforDev_L16_PageDesign_2.png" alt="CSforDev_L16_PageDesign_2.png" height="auto"/><h2>Defining&nbsp;the Character Content Type for the Hero</h2>In the previous section we analyzed the hero pages and thinking of what fields to use for defining the pages.&nbsp; In this section, we will create the Content Type for the Character.&nbsp; If you wish to copy / paste the code samples later, we would advise you to define the content type with the fields in this exercise.&nbsp; However, if you wish to use your own field definitions, that's fine, but you will also need to adjust the code samples accordingly.Creating the Content TypeUsing the Content Type editor in Contentstack, create a new Content Type with fields for our Character content. &nbsp;While defining the fields, we will need to consider what content we want to show on the detail page. &nbsp;<div style="position: relative;overflow: hidden;padding-bottom: 56.25%;"><iframe src="https://cdn.jwplayer.com/players/Kv6fnat6-b769H14u.html" width="100%" height="150" frameborder="0" scrolling="auto" title="Dev-creating The Character Content Type" style="position: absolute;" allowfullscreen=""></iframe></div> After the exercise, your Content Type should look like this:<img asset_uid="blt781d0a90b92e2c67" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt781d0a90b92e2c67/67dc6adb0c6f5510a31fc463/CSforDev_L16_ContentTypeCheck.png" alt="CSforDev_L16_ContentTypeCheck.png" height="auto"/>Steps for the exercise: 1.&nbsp; Create a new Content Type, named ‘Character’ for the composable heroes 2.&nbsp; Add the following fields:Hero Name - Use the Title field Every Content Type in Contentstack has a Title field.&nbsp; We can give it a different display name such as 'Name' or 'Character Name', but we cannot remove it.URL For the Path, use '/composable-heroes/'&nbsp; and then select the option to append the Title to the URL.&nbsp; This is the most common way to define the URL structure.&nbsp; For Content Types where we know the kind of content each page has (character) and that they will have detail pages, we decide to use '/composable-heroes/' as the URL path and then add the title to the end. <img asset_uid="blt0e9a7e511c89f116" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt0e9a7e511c89f116/67dc6adb5e486d1a4671aa9f/CSforDev_L16_URLproperties.png" alt="CSforDev_L16_URLproperties.png" height="auto"/>Image (File) Contentstack has an <a href="https://www.contentstack.com/docs/developers/apis/image-delivery-api/">Images API</a> and supports uploading any media file, including images, up to 700 MB.&nbsp; For images, there are additional properties such as min/max on width or height, so the CMS ensures the images used in a field meet the minimum size requirements. <img asset_uid="blt36199e9adb11c8e3" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt36199e9adb11c8e3/67dc6adb17f7b418a20cf683/CSforDev_L16_ImageFile.png" alt="CSforDev_L16_ImageFile.png" height="auto"/>Description (JSON RTE)The JSON RTE field stores the content in JSON and the frontend webapp uses a <a href="https://github.com/contentstack/json-rte-serializer/">JSON RTE Serializer</a> after publishing to transform the JSON to HTML.&nbsp; There is also an <a href="https://www.contentstack.com/docs/developers/automation-hub-connectors/rte-formatter/">Automation Hub connector that can transform the RTE JSON to HTML</a>.&nbsp;&nbsp;The JSON RTE supports custom plugins and you can use the <a href="https://www.contentstack.com/docs/developers/developer-hub/get-started-with-building-apps-using-contentstack-app-sdk/">App SDK</a> and extend the Rich Text Area with your own customizations.&nbsp; Examples in the Marketplace include a word count extension and a Cloudinary extension.<img asset_uid="blte8860a9727500de8" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blte8860a9727500de8/67dc6adbf7eccc35bd90ce1a/CSforDev_L16_Description.png" alt="CSforDev_L16_Description.png" height="auto"/>Powers (select field, add the powers)<img asset_uid="bltc8a96a22c1247f99" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltc8a96a22c1247f99/67dc6adb8fee9a228447d640/CSforDev_L16_Powers.png" alt="CSforDev_L16_Powers.png" height="auto"/>Contact Info (Group field, email, phone)Group fields help us organize content fields and in the UI the editor can collapse / open the group.&nbsp; They're also helpful when using the <a href="https://www.contentstack.com/docs/developers/create-content-types/about-field-visibility-rules/">Visibility Rules</a> in Content Types Home world (Reference field)The Home world has an image and some additional properties, so we use a Reference Field and define a Content Type for the Home World instead of using a select field or defining the fields here.<blockquote>Reference fields should be used when the content you want to include either already exists as a standalone entry (or part of one), or will be used by multiple content entries (either of the same type or not)</blockquote> SEOAdd a Global Field and choose the SEO Global Field <img asset_uid="blt2a67ac182732261b" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt2a67ac182732261b/67dc6adb4a89c32df8a2f912/CSforDev_L16_SEO.png" alt="CSforDev_L16_SEO.png" height="auto"/> All Done!Congrats - you are done with the Content Type definition.&nbsp;&nbsp; 3.&nbsp; Now, let's try out the new Character Content Type.&nbsp; Create a new Entry with the Character Content Type and fill in the content and publish to Development<h2>Content Type Best Practices</h2>URL field: &nbsp;Best practices/patterns. &nbsp;Use the /path/:title for most content types, where relevant. &nbsp;This maps to the Route in the web application and is also important for SEO. Choose this wisely. Image field: &nbsp;Consider using the height/width limitations Text fields: &nbsp;Consider any validations Modular Blocks: Think of this as a ‘design system’ of components the user can choose from. &nbsp; They have the flexibility to add it if they want, or not. &nbsp;Blocks can also be added at a later time to extend the content type. This can be done in confidence that things will not break if adjustments are made.If you're using a modern framework such as NextJS or Nuxt, then we can think of having a NextJS Component responsible for rendering the content of one Modular Block.&nbsp; In this way, the content and design are atomic and can be re-used across multiple pages. Reference fields:&nbsp; When re-using content with many entries, we can use a Reference Field and connect the Entries.&nbsp; We will need to add an additional query parameter to the Content Delivery Queries so that the referenced Entry fields will also be returned.&nbsp; One example of using a reference field is on a homepage or landing page where we want to also show a listing of articles, products in a promo, etc.&nbsp;&nbsp; However, be mindful when implementing Reference fields as they can be easily overused. &nbsp;When modeling content, it’s best to keep the relationship &nbsp;as flat as possible and only use reference fields when referring to another type of content that is mostly independent of the model it is being referenced in. &nbsp;If content fields are only used by the current entry, then it’s better to include them in the content type rather than using a reference field. &nbsp;Reference field over-use is the most common content modeling pitfalls &nbsp;and increases the complexity of the system for end users.&nbsp;<h1>Create the NextJS Component for the superhero detail page</h1>Next step is to render the Character Entries on a superhero detail page.&nbsp; This process involves the following steps:<ol><li>Create a new NextJS Component and import the Contentstack libraries</li><li>Use the HTML Provided and add the code to render the Contentstack Character Content Type fields</li><li>Run locally and preview the page</li></ol> Now that we have defined our superheroes using the Character Content Type and added some sample content, it's time to create a detail page to display them on our website. The HTML file for the superhero detail page is provided below. Using Contentstack's Content Delivery API and Next.js, we can create the code to render this page on our website.<h2>Programming the Character Detail Page</h2>1. Create a new NextJS Component for the detail page in a folder 'composable-heroes' and using the name [post].tsx2.&nbsp; Analyze the code for the Detail page and notice how we render text fields, reference fields and group fields.&nbsp; <a href="https://github.com/contentstack/contentstack-academy-playground/blob/main/pages/composable-heroes/%5Bpost%5D.tsx">The code is available on Github here.</a>3.&nbsp; Examine&nbsp;the Helper/index.js file and <a href="https://github.com/contentstack/contentstack-academy-playground/blob/89452b765dac23970f24ece7412beefc62bb18ec/helper/index.js#L106">review the code for getting a Single Entry (Character Content Type)</a>.&nbsp; This function will use the existing method ‘GetEntryByUrl in the /contentstack-sdk/index.js file to query for the Entry content.&nbsp;<img asset_uid="bltfe79f5ee8485bddd" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltfe79f5ee8485bddd/67dc6adbc566ee159b5df64c/CSforDev_L16_ExamineHelper.png" alt="CSforDev_L16_ExamineHelper.png" height="auto"/><a href="https://www.contentstack.com/docs/developers/sdks/content-delivery-sdk/javascript-browser/">Content Delivery JS SDK API Ref</a> <a href="https://gist.github.com/robertcurlette-cs/066c818c09c752426056eee7e9fa541c">Examples using the Content Delivery JS SDK in a NextJS Service</a>&nbsp; 4.&nbsp; Call the Character Query function from the NextJS <a href="https://github.com/contentstack/contentstack-academy-playground/blob/89452b765dac23970f24ece7412beefc62bb18ec/pages/composable-heroes/%5Bpost%5D.tsx#L62">composable-heroes/[post].tsx file</a><img asset_uid="blt5330eb37dbb29171" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt5330eb37dbb29171/67dc6adbdb243f203c12b94c/CSforDev_L16_CharacterQuery.png" alt="CSforDev_L16_CharacterQuery.png" height="auto"/> <h2><a href="https://github.com/contentstack/contentstack-academy-playground/blob/main/pages/composable-heroes/%5Bpost%5D.tsx">Code Solution for Composable Hero Detail Page on Github</a></h2> <h2>Field rendering syntax:</h2>Text fields - Rendering the title field{postData?.title}Group fields{postData?.contact_info?.email ?Email : {postData?.contact_info?.email}Images<img asset_uid="bltbe51c92c1ac561c8" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltbe51c92c1ac561c8/67dc6adbc5b83e51fa924181/CSforDev_L16_RenderImage.png" alt="CSforDev_L16_RenderImage.png" height="auto"/> Reference Field<img asset_uid="blta737586dbcea3b4a" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blta737586dbcea3b4a/67dc6adb983a658c2e3b71db/CSforDev_L16_RenderField.png" alt="CSforDev_L16_RenderField.png" height="auto"/> 6.&nbsp; Confirm your code with the Composable Detail Page solutionFinal Result - Composable Hero&nbsp;Detail Page<img asset_uid="blt9e10f8c799a48670" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt9e10f8c799a48670/67dc6adc5e486d1eed71aaa3/CSforDev_L16_FinalResult.png" alt="CSforDev_L16_FinalResult.png" height="auto"/>

Creating the Hero Detail Page

<h2>The Composable Hero&nbsp;Landing Page</h2>Welcome to this tutorial on creating a superhero gallery page using reference fields in NextJS! In this module, we'll walk you through the steps of creating a new content type called "Superhero Gallery Page" and adding heroes to it manually.&nbsp;We'll start by showing you how to utilize reference fields to display hero content on the landing page with their images and names. This technique is commonly used in product promotions and article index pages, so it's a valuable skill to learn.&nbsp;Next, we'll guide you through the process of creating a new NextJS component and query to retrieve the Landing Page Entry and Reference field Hero Entries. Our NextJS component will loop through all the heroes in the reference field and display their titles, images, and links to their respective detail pages.Finally, we'll demonstrate how to create a new Landing Page Entry and publish it to the Development environment to see the results of our work.By the end of this tutorial, you'll have gained valuable knowledge on how to utilize reference fields in NextJS to create reusable content and enhance the user experience on your website. Let's get started!<img asset_uid="blt36760c2226f23188" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt36760c2226f23188/67dc74d1443bd6f8bef1c126/CSforDev_L17_ComposableHeroes.png" alt="CSforDev_L17_ComposableHeroes.png" height="auto"/><h2>Hero Gallery&nbsp;Page Content Type</h2><img asset_uid="bltca3a395e8b43a268" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltca3a395e8b43a268/67dc74d25e486ddf7571ab5f/CSforDev_L17-HeroGalleryPageContentType.png" alt="CSforDev_L17-HeroGalleryPageContentType.png" height="auto"/><h2></h2><h4>Open the Superhero Gallery Page and examine the properties of each field</h4><img asset_uid="blt5d634d5af8ed1ef2" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt5d634d5af8ed1ef2/67dc74d120a3dc7d26f81da5/CSforDev_L17-SuperHeroGalleryPage.png" alt="CSforDev_L17-SuperHeroGalleryPage.png" height="auto"/>Review the following fields below:<ul><li>Title - Default Title field</li><li>URL - /gallery/:title</li><li>Heading - Text field</li><li>Description - Multi-line text</li><li>Characters - Reference field to the Character Content Type</li></ul><h2>Part 2: Writing the code to display the list of heroes</h2>Let's list all the heroes in the reference field on the Gallery&nbsp;page.&nbsp; Users can manually create a list of heroes and our code will loop over all the heroes in the reference field and render the name, image, and link.&nbsp; <h3>Rendering a list of Characters from a Reference Field</h3> 1.&nbsp;&nbsp;Create a NextJS Component for the Gallery page and loop through all the heroes in the reference field, rendering&nbsp;the title, image and a link to the detail page.&nbsp; This involves 2 steps, first writing the query function and then rendering the results. 2.&nbsp; Querying Contentstack for the Characters in the Reference Field <a href="https://github.com/contentstack/contentstack-academy-playground/blob/main/helper/index.js">In the /helpers/index.js file</a>, review the function to get a list of heroes from the reference field 3.&nbsp; <a href="https://github.com/contentstack/contentstack-academy-playground/blob/main/pages/composable-heroes/index.tsx">Review the code for the /composable-heroes/index.tsx file</a>.&nbsp;&nbsp; 4.&nbsp; Review the Composable Heroes Gallery Entry<img asset_uid="blta1719b3c553d3aa7" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blta1719b3c553d3aa7/67dc74d28fee9af26547d6d2/CSforDev_L17-ReviewComposableHeroesGalleryEntry.png" alt="CSforDev_L17-ReviewComposableHeroesGalleryEntry.png" height="auto"/> 5.&nbsp; From the NextJS application, open the Composable Heroes Gallery Page<img asset_uid="blt987109e80668c33d" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt987109e80668c33d/67dc74d2c566ee77065df700/CSforDev_L17-NextJSappOpenComposableHeroes.png" alt="CSforDev_L17-NextJSappOpenComposableHeroes.png" height="auto"/> 2. Introduction to using the Query functions of the Content Delivery APIContentstack provides certain queries that you can use to fetch filtered results. You can use queries for Entries and Assets API requests.&nbsp; Please review the <a href="https://www.contentstack.com/docs/developers/apis/content-delivery-api/#queries">Content Delivery Query API documentation</a> and examine the RegEx, Limit and Only functions.For the first part of the exercise, we can use a simple query to find all the entries with the Content Type of Character.&nbsp;&nbsp;<h3>Postman</h3>1.&nbsp; Open Postman and select the Entries/Get Entries call Update the parameters / variables so that:<ul><li>content_type_uid = character</li><li>environment = development </li></ul><img asset_uid="bltfc54a08558f3257d" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltfc54a08558f3257d/67dc74d20c6f5573391fc550/CSforDev_L17-Postman1.png" alt="CSforDev_L17-Postman1.png" height="auto"/>You should now have a list of the characters published to the development environment.&nbsp; In the next section, we will use the JavaScript SDK to get the same list and pass it to the NextJS App to render. 3. Query using Javascript SDKIn our web application we will mostly use the <a href="https://www.contentstack.com/docs/developers/sdks/content-delivery-sdk/javascript-browser/reference/">Javascript Content Delivery SDK</a>.&nbsp; Please have a look at the <a href="https://www.contentstack.com/docs/developers/sdks/content-delivery-sdk/javascript-browser/reference/#query">documentation for the query methods</a>.Other SDKs can be found on the <a href="https://www.contentstack.com/docs/developers/sdks/">SDKs documentation page</a><pre>import Contentstack from 'contentstack'; const Stack = Contentstack.Stack({"api_key": "api_key", "delivery_token": "delivery_token", "environment": "environment"}); const result = await Stack.ContentType('character').Query().toJSON().find();</pre><a href="https://www.contentstack.com/docs/developers/sdks/content-delivery-sdk/javascript-browser/reference/#stack-query">More information about this is found in the Javascript SDK Docs</a><h2>Composable Hero Landing Page</h2>The Composable Hero Landing Page uses <a href="https://www.contentstack.com/docs/developers/create-content-types/modular-blocks/">Modular Blocks</a> to provide a flexible structure for authors to create content and add as many content blocks to the page as they wish and also to re-order the blocks.&nbsp;&nbsp;<img asset_uid="blt20cf9dbe38b2ce7a" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt20cf9dbe38b2ce7a/67dc74d2dd73e3150dbf2aca/CSforDev_L17-ComposableLandingPage.png" alt="CSforDev_L17-ComposableLandingPage.png" height="auto"/> <h2>Open the Superhero Landing Page Entry and review the content</h2><img asset_uid="bltbd496f6c2aa7c3fb" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltbd496f6c2aa7c3fb/67dc74d1632b938d87d497f4/CSforDev_L17-OpenSyperheroLandingPage.png" alt="CSforDev_L17-OpenSyperheroLandingPage.png" height="auto"/><h2> </h2><h2>Open the Content Type Definition and examine how the Modular Blocks field is used.&nbsp;</h2>Notice the fields are greyed out - that is because the Modular Block fields are defined using Global Fields.&nbsp; This is a best practice.<img asset_uid="bltcb805c91070decc1" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltcb805c91070decc1/67dc74d18fee9a015647d6ce/CSforDev_L17-OpenContentTypeDefinition.png" alt="CSforDev_L17-OpenContentTypeDefinition.png" height="auto"/><h2>Global Field Definitions</h2><img asset_uid="blt133ae7c39bec81dd" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt133ae7c39bec81dd/67dc74d1782bfb40816f4d07/CSforDev_L17-GlobalFieldDefinitions.png" alt="CSforDev_L17-GlobalFieldDefinitions.png" height="auto"/><h2> </h2><h2>Examine the Code used for the Hero Landing Page</h2>The <a href="https://github.com/contentstack/contentstack-academy-playground/blob/main/pages/gallery.tsx">code for the Gallery Entry (Page)</a>&nbsp;loops through all the Modular Blocks on the page and renders each one with its' own NextJS Component. <img asset_uid="blt32ad6ea1b6068a60" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt32ad6ea1b6068a60/67dc74d16f68587885fd9e35/CSforDev_L17-CodeForGalleryEntry.png" alt="CSforDev_L17-CodeForGalleryEntry.png" height="auto"/><h2>Each block is rendered with its own NextJS Component</h2><ul><li><div><a href="https://github.com/contentstack/contentstack-academy-playground/blob/main/components/gallery.tsx">Gallery Block</a><a href="https://github.com/contentstack/contentstack-academy-playground/blob/main/components/gallery.tsx"> </a><img asset_uid="blt6997b78ab65f5110" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt6997b78ab65f5110/67dc74d1bbf93ef9c3586444/CSforDev_L17-BlockRenderwithNextJScomp.png" alt="CSforDev_L17-BlockRenderwithNextJScomp.png" height="auto"/><div></div></div> </li><li><a href="https://github.com/contentstack/contentstack-academy-playground/blob/main/components/hero-banner.tsx">Hero Banner Block</a><div><img asset_uid="blt57deb882be0262c1" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt57deb882be0262c1/67dc74d1db243fda9112b9df/CSforDev_L17-HeroBannerBlock.png" alt="CSforDev_L17-HeroBannerBlock.png" height="auto"/><a href="https://github.com/contentstack/contentstack-academy-playground/blob/main/components/hero-banner.tsx"> </a><div></div></div></li></ul>By adopting this approach, we can isolate the HTML/Code for each block within a single NextJS Component. This simplifies maintenance and enables easy extension of the page in the future by adding a Modular Block and NextJS Component for additional content block types.&nbsp;With this method, you can modify the individual content blocks without having to make changes to the entire page structure. This approach makes the codebase more organized and easier to manage, especially when dealing with complex web applications.&nbsp;By leveraging this technique, you can increase the scalability and modularity of your website, allowing you to add new features and functionalities with ease.

Creating the Hero Gallery Page

<h3>Using Modular Blocks - Advantages</h3>There are several advantages to using Contentstack's modular blocks when designing content types. Here are some of the key advantages:1. Flexibility for marketers: Modular blocks allow marketers to easily create and customize content without requiring technical expertise. With modular blocks, marketers can easily use pre-designed content blocks to create engaging content without having to worry about formatting or layout.2. Reusability: With Global Fields, Modular blocks can be reused across different content types and pages, which can help to save time and effort when creating new content.3. Consistency: Modular blocks ensure consistency in content formatting and layout, which can help to improve the overall user experience.4. Granular control: Modular blocks provide developers with granular control over content structure and formatting, which can help to ensure that content is properly organized and optimized for SEO.5. Easy maintenance: With modular blocks, it is easy to update and maintain content without having to modify the entire content type or page.7. Future-proofing: Modular blocks provide a future-proof solution for content design, as they can be easily updated and modified to meet changing business needs.<h2>Example:&nbsp; Using Modular Blocks in the&nbsp; Starter App</h2>In the Starter App, the Page Content Type uses Modular Blocks to define the various sections of the page.&nbsp; In this example below, notice how each block or module on the page is a Modular Block.&nbsp; In this example we have 3 Modular Blocks.<img asset_uid="blt163b2eba984ba5dd" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt163b2eba984ba5dd/67dc77d9dd73e3394ebf2b15/CSforDev_L18-ExampleModularBlocks.png" alt="CSforDev_L18-ExampleModularBlocks.png" height="auto"/> These Blocks are used in the Page Content Type.<img asset_uid="bltc596ad6019f6b557" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltc596ad6019f6b557/67dc77d9c5b83e1789924263/CSforDev_L18-BlocksUsedInPageComponent.png" alt="CSforDev_L18-BlocksUsedInPageComponent.png" height="auto"/> <h2>Using Global Fields for Defining Re-Usable Content Structures</h2>Global Fields in Contentstack promote the re-use of content structures across content types.&nbsp; They allow us to define a schema of fields and then reference that definition from another content type or modular block.In the StarterApp website, the SEO fields are defined as Global Fields. This makes it easy to manage the SEO fields from one location and re-use the definition across all content types.<img asset_uid="bltbfba1754f824d5ea" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltbfba1754f824d5ea/67dc77d96f6858cde5fd9e68/CSforDev_L18-GlobalFields_3.png" alt="CSforDev_L18-GlobalFields_3.png" height="auto"/><img asset_uid="blt868c68695563b3bd" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt868c68695563b3bd/67dc77d9a6d88e2e87052b51/CSforDev_L18-SEO_4.png" alt="CSforDev_L18-SEO_4.png" height="auto"/> <h2>Using Global Fields for Modular Blocks</h2>Global fields can&nbsp; also be used to define field sets for Modular Blocks. This is a great way to re-use structure.&nbsp; Note, it is currently not possible to nest a Global Field inside another Global Field, so take that into consideration when designing your content types.<h2>Resources</h2><ul><li><a href="https://www.contentstack.com/docs/developers/create-content-types/modular-blocks/">Modular Blocks</a></li><li><a href="https://www.contentstack.com/docs/developers/global-field/">Global Fields</a></li><li><a href="https://www.contentstack.com/docs/developers/global-field/limitations-of-global-field/">Limitations of Global Fields</a></li><li><a href="https://www.contentstack.com/docs/developers/content-modeling/content-modeling-best-practices/">Content Modeling Best Practices</a></li></ul>

Design Patterns with Content Types

With Contentstack's launch product, developers can focus on building and updating their applications while leaving the hosting infrastructure to Contentstack.To assist users with the various functionalities of this product, Contentstack offers a <a href="https://www.contentstack.com/docs/developers/launch/">comprehensive help center</a> on its website. The help center includes detailed guides and tutorials on <a href="https://www.contentstack.com/docs/developers/launch/import-project-using-github/">creating projects</a>, <a href="https://www.contentstack.com/docs/developers/launch/deploy-hooks/">setting up deploy hooks</a>, and <a href="https://www.contentstack.com/docs/developers/launch/redeploy-automatically-when-content-is-published-on-CMS/">redeploying applications</a> when content is published. Additionally, the website provides a robust community forum where users can interact with other users, share their experiences, and get support from the Contentstack team.<ul><li>Host&nbsp;your website or web app directly from Contentstack, leveraging our high-speed CDN and proven infrastructure.</li><li>Link&nbsp;your Contentstack Stacks and front-end environments without copying and pasting API keys.</li><li>Leverage&nbsp;the only front-end site hosting solution that’s built explicitly for the Contentstack CMS.</li></ul><h2>Framework agnostic</h2>Build projects in virtually any common Javascript front-end framework, easily connect to and deploy code directly from a git repository.<ul><li>Automatic&nbsp;configuration for Nextjs and Gatsby, with more frameworks on the way</li><li>Use&nbsp;virtually any composable Javascript front-end framework with custom build commands.</li><li>Upload&nbsp;static site files via Zip for instant deployment for projects that don’t use git.</li><li>Support&nbsp;for Edge functions and more&nbsp;coming soon!</li></ul><h1>Exercise: Deploy the site with Contentstack Launch</h1>1.&nbsp; Open Launch <img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt59869ec9f872a769/67dc7979632b93a52ad4983e/CSforDev_L19-img_1.png" alt="CSforDev_L19-img_1.png" height="auto"/>2.&nbsp; New Project 3.&nbsp; Upload File<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt803195694348711a/67dc79af983a650b893b72f7/CSforDev_L19-img_2.png" alt="CSforDev_L19-img_2.png" height="auto"/> 4. Upload the StarterApp project.&nbsp; In this example, we will use the NextJS Starter App.&nbsp; Download the code from the Github repository here:&nbsp;<a href="https://github.com/contentstack/contentstack-nextjs-starter-app">https://github.com/contentstack/contentstack-nextjs-starter-app</a> 5.&nbsp; Select your Stack with the Starter App and then Import Environment Variables<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt91248dc45e8c64c4/67dc79e5314d6788311b6674/CSforDev_L19-img_3.png" alt="CSforDev_L19-img_3.png" height="auto"/>6.&nbsp; Site is being deployed.&nbsp; This takes up to 5 minutes.&nbsp; The URL will be a Contentstack URL with the free trial, however, with a paid plan you will be able to use custom domains.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt9de2eeb19d27402b/67dc7a13dd73e3fed6bf2b3b/CSforDev_L19-img_4.png" alt="CSforDev_L19-img_4.png" height="auto"/> 7.&nbsp; Site is deployed <h3>Learn More About Launch</h3><ul><li><a href="https://www.contentstack.com/docs/developers/launch/">Developer Documentation</a></li><li><a href="https://community.contentstack.com/search?q=Launch&search_type=tag">Community Forum</a></li><li><a href="https://www.contentstack.com/docs/developers/launch/quick-start-nextjs/">Guide for Deploying the StarterApp with Launch</a></li></ul>

Deploying the Starter App with Contentstack Launch

<h2>Introduction to the Content Management API</h2>Our Content Management API (CMA) is a powerful tool that provides a read/write API with a REST interface, as well as SDKs for JavaScript, .NET, and Java. To authenticate with the CMA, we use Tokens. In this exercise, we'll guide you through how to use the CMA with Postman, a popular tool that helps developers use APIs.Let's get started with the exercise. We'll be using Postman, so first, make sure to download the latest Contentstack Postman collection from here: <a href="https://www.contentstack.com/docs/developers/apis/content-management-api/#install-postman">https://www.contentstack.com/docs/developers/apis/content-management-api/#install-postman</a>Also, download and use the Postman Environment Files from Github here: <a href="https://github.com/contentstack/contentstack-postman-collections#environment-files">https://github.com/contentstack/contentstack-postman-collections#environment-files</a><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltf68a0bfc44851c8f/67dc7a8d5e486d622a71ac32/CSforDev_L20-img-1.png" alt="CSforDev_L20-img-1.png" height="auto"/> The next step is to create a Management Token to use in our Postman query. To do this, go to Settings in the Contentstack UI, then Tokens, Content Management, and create a Management Token. You can follow this guide for more detailed instructions: <a href="https://www.contentstack.com/docs/developers/create-tokens/generate-a-management-token/">https://www.contentstack.com/docs/developers/create-tokens/generate-a-management-token/</a><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltc549d1dc354f62fb/67dc7aab983a655a2b3b7306/CSforDev_L20-img-2.png" alt="CSforDev_L20-img-2.png" height="auto"/> Now, open Postman and add the Content Management API Postman Collection. Select Content Management API - Contentstack, Entries, Get a single entry, and you're ready to go!In Postman, select Content Management API -&nbsp;Contentstack, Entries, Get a single entry Update the API Key and Access TokenThere are two ways to set the values, using Postman variables like above or hard-coding the values in the Value column. &nbsp;I prefer to use the Environment variables. <a href="https://github.com/contentstack/contentstack-postman-collections#environment-files">https://github.com/contentstack/contentstack-postman-collections#environment-files</a>1.&nbsp; Set the Environment variable values for your Stack in Postman by selecting the icon in the top-right of Postman to open the Environment variable window.Specify the following header values: - api_key - This is located in the Settings, Tokens, Management Token page. &nbsp;You can also see it in the URL of the browser, after the /stack/ part of the URL, http://app.contentstack.com/#!/stack/{api_key}- management_token - Management token created in step 12.&nbsp; Use the ‘Get a single entry’’ method and add the base_url, content_type_uid (character) and entry uid to the query. &nbsp;This will retrieve the JSON for the Entry using the backend CMA. &nbsp;*Note, we do not use this API for our frontend website applications as it is not intended for high load / performance. &nbsp;Instead, the frontend web applications use the Content Delivery API which is tuned for high performance.3.&nbsp; Run the query and see the JSON result. Notice that we have Create / Read / Update / Delete operations for most types. Using the JSON returned from the Get Entry method, we will create new JSON to use for the Create Entry method in the next exercise. &nbsp; Learn More: Key Features of Management Tokens: <a href="https://www.contentstack.com/docs/developers/create-tokens/key-features/">https://www.contentstack.com/docs/developers/create-tokens/key-features/</a><h2>Creating content with the API:&nbsp; Using the Content Management API</h2><h3>Exercise: &nbsp;Create an entry with the Postman API</h3>In this exercise, we'll guide you through creating a new Entry in Contentstack programmatically using our Content Management API. This method is incredibly useful for quickly migrating content from external systems and avoiding manual entry.The trickiest part of this process is creating well-formed JSON that contains all the properties and content for the Entry. But don't worry - we've got you covered. In the previous exercise, we used our CMA to retrieve the Entry JSON, and now we'll use a subset of that JSON to create our new Entry.If you weren't able to retrieve the JSON Entry export in the previous exercise, we've included a sample below. Just make sure to update the UID of the Content Type for it to work.To get started, let's create the Entry JSON required to make a new Entry. Below is an example JSON, but remember to replace the Content Type UID:<pre>{
 "title": "New Entry Title",
 "url": "/new-entry-url",
 "description": "This is a new Entry created programmatically using the Content Management API.",
 "content_type_uid": "your-content-type-uid",
 "metadata": {
 "tags": ["tag1", "tag2"],
 "author": "John Doe"
 },
 "body": "</pre><pre>This is the body of the new Entry.</pre><pre>" }</pre>Now, in Postman, open the ‘Create an entry’ method and in the body tab, paste the JSON of the new Entry. Please note that the Title property of the Entry needs to be unique.As we used Postman variables in the previous exercise, you won't need to add any additional settings here, since the api_key and management token are already specified.Finally, hit the Send button in Postman to create your new Entry. Head over to the Contentstack UI to confirm that it has been created successfully.<h2>Exporting Content from Contentstack</h2>Contentstack stores all text content in JSON format.&nbsp; This makes it very easy to import / export and update content using the Content Management API or the CLI.&nbsp; In this section we will discuss the three ways to export content from Contentstack:&nbsp; UI, CM API, and the CLI.<h2>Exporting with the UI</h2><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt3031a286be14c33e/67dc7af4a71458f9d3b9ac8d/CSforDev_L20-img-3.png" alt="CSforDev_L20-img-3.png" height="auto"/><h2> </h2><h2><a href="https://www.contentstack.com/docs/developers/apis/postman-collections/">Exporting with Postman</a></h2><img asset_uid="bltf85b2c24d02d5273" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltf85b2c24d02d5273/67dc7b2437e25afefd1e3cac/CSforDev_L20-img-4.png" alt="CSforDev_L20-img-4.png" height="auto"/><h2> </h2><h2><a href="https://www.contentstack.com/docs/developers/cli/export-content-using-the-cli/">Exporting with the CLI</a></h2><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltdf993e1837922ae0/67dc7b8ec566ee36ce5df792/CSforDev_L20-img-5.png" alt="CSforDev_L20-img-5.png" height="auto"/> <h2>Exporting Content from Contentstack</h2>Contentstack stores all text content in JSON format.&nbsp; This makes it very easy to import / export and update content using the Content Management API or the CLI.&nbsp; In this section we will discuss the three ways to export content from Contentstack:&nbsp; UI, CM API, and the CLI.<h4>Exporting with the UI</h4><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt125b7f4295bb35a9/67dc7bbd632b932162d49860/CSforDev_L20-img-6.png" alt="CSforDev_L20-img-6.png" height="auto"/><h2></h2><h4><a href="https://www.contentstack.com/docs/developers/apis/postman-collections/">Exporting with Postman</a></h4><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt1b91f0972f174299/67dc7be7a714580b08b9ac9c/CSforDev_L20-img-7.png" alt="CSforDev_L20-img-7.png" height="auto"/><h2> </h2><h4><a href="https://www.contentstack.com/docs/developers/cli/export-content-using-the-cli/">Exporting with the CLI</a></h4><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt029257333658a4ea/67dc7c0d2d0b98a5affcfe07/CSforDev_L20-img-8.png" alt="CSforDev_L20-img-8.png" height="auto"/>

Importing Content with the CLI and CMA

<h2>Roles</h2>Contentstack has a robust roles and permissions system with built-in roles such as 'Admin', 'Developer', and 'Content Manager' and the ability to create custom roles for authors and editors.&nbsp; In this module we will look briefly at the roles and permissions system in Contentstack.Built-in RolesAdmin:&nbsp;Admin has full access to all features and functions within Contentstack, including the ability to create, edit, and delete content, manage users and roles, and configure the system settings. Super Admins have the highest level of privileges and can perform any action within the platform.Content Manager: The Content Manager has the ability to create, edit, and delete content, as well as manage users and roles. However, they do not have access to the system settings or the ability to perform advanced tasks such as configuring webhooks or integrations.Developer: The Developer role is designed for users who need to access the Contentstack API and develop custom solutions using the platform. Developers have the ability to create and manage content types, as well as access the API documentation and sample code. However, they do not have the ability to manage users and roles. Custom RolesIn Contentstack, custom roles allow users to define and customize the level of access and permissions for specific users or groups of users. This provides greater flexibility and control over how content is managed and published within the system.To create a custom role, a Super Admin or a user with the "Manage Roles" permission can navigate to the Roles section of the Contentstack dashboard and click on the "Add Role" button. From here, they can give the custom role a name and select the specific permissions that they want to grant to users assigned to that role.The available permissions can be grouped into three categories:<ul><li>Content: permissions related to creating, editing, and publishing content and images</li><li>Publishing: permissions related to publishing content and environments</li><li>Languages: Permissions relating to localization</li></ul>Once the custom role is created, it can be assigned to specific users or groups of users within the system. Users assigned to the custom role will only have access to the permissions and features that are granted to that role, ensuring that they only have access to the specific tasks and content that they are responsible for. This helps to improve security and streamline workflows within the system.<h2>Exercise: Creating a custom role</h2>&nbsp;Here are the steps to create a custom role in Contentstack:1. Log in to your Contentstack account and navigate to the “Settings / Users &amp; Roles / Roles” section of the dashboard.2. Click on the “New Role” button to create a new custom role.3. In the “Role Details” section, enter a name for your custom role.4. Next, choose the permissions you want to grant to this role by selecting the options for each permission category (Content, Assets, Languages and Environments).5. Under each permission category, you can select or deselect specific permissions that you want to include or exclude for this role.7. Once you have selected the permissions you want to grant to the custom role, click the “Save” button to save the role.8. To assign users to the custom role, navigate to the “Users” section of the dashboard and select the user(s) you want to assign the role to.9. In the “Update User” dialog box, select the “Roles” tab, and then select the custom role you created from the list of available roles.10. Click the “Save” button to save the changes.That's it! You have now created a custom role in Contentstack and assigned it to specific users within your organization.<h3>Resources</h3><ul><li><a href="https://www.contentstack.com/docs/developers/invite-users-and-assign-roles/examples-to-create-custom-roles/">Examples to create custom roles</a></li></ul><div style="position: relative;overflow: hidden;padding-bottom: 56.25%;"><iframe src="https://cdn.jwplayer.com/players/owFEMYhE-b769H14u.html" width="100%" height="100%" frameborder="0" scrolling="auto" title="Dev-roles In Contentstack" style="position: absolute;" allowfullscreen=""></iframe></div>

Working with Roles and Permissions

Contentstack's workflow feature is a powerful tool that enables organizations to manage the content creation and publishing process in a streamlined and efficient way. With workflow, content creation and publishing becomes a collaborative process that involves multiple stakeholders, including writers, editors, and approvers.&nbsp;The workflow feature allows you to define a series of states that content can go through, from initial creation to final approval and publishing. Each state represents a stage in the content creation process, and can be assigned to different roles or users. For example, you can set up states such as "Draft", "In Review", "Approved", and "Published".As content moves through the workflow, it can be edited, reviewed, and approved by different users based on their assigned roles. Users can add comments and feedback, and content can be easily tracked and managed throughout the entire process. This ensures that content is thoroughly reviewed and approved before being published, minimizing the risk of errors or inaccuracies.Contentstack's workflow feature also includes notifications and alerts, which keep everyone involved in the process informed of content changes, updates, and approvals. This helps to keep the process moving smoothly and ensures that everyone is on the same page.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt655072dfe47556f8/67dc7c8f17f7b4421c0cf7cd/CSforDev_L22-img-1.png" alt="CSforDev_L22-img-1.png" height="auto"/><h2>Exercise: Creating a Workflow with a Publish Rule</h2>Here's a step-by-step guide on how to use Contentstack's workflow feature to create a publishing rule for production:Step 1: Log in to your Contentstack account and select the stack you want to work with.Step 2: Click on the "Settings" button in the top navigation bar.Step 3: Click on the "Workflows" tab.Step 4: Click on the "New Workflow" button.Step 5: Enter the following: - Name: &nbsp;"Blog Workflow". &nbsp; - Scope (branches): Main. &nbsp; - Specific Content Types: Blog EntryStep 6: Add the states that content will go through before being published. For example, you could add the states "Draft", "In Review", "Approved", and "Published".Step 7: Click on the "Enable Workflow" checkbox and the "Save" button to create the workflow.Step 8: Next, you'll need to create a publishing rule that specifies which content should be published to your production environment. Click on the "Publishing Rules" tab.Step 9: Click on the "New Publishing Rule" button.Step 10: Enter a name for your publishing rule, such as "Publish to Production".Step 11: Under "Content type", select the "Blog Entry" Content TypeStep 12: Under "Language", select "All Languages"Step 13: Under "Environment", select "Production"Step 14: Under "Rule Conditions", you can set up conditions that must be met before the content is published. For example, you could require that the content has the "Approved" state before it can be published.Step 15: Click on the "Save" button to save the publishing rule.Step 16: Now, whenever content is created or updated, it will go through the workflow you created in step 5. If the content meets the conditions you set up in the publishing rule, it will be published to your production environment automatically.Congratulations! You have successfully created a publishing rule for production using Contentstack's workflow feature. This will help you streamline your content creation and publishing process and ensure that only approved content is published to your production environment.<h2>Example: Using Workflow and Webhooks for Automating Translation</h2>In the context of a Contentstack workflow, a webhook trigger can be used to automate the movement of content through the different stages of the workflow or send to an external service such as a translation agency.&nbsp;To set up a webhook trigger to use a workflow stage in Contentstack, you would first need to create a workflow and define the stages that content should go through. Once the workflow is set up, you can create a webhook trigger that is triggered when content is created or updated.In the webhook trigger settings, you can specify the workflow stage that the content should be moved to when the webhook is triggered. For example, you could set up the webhook trigger to move the content from the "Draft" stage to the "In Review" stage when it is created or updated.Once the webhook trigger is set up, it will automatically move the content through the workflow based on the rules that you have defined. This can help to save time and improve efficiency, as content can be automatically routed to the appropriate stage without requiring manual intervention. Step 1: Set up your workflow in Contentstack First, you'll need to set up your workflow in Contentstack to define the stages that content should go through before it is published. For example, you might create stages for "Draft", "In Review", and "Approved".Step 2: Set up a webhook trigger Next, you'll need to set up a webhook trigger that is triggered when content is created or updated. In the webhook trigger settings, you can specify the URL of your 3rd-party translation service, along with any required authentication details.Step 3: Define a workflow stage for translation In your workflow, you can define a new stage specifically for translation. For example, you might create a stage called "Translation" that is between the "In Review" and "Approved" stages.Step 4: Set up a webhook action to send content to the translation service In the workflow stage for translation, you can set up a webhook action that sends the content to the 3rd-party translation service. You can use the webhook trigger that you set up in step 2 to automatically send the content to the translation service when it enters the "Translation" stage.Step 5: Receive and process the translated content Once the content has been sent to the translation service, the service will translate the content into the desired language(s). The translation service can then send the translated content back to Contentstack via another webhook trigger.Step 6: Move the translated content to the next stage in the workflow When the translated content is received by Contentstack, you can set up another webhook action that automatically moves the content to the next stage in the workflow. For example, you might move the content from the "Translation" stage to the "Approved" stage when it is received.Overall, using a Contentstack webhook trigger with workflow to send content to a 3rd-party translation service can help to streamline the translation process and ensure that content is translated efficiently and accurately.&nbsp;<h1>Resources</h1><ul><li><a href="https://www.contentstack.com/docs/developers/set-up-workflows-and-publish-rules/">Workflow Documentation</a></li><li><a href="https://www.contentstack.com/docs/developers/how-to-guides/#translation-services">Translation Integrations</a></li></ul>

Workflow

Contentstack's webhook system is a powerful tool that allows developers to automate the process of receiving real-time notifications of changes made to content within the CMS. A webhook is an HTTP callback that sends a notification to a specified URL whenever a specific event occurs. In the case of Contentstack, the event could be when content is created, updated, deleted, or published.Developers can create webhooks in Contentstack and specify which events should trigger them. When an event occurs, Contentstack sends an HTTP POST request to the specified URL, containing information about the event and the associated content.With this information, developers can automate processes such as updating search indexes, notifying team members of content changes, or triggering other third-party services. Additionally, Contentstack allows developers to set up conditional logic to filter webhooks based on specific criteria, such as content types, allowing for even more granular control over webhook behavior.<h2>Exercise: Using a webhook to call an endpoint on the webhook.site service</h2>Step 1: Go to <a href="https://webhook.site">webhook.site</a> in your web browser.Step 2: Click on the "Create a webhook" button on the top right corner of the webpage.Step 3: In the "Create a new webhook" modal, you'll see a unique webhook URL that you can use to send HTTP requests. Copy this URL to your clipboard.Step 4: Log in to your Contentstack account and go to the Settings section of your stack.Step 5: Click on the "Webhooks" tab.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt9928fe7cfbd4a917/67dc7ce545b2290ec4910d8c/CSforDev_L23-img-1.png" alt="CSforDev_L23-img-1.png" height="auto"/> Step 6: Click on the "Add New Webhook" button.Step 7: In the "Create Webhook" modal, enter a name for your webhook, such as "Webhook.site Test". Step 8: In the "URL" field, paste the webhook URL that you copied from webhook.site in step 3.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt40127c0aeeac44ff/67dc7d088fee9a424247d751/CSforDev_L23-img-2.png" alt="CSforDev_L23-img-2.png" height="auto"/>Step 9: Under "Webhook Triggers", select "Publish" as the trigger event.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltaa1169f852f5c558/67dc7d3220a3dc0ca6f81e2c/CSforDev_L23-img-3.png" alt="CSforDev_L23-img-3.png" height="auto"/>Step 10: Click on the "Save" button to save the webhook.Step 11: Now, whenever you publish content in Contentstack, a webhook notification will be sent to the URL you specified in step 8.Step 12: To test the webhook, publish a new piece of content in Contentstack.Step 13: Return to webhook.site and click on the "Inspect" button next to the webhook that you just created. You should see the webhook notification data from Contentstack, including the published content.Congratulations! You have successfully tested a Contentstack webhook using webhook.site. You can now use webhook.site to test your webhook implementations or receive webhook notifications from other services.<h2>Learn More</h2><ul><li><a href="https://www.contentstack.com/docs/developers/set-up-webhooks/">Webhooks Documentation Page</a></li><li><a href="https://community.contentstack.com/search?q=webhooks">Community Forum</a></li></ul>

Webhooks

<h2>Sending HTTP Messages with Automate</h2>
An&nbsp;<a href="https://www.contentstack.com/docs/developers/automation-hub-connectors/http-action/">HTTP Action</a>&nbsp;allows us to send an HTTP call when a trigger event occurs. This enables us to send JSON from an&nbsp;entry, asset, or release&nbsp;to any service that accepts an HTTP POST, GET, PUT, DELETE, or PATCH. In this module we will use an&nbsp;HTTP Action connector&nbsp;to send the&nbsp;entry&nbsp;JSON to an external webhook listener. This method can be used to integrate with third-party systems that do not&nbsp;have a pre-built connector but can receive a GET or POST request.
Topics covered:
<ul>
 <li>
 Sending JSON to an external web service
 </li>
 <li>
 Using the website&nbsp;<a href="http://webhook.site/">http://webhook.site</a>&nbsp;to receive to our HTTP message
 </li>
</ul>
Please watch the following video to see an example of sending an HTTP message with&nbsp;automate:

<div style="position: relative;overflow: hidden;padding-bottom: 56.25%;"><iframe src="https://cdn.jwplayer.com/players/jmJmjKiy-b769H14u.html" width="100%" height="100%" frameborder="0" scrolling="auto" title="Dev-course Automation Hub, Connect To 3rd Party Webservice" style="position: absolute;" allowfullscreen=""></iframe></div>

<h3>Exercise:&nbsp;Create a new Automation that sends an HTTP Post request to a 3rd party web service when an entry&nbsp;is published</h3>
1. Create a new Automation using a Contentstack Trigger 2. Add a new action&nbsp;and use the HTTP Connector&nbsp; 3. Go to http://webhook.site and create a new webhook listener 4. In the Configure Action step, specify the URL of the webhook from above

Automate- Using an HTTP Connector to Send Data to a 3rd Party System

The <a href="https://www.contentstack.com/docs/developers/marketplace-platform-guides/">Contentstack Marketplace</a> is a platform for apps and other resources that help you extend the capabilities of our core CMS and customize its functionalities. It is a one-stop resource to discover, browse, and install tools to enhance the Contentstack experience by connecting to various third-party services in a simple installation. The <a href="https://www.contentstack.com/docs/developers/marketplace-apps/">apps</a> and resources on Marketplace are created by Contentstack and our partners.&nbsp;<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt1039097ff817657d/67dc7dae037e2bbf2122d11f/CSforDev_L25-img-1.jpg" alt="CSforDev_L25-img-1.jpg" height="auto"/>Contentstack Marketplace is Contentstack’s very own app distribution platform similar to the App Store in Apple, or the Play Store in Android. You can use and install apps from our Marketplace to extend the existing capabilities of your Contentstack web application.Marketplace Apps allow you to extend the capability of our core CMS and customize its functionalities. With these ready-to-use apps, you can integrate your favorite third-party platforms easily and with minimal effort. These pre-built apps are intended to be quickly and easily installed. Apps like this are built to solve a particular problem, help integrate with a specific software, or provide functionality for a user of Contentstack.

What is Contentstack Marketplace?

Contentstack’s App Marketplace for Extensions is a platform where users can find and install pre-built extensions that can enhance the functionality of their Contentstack projects. These extensions are developed by Contentstack partners or third-party developers and are designed to simplify and streamline common development tasks, such as integrating with external systems, automating workflows, and adding new features to the CMS.Here are the key features of Contentstack’s App Marketplace for Extensions:1. Extension Types: The App Marketplace offers a variety of extensions types, including field types, custom widgets, and integrations. Each extension type has a specific purpose and can be used to enhance the functionality of the CMS in different ways. &nbsp;This includes Dashboard widgets, full-page apps, custom fields, sidebar widgets, rich-text field extensions and a new field modifier.2. Categories: The App Marketplace offers extensions across multiple categories, including SEO, localization, analytics, integrations, and more. These categories make it easy for users to find extensions that fit their specific needs.3. <a href="https://www.contentstack.com/docs/developers/developer-hub/get-started-with-building-apps-using-contentstack-app-sdk/">Developer Documentation</a>: Each extension in the App Marketplace comes with detailed documentation, which provides instructions on how to install, configure, and use the extension.4. &nbsp;The Developer Hub allows developers to upload their extensions to Contentstack and test them out. Additionally, developers can create private extensions for their customers and leverage the Developer Hub to make them accessible.5. Submit Your Own Extension: Developers can submit their own extensions to the App Marketplace. Contentstack reviews each extension to ensure that it meets quality standards before making it available in the marketplace. &nbsp;Using the Developer Hub you can createOverall, Contentstack’s App Marketplace for Extensions provides a centralized location for users to find and install extensions that can enhance the functionality of their Contentstack projects. With a wide range of extensions available across multiple categories, users can customize their CMS to fit their specific needs and streamline their workflows.<h2>Exercise:&nbsp;Installing and Using Apps from the Marketplace</h2>In this module we are going to install two apps from the Marketplace that support developers using Contentstack.1.&nbsp; Developer Tools2.&nbsp; Content Type Visualizer<h2>Installing Developer Tools</h2>Developer tools allow the developer to view the Entry JSON before it is published.&nbsp; This is very helpful when building apps and looking for the structure and properties of the content type.1.&nbsp; Go to the <a href="https://app.contentstack.com/#!/marketplace/apps">Marketplace dashboard</a>&nbsp; (<a href="https://eu-app.contentstack.com/#!/marketplace/apps">EU Marketplace Dashboard</a>)2.&nbsp; Select&nbsp;Developer Tools, Install App, and choose the Stack of where to install it <img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt9215ef5ffe1e57fd/67dc7e04c9b8d437d5d138c1/CSforDev_L26-img-1.png" alt="CSforDev_L26-img-1.png" height="auto"/> <h2>Installing the Content Type Visualizer</h2>The Content Type Visualizer is another developer-friendly extension that shows the relationships between Content Types.&nbsp; It is installed on the Dashboard using the Marketplace.1.&nbsp; Go to the <a href="https://app.contentstack.com/#!/marketplace/apps">Marketplace dashboard</a>&nbsp; (<a href="https://eu-app.contentstack.com/#!/marketplace/apps">EU Marketplace Dashboard</a>)2.&nbsp; Select&nbsp;Content Type Visualizer, Install App, and choose the Stack of where to install it <img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blta4bd50450165e8bd/67dc7e22f7eccc435b90cf28/CSforDev_L26-img-2.png" alt="CSforDev_L26-img-2.png" height="auto"/><div style="position: relative;overflow: hidden;padding-bottom: 56.25%;"><iframe src="https://cdn.jwplayer.com/players/TZemBvJ6-b769H14u.html" width="100%" height="100%" frameborder="0" scrolling="auto" title="Dev-marketplace App Install Dev Tools And Content Type Visualizer" style="position: absolute;" allowfullscreen=""></iframe></div>

Using Marketplace Apps

Installing and Configuring the NextJS Starter App&nbsp;About Starter Apps In Contentstack, starter apps are pre-built applications that demonstrate the capabilities of Contentstack&nbsp;and provide a starting point for developers learning about and building web applications.Starter apps are designed to be fully functional, customizable, and extensible, providing developers with a set of best practices and common patterns for building web applications that consume content from Contentstack.Starter apps in Contentstack are available for a variety of programming languages and frameworks, including NextJS, React, Angular, and Vue.js. Each starter app includes a set of pre-built content types, entries, assets, and environments.Using starter apps in Contentstack provides several benefits, including:<ul><li>Rapid prototyping: Starter apps provide a quick way to prototype and test new ideas, allowing developers to create a fully functional application in a fraction of the time it would take to build from scratch. &nbsp;</li><li>Best practices: Starter apps are built using best practices and industry-standard patterns, providing developers with a solid foundation for building scalable, maintainable, and high-performing applications.</li><li>Customization: Starter apps can be fully customized to meet the specific needs of the application being developed, including branding, layout, functionality, and integrations with other systems.</li><li>Extensibility: Starter apps can be extended and allowing developers to add new features and functionality as needed.</li></ul>Overall, starter apps in Contentstack provide a powerful and flexible way for developers to jumpstart their projects, reduce development time and costs, and ensure high-quality, scalable, and maintainable applications.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt3b91aaf33b63ed1a/67dc7e92c9b8d475c0d138e0/CSforDev_L27-img-1.png" alt="CSforDev_L27-img-1.png" height="auto"/><h2>Three ways to get started with the StarterApps</h2>When starting to develop with Contentstack, we can install and use an existing NextJS Starter App called Logoipsum and this can be set up in several ways: &nbsp;1.&nbsp; The first approach involves using an <a href="https://www.contentstack.com/docs/developers/cli/bootstrap-starter-apps/">automated bootstrap CLI script</a> to generate a new Stack or load content into an existing Stack. This method includes all the default content and downloads the NextJS app. We will be using this option for the course.2.&nbsp; The second approach involves installing a Starter App via the Marketplace. This method is useful when you want to try using Contentstack as an Author or Editor and publish content without accessing the frontend code. However, we will not be using this approach in the course.3.&nbsp; <a href="https://www.contentstack.com/docs/developers/sample-apps/build-a-starter-website-using-next-js-and-contentstack/#import-content">Manually import the content with the CLI</a> and download the <a href="https://github.com/contentstack/contentstack-nextjs-starter-app">StarterApp from the Github repo</a> and manually configure the application.&nbsp; This does the same thing as step 1, but requires more time.<h2>Install the Starter App</h2><h3>Create the Stack</h3>To get started we will need to create a new Stack in Contentstack for our NextJS Starter app. &nbsp;To create our Starter App using the Contentstack CMS, we need to follow a few steps. Firstly, we need to create a new Stack and then use a CLI command to import the Starter app content and code. It is crucial to ensure that you have an Empty Stack ready for the StarterApp before proceeding. If you have the role of Organization Owner in Contentstack, then the CLI can create the Stack for you automatically using your login credentials.Watch the following video to explain how to install the StarterApp with the CLI<div style="position: relative;overflow: hidden;padding-bottom: 56.25%;"><iframe src="https://cdn.jwplayer.com/players/IbfbzKwm-b769H14u.html" width="100%" height="100%" frameborder="0" scrolling="auto" title="Dev-create A New Nextjs Starter App Via Cli" style="position: absolute;" allowfullscreen=""></iframe></div><h2>What’s inside the Starter App</h2> The Starter app Stack contains all the Content Types, Entries, Assets, Environments, Tokens, and Roles for a full website. &nbsp;The following video will explain the Starter app and where everything is located:<div style="position: relative;overflow: hidden;padding-bottom: 56.25%;"><iframe src="https://cdn.jwplayer.com/players/ZZQuG80V-b769H14u.html" width="100%" height="100%" frameborder="0" scrolling="auto" title="Dev-starter App Content Types Walkthrough & Token Explanation Ui Code Nextjs App" style="position: absolute;" allowfullscreen=""></iframe></div><h1>Architecture</h1><h2>Big Picture Architecture Diagram</h2><h3>Backend</h3>The Backend of Contentstack is the CMS with the ability to create and publish content.&nbsp; The focus here is on editor ease-of-use by providing a simple, powerful and flexible UI for content creation and management.&nbsp; In addition to the out of the box functionality, we also provide an ability to extend the interface by creating UI Extensions using our App SDK and connect to 3rd-party applications such as DAM providers, Analytics, E-Commerce platforms and more.<h3> </h3><h3>Frontend</h3>The focus on the frontend is high-performance for your website and web application. APIs and SDKs are provided to the developer for using in their applications to perform read-only queries to the content.&nbsp; The Content Delivery APIs use an internal CDN to cache all queries to the platform which results in higher performance for all your web applications.&nbsp; This is also where we find the Images API for delivering image assets.Watch this video that explains the big picture architecture:<div style="position: relative;overflow: hidden;padding-bottom: 56.25%;"><iframe src="https://cdn.jwplayer.com/players/gu1hi4sL-b769H14u.html" width="100%" height="100%" frameborder="0" scrolling="auto" title="Dev-big Picture Architecture" style="position: absolute;" allowfullscreen=""></iframe></div><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt362bd848bfb23a87/67dc7ec73a0f389c0000e144/CSforDev_L27-img-2.png" alt="CSforDev_L27-img-2.png" height="auto"/><h2> </h2><h2>Environments</h2><ul><li>One Stack can publish to multiple Environments. &nbsp;Think of Environments as “publish destinations”.</li><li>Each Environment has one Delivery Token, otherwise known as an Access Token. &nbsp;That token is unique per Environment.</li><li>Each Stack has an API key. &nbsp;There is only 1 API key per Stack and it is unique.</li><li>Most API calls will require both an API token and a Delivery / Access Token. </li></ul>Watch this video to understand how we use Environments in Contentstack:<div style="position: relative;overflow: hidden;padding-bottom: 56.25%;"><iframe src="https://cdn.jwplayer.com/players/xDslMX1l-b769H14u.html" width="100%" height="100%" frameborder="0" scrolling="auto" title="Dev-environments" style="position: absolute;" allowfullscreen=""></iframe></div>The following diagram for Environments illustrates these concepts:<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltbae3b547ac725da5/67dc7ef1986725d043888129/CSforDev_L27-img-3.png" alt="CSforDev_L27-img-3.png" height="auto"/> <h2></h2><h3>Multi-Stack Architecture Diagram </h3><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltf4b85119eb371741/67dc7f1cc5de53bfe2d2d9c0/CSforDev_L27-img-4.png" alt="CSforDev_L27-img-4.png" height="auto"/>

Installing the NextJS Starter App with the CLI

<h1></h1>
<ul>
 <li>
 <a href="https://community.contentstack.com">Contentstack Community</a>
 </li>
 <li>
 <a href="https://www.contentstack.com/docs/developers/">Developer Documentation Portal</a>
 </li>
</ul>
<h2>Helpful Documentation Links</h2>
<h3>APIs</h3>
<ul>
 <li>
 <a href="https://www.contentstack.com/docs/developers/apis/">APIs Homepage</a>
 </li>
 <li>
 <a href="https://www.contentstack.com/docs/developers/apis/postman-collections/">Postman Collections for APIs</a>
 </li>
 <li>
 <a href="https://www.contentstack.com/docs/developers/cli/">CLI</a>
 </li>
 <li>
 <a href="https://www.contentstack.com/docs/developers/sdks/utils-sdk/javascript/get-started-with-javascript-utils-library/">JavaScript RTE&nbsp;Parsing Utils</a>
 </li>
 <li>
 <a href="https://github.com/contentstack/json-rte-serializer/">JSON RTE Serializer - Github</a>
 </li>
</ul>
<h3>Sample Apps / Examples</h3>
<ul>
 <li>
 <a href="https://www.contentstack.com/docs/developers/sample-apps/">Sample Apps</a>
 </li>
 <li>
 <a href="https://github.com/Contentstack-Solutions/contentstack-nextjs-typescript-base/blob/main/lib/services/contentstack-service.ts">Contentstack Typescript Query / API Service</a>
 </li>
 <li>
 
 <a href="https://github.com/Contentstack-Solutions/contentstack-nextjs-typescript-base/blob/main/lib/services/contentstack-service.ts">https://github.com/Contentstack-Solutions/contentstack-nextjs-typescript-base/blob/main/lib/services/contentstack-service.ts</a>
 
 </li>
 <li>
 <a href="https://github.com/Contentstack-Solutions">Contentstack Solutions Github Repo</a>
 </li>
</ul>
<h3>Live Preview</h3>
<ul>
 <li>
 <a href="https://www.contentstack.com/docs/content-managers/author-content/live-preview-real-world-scenarios/">Live Preview Real-world scenarios</a>
 </li>
 <li>
 <a href="https://www.contentstack.com/docs/developers/set-up-live-preview/how-live-preview-works-with-sdk/">How Live Preview Works with the SDK</a>
 </li>
 <li>
 <a href="https://www.contentstack.com/docs/developers/set-up-live-preview/">Set up Live Preview&nbsp;</a>
 </li>
</ul>
<ul></ul>

Helpful Resources

Contentstack for Developers Quiz

The Contentstack Developer Onboarding Course is designed to equip learners with comprehensive knowledge on various aspects of the platform, including its architecture, APIs, SDKs, and the process of creating a NextJS web application.&nbsp; <a href="https://github.com/contentstack/contentstack-academy-playground" target="_blank">Download Playground Here</a>
You can also install a training instance by visiting our Legacy Academy. Click the <a href="https://www.contentstack.com/academy/training-instance" target="_blank">Create Training Instance</a> button on the home page.
Throughout the course, learners will receive detailed instruction on how to utilize Contentstack's features to build robust and scalable web applications. They will gain a deep understanding of the platform's architecture, enabling them to develop applications that take full advantage of Contentstack's capabilities.&nbsp;
Additionally, the course will provide learners with hands-on experience using Contentstack's APIs and SDKs, enabling them to develop efficient and effective web applications. By the end of the course, learners will be equipped with the skills and knowledge necessary to create high-quality web applications using Contentstack.

The Contentstack Developer Onboarding Course is designed to equip learners with comprehensive knowledge on various aspects of the platform, including its architecture, APIs, SDKs, and the process of creating a NextJS web application. 

Opengraph_A.png

Contentstack for Developers

Contentstack For Developers Course Thumbnail

<h2>A Foundation for Organized and Efficient Content Management</h2>In this module, we begin by defining&nbsp;<a href="https://www.contentstack.com/docs/developers/content-modeling">content modeling</a>&nbsp;and its&nbsp;significant benefits. Next, we will address the pitfalls of improper modeling and guide you through the necessary steps to ensure a sound content model to&nbsp;avoid&nbsp;common mistakes. Additionally, we will provide an overview of the core components involved in content creation;&nbsp;content types, assets, and entries.&nbsp; We close with a brief example of how to analyze your site or&nbsp;wireframe for effective modeling. By understanding the key concepts, following best practices, and implementing a well-structured content model, you can optimize your content management process and deliver a seamless user experience.<h2>What Is Content Modeling?</h2>Content modeling means defining the structure and organization of your content at&nbsp;a granular level.&nbsp;It involves identifying content types, their fields, and their relationships to create an optimized and reusable framework for managing and presenting content.&nbsp;If you have experience in database design, content modeling bears similarities. The goal of content modeling is to construct content types and structures that facilitate reuse, accommodate multiple channels, and are user-friendly for content contributors/editors. In <a href="https://www.contentstack.com/docs">Contentstack</a>, content modeling begins during the design stage and should be the first step in a successful project. Errors in content modeling can impact the structure of your web/app page. It is important to consult with your content team to validate the content model, review fields, and create entries using established content types. Some metadata fields may not be visible on a page, so the content team should help define them. Each section/component of your website or app should have a suitable content model that aligns with its actual content. <h2>Unlocking Success: The Vital Importance of Content Modeling for Structured, Reusable, and Efficient Content Management</h2> Content modeling is a vital aspect of successful content management. By structuring content, enabling reusability, and fostering efficient creation, it empowers content creators while enhancing user experiences. Its benefits include organized content, consistent presentation, streamlined workflows, and adaptability to future changes. Additionally, content modeling ensures seamless multichannel delivery, collaborative management, and effective SEO practices. Embracing content modeling sets a strong foundation for content governance and control, ensuring data integrity. Ultimately, content modeling is a strategic investment that propels digital content delivery to greater heights. Some of the key benefits include: <ul><li>Structured Content Organization:&nbsp;Content modeling helps organize content into structured and well-defined content types. Each content type represents a specific type of content with its own set of fields, ensuring consistency and easy categorization of content.</li><li>Reusability and Consistency:&nbsp;By defining content types and fields, content can be reused across multiple entries and pages. This reusability ensures consistent presentation and branding throughout the website or application.</li><li>Efficient Content Creation:&nbsp;Content modeling allows content editors to create content using predefined templates or blueprints. This speeds up content creation by providing a clear framework for entering content without the need to design the layout from scratch each time.</li><li>Flexibility and Scalability:&nbsp;Content modeling enables flexibility in managing different types of content, including text, images, videos, and other media. As the website or application grows, content modeling provides scalability to adapt and expand content types to meet changing needs.</li><li>Multichannel Content Delivery:&nbsp;With well-structured content, it becomes easier to deliver content to various channels and platforms, such as websites, mobile apps, voice assistants, or IoT devices. Content modeling helps separate content from presentation, making it adaptable to different channels.</li><li>Collaborative Content Management:&nbsp;Content modeling allows different teams or content contributors to work independently on their assigned content types. This division of content responsibilities facilitates collaborative content management and improves overall efficiency.</li><li>Easy Updates and Maintenance:&nbsp;When changes need to be made to the content, content modeling enables updates to be applied systematically across all relevant entries, reducing the chances of inconsistencies and errors.</li><li>SEO and Searchability:&nbsp;Well-structured content is more search engine-friendly, leading to improved SEO performance and better discoverability of content on the web.</li><li>Content Governance and Control:&nbsp;Content modeling allows content administrators to define content structures, fields, and access controls. This ensures proper content governance and maintains data integrity.</li><li>Future-Proofing:&nbsp;By modeling content in a structured manner, content remains adaptable to future changes and advancements in technology without requiring significant overhauls to the content management system.</li></ul><h2>The Perils of Improper Content Modeling: Avoiding Inconsistencies and Maximizing Efficiency</h2> Conversely, not modeling content properly can lead to several pitfalls and challenges in content management. Some of the key pitfalls include: <ul><li>Inconsistent Content:&nbsp;Without proper content modeling, there is a higher risk of inconsistent content presentation across the website or application. Inconsistent formatting, layout, and styling can create a disjointed user experience and negatively impact the brand's image.</li><li>Content Duplication:&nbsp;In the absence of structured content types, content creators may duplicate content manually across various pages or sections. This redundancy can lead to difficulties in managing updates, as changes need to be applied separately to each duplicated instance.</li><li>Data Integrity Issues:&nbsp;Improper content modeling may result in missing or incomplete data, leading to data integrity issues. This can adversely affect the accuracy and reliability of the information presented to users.</li><li>Difficult Content Updates:&nbsp;Without a well-defined content model, updating content becomes challenging. Content editors may struggle to find the right fields and sections to modify, leading to errors and inconsistencies in content updates.</li><li>Inefficient Workflow:&nbsp;Lack of content modeling can lead to inefficient content creation and approval workflows. Content contributors may face difficulties in understanding the content structure, resulting in delays and miscommunications.</li><li>Limited Reusability:&nbsp;Without structured content types, content reuse becomes limited. This means content creators may need to recreate similar content from scratch, wasting valuable time and effort.</li><li>Poor SEO Performance:&nbsp;Unstructured content can negatively impact search engine optimization (SEO) efforts. Search engines prefer well-organized content, and without proper modeling, search engines may struggle to interpret and rank the content correctly.</li><li>Scaling Challenges:&nbsp;As the website or application grows, managing unstructured content becomes more complex and difficult to scale. Scaling without proper content modeling can lead to an inconsistent user experience and management challenges.</li><li>Difficulty in Multichannel Delivery:&nbsp;Unstructured content may not be easily adaptable to different platforms and channels. This can hamper multichannel content delivery and diminish the brand's ability to reach a broader audience.</li><li>Limited Content Insights:&nbsp;Properly modeled content allows for better content analytics and insights. Without a structured content model, tracking and analyzing content performance may become limited or challenging.</li></ul> In summary, not modeling content properly can result in a host of issues, including inconsistent content, data integrity problems, inefficiencies in content workflows, and difficulties in scaling and managing content. To avoid these pitfalls, investing in content modeling is essential for a seamless and effective content management process.<h2>Is Your Content Model Sound? Steps for Effective Content Management</h2> Ensuring a sound content model is crucial for effective content management. Keep in mind that there is no single right way to build a model, but there are general best practices you can follow. Here are some steps to ensure your content model is well-structured and meets your requirements: <ul><li>Define Content Objectives:&nbsp;Clearly define the objectives of your content and understand the types of content you want to create and manage. Consider the different elements, data types, and relationships that need to be represented in your content.</li><li>Analyze Content Types:&nbsp;Identify the various types of content you will be working with (e.g., articles, products, events) and break them down into individual content types. Determine the fields and data structures needed for each content type.</li><li>Organize Content Fields:&nbsp;Group related fields together within each content type to create a cohesive and organized content model. This helps content creators understand how different pieces of information relate to each other.</li><li>Consider Content Relationships:&nbsp;Determine the relationships between different content types. For example, a blog post may be associated with an author, category, and tags. Use reference fields or modular blocks to establish these relationships.</li><li>Anticipate Future Needs:&nbsp;Design your content model to be flexible and scalable, accommodating future changes and additions. Consider potential content types or fields that may be required as your website or application grows.</li><li>Seek Feedback and Input:&nbsp;Involve content creators, editors, and stakeholders in the content modeling process. Gather feedback and input from the team to ensure the content model aligns with their needs and workflow.</li><li>Evaluate Content Solutions:&nbsp;Deciding between building or integrating an application is crucial in content modeling. While common third-party solutions like DAM or e-commerce vendors offer standardized features, bespoke functionality ensures tailored efficiency and adaptability, impacting content management's future scalability.</li><li>Test Content Creation and Management:&nbsp;Create test entries and content to ensure that the content model functions as expected. Validate that the content can be easily created, edited, and managed within the defined content types.</li><li>Address Performance and SEO:&nbsp;Consider how your content model may impact website performance and search engine optimization. Optimize your content model to ensure fast loading times and SEO-friendly content structure.</li><li>Document Your Content Model:&nbsp;Create comprehensive documentation for your content model, including content type definitions, field descriptions, and content relationships. This documentation will serve as a reference for content creators and developers.</li><li>Iterate and Refine:&nbsp;Content modeling is an iterative process. Continuously gather feedback, monitor content performance, and make adjustments to your content model as needed to improve its effectiveness.</li></ul> By following these steps and regularly reviewing your content model, you can ensure that your content is well-structured, easily manageable, and aligned with your content objectives and business goals. A sound content model sets the foundation for successful content management and helps deliver a seamless and consistent user experience.<h2>Module Summary:&nbsp;&nbsp;The Essential Importance of Content Modeling</h2> Content modeling involves defining the structure and organization of content, facilitating efficient content management and presentation. It empowers content creators, enhances user experiences, and enables multichannel delivery. Proper content modeling offers benefits such as organized content, consistent presentation, streamlined workflows, and adaptability to future changes.Improper content modeling can lead to pitfalls like inconsistent content, duplication, data integrity issues, and scalability challenges. Effective content management requires defining objectives, analyzing content types, organizing fields, considering relationships, anticipating needs, seeking feedback, testing, addressing performance and SEO, and documenting the model.Contentstack's foundational components are Content Types, Entries, and Assets, which structure content and facilitate its management and delivery. Content modeling is a strategic investment that ensures successful content governance and propels digital content delivery across platforms. Learn more:<ul><li><a href="https://www.contentstack.com/docs/developers/content-modeling/about-content-modeling">Content Modeling</a></li><li><a href="https://www.contentstack.com/docs/developers/content-modeling/content-modeling-best-practices">Content Modeling Best Practices</a></li></ul>

Understanding Content Modeling

Core Content Structures

Publishing Environments

Boolean, Date, File, and Number Fields

Reference Fields

Select Fields

HTML RTE Field

Group Fields

Global Fields

Custom Fields

Modular Blocks

Languages & Localization

Content Modelling with Contentstack Quiz

The Contentstack Content Models are a blueprint or schema of a content type that defines the structure, fields, and relationships of the content. It is a visual representation of the content type and helps content editors and developers to create and manage content in a structured and organized manner. If you haven't already installed a training instance, you can do so by visiting our Legacy Academy. Click the <a href="https://www.contentstack.com/academy/training-instance" target="_self">Create Training Instance</a> button on the home page.

This course provides you the necessary information to effectively content model within the Contentstack CMS.

Content Modeling with Contentstack

Content Modeling with Contentstack Course Thumbnail.jpg

What is a profile?

What is a common schema?

How does scoring work?

What are behavioral scores?

What are interest scores?

How do audiences work?

Can I create custom models?

Data Insights: Core Quiz

This course is a high-level introduction to the Data &amp; Insights platform (Lytics), designed to give you a foundational understanding of how the product works. We'll cover the key concepts and capabilities you'll explore in more depth throughout the certification program.

DataInsightsCoreConceptsCapabilities_Thumb.jpg

Core Concepts & Capabilities

What is a "data & insights" platform?

The importance of use cases

Demonstration: Real-time Profiles

Demonstration: Identity Resolution

Demonstration: Connecting Data Sources

Demonstration: Building Profiles (Schema Management)

Demonstration: Enriching Profiles w/ Audiences & Scores

Demonstration: Building Audiences

Data Insights: Getting Started Quiz

Overview

<h3>What You'll Learn</h3>This introductory session provides essential background on customer data platforms and hands-on experience with basic functionality. You'll understand the strategic importance of data &amp; insights platforms (CDPs) and see real-time profile building in action before we dig into the details of how it all comes together.<h3>What We'll Cover</h3>We’ll start with the fundamentals—what a Data &amp; Insights platform is, the role it plays in personalization and marketing, and why clearly defined use cases are essential before implementation. You’ll see real-time customer profiles come to life, learn the basics of identity resolution, and get introduced to our streamlined approach to data collection, schema management, and audience building. Let’s dive in!

GettingStartedDataInsights_Thumb.jpg

Getting Started with Data & Insights

Building an Audience

Audience Mechanics

Leverage Warehouse Data in Audiences

Activating Audiences

Save Time w/ Actions

Unlock Insights w/ Reports

Web Campaign Personalization SDK

Streamline Campaigns w/ Experiences

Data Insights: Using Profiles Quiz

This course focuses on putting your unified customer profiles to work through sophisticated audience building and personalization capabilities. You'll learn to create dynamic, real-time udiences and deploy personalized experiences across multiple channels.

DataInsightsUsingProfilesPowerPersonalization_Thumb.jpg

Using Profiles to Power Personalization

Identity Resolution (recap)

The Data Pipeline

Leveraging Common Schema

Customizing Schema (fields & mappings)

The Importance of "Identity" Fields

Publishing Schema & Version Control

Working with APIs & CSVs

Working with Integrations

Identifier Ranks

Working w/ Warehouse Data

Building Lookalike Models

Interest Scores & Classification

Example: Exploring Classified Content

Content Recommendations

What are "triggers"?

Data Insights: Building Profiles Quiz

This course dives deep into the technical architecture of customer profile creation and data unification. You'll master the data processing pipeline and learn advanced techniques for enriching customer understanding through multiple data sources and intelligent modeling.

DataInsightsDataIngestionProfile_Thumb.jpg

Data Ingestion & Profile Construction

What is a Flow?

Flows Course Overview

Example: End-to-end w/ Flows

Creating a Flow

Flow Anatomy - Trigger Step

Flow Anatomy - Wait & Personalize Step

Flow Anatomy - Conditional Split Step

Flow Anatomy - Export Step

Publishing a Flow

Flow Versions & State Management

Creating Custom Templates

Data Insights: Flows Quiz

This course provides comprehensive training on Lytics' visual workflow system for managing complex customer journeys. You'll learn to orchestrate multi-step marketing processes with conditional logic, timing controls, and cross-channel activation.

DataInsightsAutomatingJourneysFlows_Thumb.jpg

Automating Journeys with Flows

This course will help customers, partners and developers create a marketplace application from scratch.This course covers the different areas of integration in Contenstack’s UI. By integrating your own functionality in these areas or “locations”, you can address different use cases and add functionality in the platform, according to your business needs. The Marketplace App framework provides a seamless way to directly integrate with Contentstack’s UI.Additionally, Marketplace applications provide one-click install, simplifying the setup and distribution of your application across different stacks.Marketplace Applications leverage the App Framework, a module which can be used to develop a new marketplace app. The framework is available as a npm package under @contentstack/app-sdk. The package can be installed by developers using npm or yarn (or any other package manager of their choosing that supports node packages) as they would normally do when building other react or node apps. This framework provides access to various data points when loaded in specific locations as mentioned in the previous section. The [Contentstack App SDK](<a href="https://github.com/contentstack/app-sdk-docs" target="_self">https://github.com/contentstack/app-sdk-docs</a>) also provides necessary methods to interact with the Contentstack application.By the end of this course. participants will be able to develop and deploy an example marketplace application that illustrates how you can extend those UI areas.

Introduction to Marketplace Apps and App Framework

In computer programming, boilerplate code, or simply boilerplate, are sections of code that are repeated in multiple places with little to no variation. Boilerplate templates or frameworks provide a starting point for building new solutions that follow a given pattern, require repetitive tasks, access to certain SDKs, and that reuse certain pieces of code. Boilerplate code or applications can define project-level elements or standard methods for one or more projects.Contentstack provides a boilerplate that incorporates reference examples developers can use when building UI integrations in Contentstack.This boilerplate reduces the effort of developers when building their integrations. It also provides more visibility on the structure of the marketplace applications.The boilerplate code includes all the locations where your integrations can be placed inside Contentstack’s UI. Those locations are:<ul><li>Custom Field</li><li>Entry Sidebar Widget</li><li>Asset Sidebar Widget</li><li>Dashboard Widget</li><li>Field Modifier</li><li>Full Page</li><li>JSON RTE plugin&nbsp;</li></ul>The following modules in this course describe how to build an app using our Marketplace App boilerplate (which uses app sdk for interaction with Contentstack). For more information about the Marketplace App boilerplate, you can check the <a href="https://github.com/contentstack/marketplace-academycourse-app">Marketplace App Boilerplate GitHub repository</a>.

Marketplace Boilerplate

In this module we will describe how to set up your development environment, that is, clone our boilerplate application and get you ready to start developing your first marketplace application.<h2>Pre-requisites</h2>Before setting up the development environment in your local machine, you must make sure the below software is installed:1. <a href="https://docs.npmjs.com/downloading-and-installing-node-js-and-npm">NPM</a> - v8.1.4 or greater2. <a href="https://nodejs.org/en/download">NodeJS</a> - v14.18.2 or greater Then, <a href="https://github.com/contentstack/marketplace-academycourse-app" target="_blank">Download or clone the Marketplace app boilerplate repo from our GitHub repo.</a>The boilerplate application consists of the following file structure:<h2>Project Folder Structure</h2>There are two main working directories. The project root, which is used for all Locations except for JSON RTE. The JSON RTE plugin logic is managed and developed within [root]/rte.└── marketplace-academycourse-app //Main Project Directory ├── CODEOWNERS ├── LICENSE ├── README.md ├── SECURITY.md ├── manifest.json ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── rte //Main RTE Plugin directory │ ├── CODEOWNERS │ ├── LICENSE │ ├── README.md │ ├── SECURITY.md │ ├── docs │ │ ├── api-reference.md │ │ └── images │ │ ├── BlockLeaf.png │ │ ├── BlockTypes.png │ │ ├── Dropdown.jpg │ │ ├── Path.png │ │ ├── Point.png │ │ └── Range.png │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── plugin.tsx │ │ ├── solution-1.txt │ │ └── solution-2.txt │ ├── tsconfig.json │ ├── webpack.academy.js │ ├── webpack.common.js │ ├── webpack.dev.js │ ├── webpack.prod.js │ └── yarn.lock ├── src │ ├── assets │ │ ├── Field_Modifier.svg │ │ ├── Icon.svg │ │ ├── appconfig.svg │ │ ├── assetsidebar.svg │ │ ├── customfield.svg │ │ ├── fullScreenGraphics.svg │ │ ├── fullscreen.svg │ │ └── sidebarwidget.svg │ ├── common │ │ ├── contexts │ │ │ ├── appConfigurationExtensionContext.ts │ │ │ ├── customFieldExtensionContext.ts │ │ │ ├── entrySidebarExtensionContext.ts │ │ │ └── marketplaceContext.ts │ │ ├── hooks │ │ │ ├── useAppConfig.ts │ │ │ ├── useAppLocation.ts │ │ │ ├── useAppSdk.tsx │ │ │ ├── useCustomField.tsx │ │ │ ├── useEntry.tsx │ │ │ ├── useFrame.ts │ │ │ ├── useHostUrl.ts │ │ │ ├── useInstallationData.tsx │ │ │ └── useSdkDataByPath.ts │ │ ├── locales │ │ │ └── en-us │ │ │ └── index.ts │ │ ├── providers │ │ │ ├── AppConfigurationExtensionProvider.tsx │ │ │ ├── CustomFieldExtensionProvider.tsx │ │ │ ├── EntrySidebarExtensionProvider.tsx │ │ │ └── MarketplaceAppProvider.tsx │ │ ├── types │ │ │ └── types.ts │ │ └── utils │ │ └── functions.ts │ ├── components │ │ ├── AppFailed.tsx │ │ └── ErrorBoundary.tsx │ ├── containers │ │ ├── 404 │ │ │ └── 404.tsx │ │ ├── App │ │ │ └── App.tsx │ │ ├── AssetSidebarWidget │ │ │ ├── AssetSidebar.tsx │ │ │ ├── solution.txt │ │ │ └── styles.scss │ │ ├── ConfigScreen │ │ │ ├── AppConfiguration.tsx │ │ │ └── solution.txt │ │ ├── CustomField │ │ │ ├── CustomField.tsx │ │ │ ├── solution-1.txt │ │ │ ├── solution-2.txt │ │ │ └── styles.scss │ │ ├── DashboardWidget │ │ │ ├── StackDashboard.tsx │ │ │ ├── solution.txt │ │ │ └── styles.scss │ │ ├── FieldModifier │ │ │ ├── FieldModifier.tsx │ │ │ ├── solution.txt │ │ │ └── styles.scss │ │ ├── FullPage │ │ │ ├── FullPage.tsx │ │ │ ├── solution.txt │ │ │ └── styles.scss │ │ ├── SidebarWidget │ │ │ ├── EntrySidebar.tsx │ │ │ ├── solution.txt │ │ │ └── styles.scss │ │ └── index.tsx │ ├── index.css │ ├── index.tsx │ ├── react-app-env.d.ts │ └── reportWebVitals.ts └── tsconfig.json &nbsp; Tip: For each exercise in this course, you can access the "solution" code for each modified file in their respective folders within the files named as solution.txt or solution-X.txt.&nbsp;Those files can be used to fix any issues or missed steps while performing the exercises.<h2>Dependency Installation and Application Run</h2>Using your terminal or command prompt, navigate to the root directory of the downloaded repo and execute the following commands:npm install npm startThe first command will install all the npm dependencies. Once dependencies are installed, execute the second command to start the development server. The server will start in the port 3000, <a href="http://localhost:3000">http://localhost:3000</a>In this boilerplate the JSON RTE plugin can be started and tested as a separate service. It can not be started along with the react app that we use for other UI locations. To start the JSON RTE plugin service, follow below steps.To setup and run the JSON RTE plugin example, using your terminal, navigate to the /rte directory of the downloaded repository and execute the following commands:npm install npm startLike before, the first command will install the npm dependencies and the second command will start the development server. The server will start in the port 3000 <a href="http://localhost:3000">http://localhost:3000</a>Most of the development in this course will take place within the container folder located at: src/containers.Below are the containers that are available in the boilerplate:<ul><li>404 - This is just an example react component that can be used to render in the UI during 404 errors.</li><li>App - This is the top level container for the react app that is getting rendered in the index.tsx of react app. This contains definitions of all the routes that are available in our app.</li><li>AssetSidebarWidget - This container has the component that gets rendered in the asset sidebar UI location of our app. This can be used for reading asset data and updating its properties</li><li>ConfigScreen - This container has the component that gets rendered in the configuration UI location of our app. All the credentials needed to integrate the 3rd party system should be updated here.</li><li>CustomField - This container has the component that gets rendered in the custom field UI location. This is the major location where the data from 3rd party systems gets added into the entry of Contentstack.</li><li>DashboardWidget - This container has the component that gets rendered in the Dashboard UI location of the stack. This location can be used to display analytics data of the stack.</li><li>FieldModifier - This container has the component that gets rendered in the Field Modifier UI location. This location is available at each field level in the entry page. This can be used to extend capabilities of entry fields , so that apps can appear only on defined data types.</li><li>FullPage - This container has the component that gets rendered in the Full Page UI location. This location can be used for doing bulk activities on entries.</li><li>SidebarWidget - This container has the component that gets rendered in the SidebarWidget UI location. This can be used to display more detailed information of the data of a 3rd party system or can even be used to update workflow or actual data of entries.</li></ul><h2>JSON RTE PLUGINS</h2>The JSON RTE Plugin will be implemented in the rte/src.&nbsp;A couple scripts are provided to build and deploy the compiled plugin code into the create-react-app&nbsp;public folder so it can be served from there.<h2>Video: Development Environment Setup</h2>The following video walks you through the process of downloading the boilerplate app, and preparing your code editor, so you can perform the exercises in the following modules.<div style="position: relative;overflow: hidden;padding-bottom: 56.25%;"><iframe src="https://cdn.jwplayer.com/players/FPrCCQqd-b769H14u.html" width="100%" height="100%" frameborder="0" scrolling="auto" title="01 - Development Environment Setup" style="position: absolute;" allowfullscreen=""></iframe></div>

Development Environment Setup for Marketplace

In this section you will register your app in Developer Hub.The Contentstack Developer Hub is an app development framework/portal that developers can leverage to rapidly build, host, and publish ready-to-use private or public apps. For more information about Developer Hub, please refer to the <a href="https://www.contentstack.com/docs/developers/developer-hub">Developer Hub documentation</a>.Note: To complete this module is mandatory that you have your application running locally in Visual Studio Code, so make sure that you run the npm start command and that your application is running and browsable in port 3000, To confirm your application is running, go to&nbsp;<a href="http://localhost:3000">http://localhost:3000</a>. you should see the following screen: <img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt9baf8e24ad9fac41/67ddd1beefd8a977054c06d5/BuildingMarketplaceApps_L1_img-1.png" alt="BuildingMarketplaceApps_L1_img-1.png" height="auto"/> Next, you will access the Developer Hub and register your application. To do so, follow these steps:1. <a href="https://www.contentstack.com/login/">Log in to your Contentstack account</a>.2. In the left-hand-side primary navigation, you will find the Developer Hub section (as shown below). Click the icon to go to the Developer Hub.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt80ff7d7c1ff2bc95/67ddd1da782bfb1d246f5b22/BuildingMarketplaceApps_L4_img-2.png" alt="BuildingMarketplaceApps_L4_img-2.png" height="auto"/>3. Click the +New App button at the top right corner of the page.4. In the New App modal, provide a name and a description for your application. E.g. Sample App.Notice this type of applications are considered private as they will not be publicly available in Contentstack’s marketplace.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt584d5bc4b9b2c57c/67ddd1f3983a65221b3b8134/BuildingMarketplaceApps_L4_img-3.png" alt="BuildingMarketplaceApps_L4_img-3.png" height="auto"/>5. Next, click Create.6. Next you will be presented with your application’s Information Page. Here you get access to your application’s basic information, and optionally you can upload an icon for your application. Once you are satisfied with the application’s name, description and icon, click Save to save your application’s data.&nbsp;<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltb20872c72a9d764f/67ddd211c566eea1c65e05ac/BuildingMarketplaceApps_L4_img-4.png" alt="BuildingMarketplaceApps_L4_img-4.png" height="auto"/>7. Next you will register all the UI locations this boilerplate application implements. To do so, you will click the UI Locations section on the left navigation bar. This will take you to the UI Locations Page.8. In the UI Locations Page, enter the App URL in the input field. The App URL is the url where your application is hosted. Since we are running the boilerplate locally on port 3000, you will enter the following value in the App URL field: http://localhost:3000<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltca8399c374d7fda5/67ddd229c566ee43de5e05b0/BuildingMarketplaceApps_L4_img-5.png" alt="BuildingMarketplaceApps_L4_img-5.png" height="auto"/> 9. Next we will register the different UI locations supported by the Boilerplate Application. In the following picture you can see a list of all the different supported extension locations.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blte073ab35b2984bbd/67ddd243443bd642a3f1d063/BuildingMarketplaceApps_L4_img-6.png" alt="BuildingMarketplaceApps_L4_img-6.png" height="auto"/>10. Add the following locations by clicking the +Add&nbsp;button that shows up when you mouse over the different Available Location(s), e.g:<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt54fc7725493b90a5/67ddd258632b9325acd4a744/BuildingMarketplaceApps_L4_img-7.png" alt="BuildingMarketplaceApps_L4_img-7.png" height="auto"/> &nbsp;Note: The name for each UI Location is optional, and can be used to override the default app name. Once you provide the necessary data as described below, click the&nbsp;Save&nbsp;button at the bottom right corner of the page.<h2>Custom Field</h2>Name:&nbsp;Sample App&nbsp; Path: /custom-field Data Type: JSON&nbsp;&nbsp; Multiple: checked Enabled: on<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt0660fcf65e5af419/67ddd27cf7eccc8cb390dd93/BuildingMarketApps_L4_img-8.png" alt="BuildingMarketApps_L4_img-8.png" height="auto"/><h3> Stack Dashboard &nbsp;</h3>Name: Sample App Path: /stack-dashboard Default Width: Full Width Enabled: on <img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt2801a882269d8baa/67ddd295cb02417c5f41baf5/BuildingMarketApps_L4_img-9.png" alt="BuildingMarketApps_L4_img-9.png" height="auto"/> <h2>Asset Sidebar</h2>Name:&nbsp;Sample App Path: /asset-sidebar Enabled: on Width: 500<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt465d51e71080deaf/67ddd2ae37e25a0c8b1e4be3/BuildingMarketApps_L4_img-10.png" alt="BuildingMarketApps_L4_img-10.png" height="auto"/> App ConfigurationPath: /app-configuration Enabled: on<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltf7a9e25a026d071e/67ddd2c145b2297837911ba8/BuildingMarketApps_L4_img-11.png" alt="BuildingMarketApps_L4_img-11.png" height="auto"/> <h2>JSON RTE</h2>Name: Sample App Path: /json-rte.js Enabled: on<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt998120cf9e693e24/67ddd3535e486df27471bb8b/BuildingMarketApps_L4_img-12.png" alt="BuildingMarketApps_L4_img-12.png" height="auto"/><h2>Entry Sidebar</h2>Name: Sample App Description: Example JSON RTE Path: /entry-sidebar Enabled: on<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt38f2afe06ed1a224/67ddd3683a0f383e7e00f05f/BuildingMarketApps_L4_img-13.png" alt="BuildingMarketApps_L4_img-13.png" height="auto"/><h2>Field&nbsp;Modifier</h2>Name: Sample App Path: /field-modifier Allowed Field Types: All Enabled: on<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt9c735c8481833e23/67ddd37ea6d88e2861053a14/BuildingMarketApps_L4_img-14.png" alt="BuildingMarketApps_L4_img-14.png" height="auto"/><h2>Full Page</h2>Name: Full Page Example Path: /full-page Enabled: onFor full page integrations, this location supports the ability to upload an icon. This icon is then displayed in the main left navigation icon list.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt8218c8dd05f02172/67ddd3930c6f554d721fd454/BuildingMarketApps_L4_img-15.png" alt="BuildingMarketApps_L4_img-15.png" height="auto"/>Make sure that all the locations have been added and that you clicked "Save" for each of them. You should see the following in your Enabled Location(s) list:<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltfec1818564c23a2e/67ddd3a845b229ab4b911bb0/BuildingMarketApps_L4_img-16.png" alt="BuildingMarketApps_L4_img-16.png" height="auto"/>11.&nbsp; Next you will install this application on a Stack. To do so, click the “Install” button on the top right corner of the screen.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt9463c65f9c2664d9/67ddd3c15e486d864171bb91/BuildingMarketApps_L4_img-17.png" alt="BuildingMarketApps_L4_img-17.png" height="auto"/> 12. Next, Select the stack where you want to install the app and click the Install button.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt7d2a83f254f6b4bf/67ddd3d7a6d88e5250053a1b/BuildingMarketApps_L4_img-18.png" alt="BuildingMarketApps_L4_img-18.png" height="auto"/>Note: make sue you accept the Terms of Service, and click&nbsp;Install.13. You will be redirected to the configuration page of the app. This is the App configuration location we registered earlier. At this time, no configuration needs to be provided here, but for a real world marketplace app, this is where developers would provide input fields and configure their application. For now you will see an empty configuration&nbsp;screen like this:<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blteedfa72cad67f1de/67ddd40cc9b8d450e7d14779/BuildingMarketApps_L4_img-19.png" alt="BuildingMarketApps_L4_img-19.png" height="auto"/>14. Click Save&nbsp;at the bottom right corner.15. Next, click the&nbsp;Open Stack&nbsp;button. Congratulations! You registered and installed your first Marketplace App using Automation Hub. In the following modules you will learn how to modify the logic inside the different locations and add your own ui elements and functionality.We will provide example code and will guide you step by step.Additionally, here are some screenshots of&nbsp;examples of configuration screens for different apps available in Contentstack’s marketplace:<div style="position: relative;overflow: hidden;padding-bottom: 56.25%;"><iframe src="https://cdn.jwplayer.com/players/TjUGn0H1-b769H14u.html" width="100%" height="100%" frameborder="0" scrolling="auto" title="02 - Registering The Boilerplate App" style="position: absolute;" allowfullscreen=""></iframe></div>

Creating App in Developer Hub and Installing the App

In this module you will take a look at the source code and do some modifications and you will see those changes taking effect in the UI as you make them.The marketplace boilerplate app is based on React, more specifically a Client-Side-Rendered app. You can learn more about React’s standard setup by looking at the create-react-app template in which this boilerplate is based.The React app rendering starts from the file “/src/index.tsx”. In that file, the App component is imported and wrapped with Browser Router which handles routing for the application, and allows you to navigate through the different locations registered before.Next, the App component is defined at “/src/containers/App/App.tsx”. Here all the registered routes that are needed for the app are defined. Notice how the urls here match the ones used while registering them in Developer Hub.Best Practice: Instead of directly importing the components of each route, you can import inside React.lazy() and wrap it inside the component of react for better performance of the app. This will improve the initial loading time of the application in the browser making the components load lazily for routes as needed and only when requested.The following code snippet illustrates this concept:<pre>const AppConfigurationExtension = React.lazy(() =&gt; import("../ConfigScreen/AppConfiguration"));&nbsp;...&nbsp;&lt;Routepath="/uri-endpoint-for-your-route"element={&lt;Suspense&gt;&lt;NewProviderOfTheRoute&gt;&lt;NewComponentOfTheRoute /&gt;&lt;/NewProviderOfTheRoute&gt;&lt;/Suspense&gt;}/&gt;;
 </pre>In the following modules, you will browse through the available UI locations along with their corresponding routes and code.

Implementing App Locations Introduction

The App Config UI Location allows you to manage all the settings for your app centrally. You need to configure it once and all the other locations (where the app is installed) can access these configurations.The app configuration page is a separate entity that allows you to configure your application. Setting up an app configuration page allows you to store all the config settings for your application and secure their access from a single location.<h2>Use Case</h2>Imagine&nbsp;we are going to build an e-commerce&nbsp;app to integrate an e-commerce platform with Contentstack. Normally, these applications offer different configuration parameters that need to be saved and used to communicate with them.&nbsp;&nbsp;You&nbsp;can leverage the app configuration UI&nbsp;Location to manage those parameters,&nbsp;such as API Key, Store Id, Channels, Locales...To save these app configuration values, you have to use the app sdk framework. You can refer to the code below which initializes the app sdk framework and gets the config object from the app sdk and sets it into a state variable.This state variable can be used in future for displaying in the UI Component of configuration screen. Here you can find an example code snippet:import ContentstackAppSdk from "@contentstack/app-sdk"; &nbsp; const [state, setState] = useState&lt;TypeAppSdkConfigState&gt;({ installationData: { configuration: {}, serverConfiguration: {}, }, setInstallationData: (): any =&gt; {}, appSdkInitialized: false, }); &nbsp; useEffect(() =&gt; { ContentstackAppSdk.init() .then(async (appSdk) =&gt; { const sdkConfigObject = appSdk?.location?.AppConfigWidget?.installation; if (sdkConfigObject) { const installationDataFromSDK = await sdkConfigObject.getInstallationData(); const setInstallationDataOfSDK = sdkConfigObject.setInstallationData; setState({ ...state, installationData: installationDataFromSDK, setInstallationData: setInstallationDataOfSDK, appSdkInitialized: true, }); } }) .catch((error) =&gt; { console.error("appSdk initialization error", error); }); }, []); &nbsp;The configuration values will be available in the installationData attribute of the object that we get from appSdk object, too.The installationData is an object which has two keys in it:<ol><li>configuration - This should have all the insensitive configs of an app as this will be available in all the other UI locations.</li><li>serverConfiguration - This should have all the sensitive / critical information= of the configs. This will only be sent through webhooks. Users of the app will never get these values in other UI locations.</li></ol>Once the configurations are set using the code above, whenever the user (installer) changes any values in the configuration screen, state.installationData() can be called by passing updated configuration and serverConfiguration values as shown below. That way the app sdk saves the updated values for this installation, persisting them for the application to use when loading in the different locations. Here is a code snipped to do so:state.setInstallationData({ configuration: updatedConfigurationObject, serverConfiguration: updatedServerConfigurationObject, }); &nbsp;<h2>Exercise 1</h2>In this exercise, you will add a&nbsp;form with an input box to your configuration screen. Then you will capture the text entered in such input field and store it in Contentstack's application&nbsp;configuration. The value will be persisted and will be displayed in the input field every time you access the configuration screen so users can manage it.<ul><li>Using your code editor, access the file located at:&nbsp;src/containers/ConfigScreen/AppConfiguration.tsx</li><li>Import the following react components from the Contenstack venus components library:</li></ul><ol><li>import { Field, FieldLabel, Form, TextInput, } from "@contentstack/venus-components"; &nbsp;</li></ol><ul><li>Copy the following JSX snipped and replace the {/* add form code here */} placeholder with it:</li></ul><ol><li>&lt;Form className="config-wrapper"&gt; &lt;Field&gt; &lt;FieldLabel required htmlFor="title"&gt; {localeTexts.ConfigScreen.page.label} &lt;/FieldLabel&gt; &lt;TextInput type="text" required value={state?.installationData?.configuration?.title} placeholder={localeTexts.ConfigScreen.page.placeholder} name="title" onChange={updateConfig} /&gt; &lt;/Field&gt; &lt;/Form&gt;</li></ol><ul><li>Add the below function inside the component:</li><li>const updateConfig = async (e: any) =&gt; { // eslint-disable-next-line prefer-const let { name: fieldName, value: fieldValue } = e?.target || {}; if (typeof fieldValue === "string") fieldValue = fieldValue?.trim(); const updatedConfig = state?.installationData?.configuration || {}; updatedConfig[fieldName] = fieldValue; &nbsp; if (typeof state?.setInstallationData !== "undefined") { await state?.setInstallationData({ ...state.installationData, configuration: updatedConfig, }); } &nbsp; return true; };</li><li>Save your file and make sure that your application is still running with no errors. </li><li>Tip: in case you might have experienced any issues or your application is erroring, the final code is provided in the&nbsp;src/containers/ConfigScreen/solution.txt&nbsp;file, which contents you can copy and paste into the&nbsp;src/containers/ConfigScreen/AppConfiguration.tsx&nbsp;file.</li><li>You should see the following Configuration screen in your browser:</li><li><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt65ba5d2c51370f0a/67ddd47a20a3dc1de3f82d1c/BuildingMarketApps_L6_img-1.png" alt="BuildingMarketApps_L6_img-1.png" height="auto"/></li><li>From this moment on, as soon as the value in the input field changes, it gets saved. If you reload the page you will see that the value is persisted.</li></ul>This exercise just show you how to to save and read configuration from Consesntack for your marketplace applications. As a developer, you can create your own interface with differnt UI elements and as many inputs as needed to store as many configuration parameters as needed, too. These configuration parameters are then available in the rest of the locations, shall you need to use them in other places.Tip: make sure you go over the entire code in the file to get a better understanding on how the logic access the configuration.If you want to learn more about this location, please visit our documentation: <a href="https://www.contentstack.com/docs/developers/developer-hub/app-config-location">App Configuration Location</a>In the next module you will create a Custom Field.&nbsp;&nbsp;<div style="position: relative;overflow: hidden;padding-bottom: 56.25%;"><iframe src="https://cdn.jwplayer.com/players/yUZpejhH-b769H14u.html" width="100%" height="100%" frameborder="0" scrolling="auto" title="03 - Exercise 1 - App Configuration Location" style="position: absolute;" allowfullscreen=""></iframe></div>

Implementing App Locations: App Configuration

<h3>Welcome to Introduction to Marketplace Applications&nbsp;Course!</h3>
 
This course is intended to introduce developers to the process of creating new Marketplace Apps and installing them in Contenstack.&nbsp;
Required for this course:
<ol>
 <li>
 Account in Contentstack with access to an Organization&nbsp;as an Administrator or Developer. Create a training Org/Stack <a href="https://www.contentstack.com/academy/">here</a>. Training stacks are available for 25 days. Alternatively, you can bootstrap a <a href="https://www.contentstack.com/docs/developers/cli/bootstrap-starter-apps">Starter App via the CLI</a> or from the <a href="https://app.contentstack.com/#!/marketplace/starters">Marketplace</a>.&nbsp;
 </li>
 <li>
 Permissions to create new Marketplace Apps in Developer Hub.
 </li>
 <li>
 Permissions to install Developer Hub Applications in your stack.&nbsp;
 </li>
 <li>
 Assets for all the walkthroughs can be found on <a href="https://github.com/contentstack/marketplace-academycourse-app">Github</a>.
 </li>
 <li>
 Contentstack Community account. If you do not have one, you can visit <a href="https://community.contentstack.com/">community.contentstack.com/</a> and register for a new account. You can adjust your email notifications under your profile at&nbsp;<a href="https://community.contentstack.com/settings/general">https://community.contentstack.com/settings/general</a>&nbsp;﹥ Settings.
 </li>
</ol>

Explore