# Building Marketplace Apps ### About this export | Field | Value | | --- | --- | | **content_type** | course | | **platform** | contentstack-academy | | **source_url** | https://www.contentstack.com/academy/courses/marketplace-apps | | **language** | en | | **product_area** | marketplace | | **learning_path** | contentstack-developer-certification | | **course_id** | marketplace-apps | | **slug** | marketplace-apps | | **version** | 2026-03-01 | | **last_updated** | 2026-04-28 | | **status** | published | | **keywords** | ["marketplace"] | | **summary_one_line** | Welcome to Introduction to Marketplace Applications Course! This course is intended to introduce developers to the process of creating new Marketplace Apps and installing them in Contenstack. Required for this course: 1.… | | **total_duration_minutes** | 65 | | **lessons_count** | 16 | | **video_lessons_count** | 0 | | **text_lessons_count** | 16 | | **linked_learning_path** | contentstack-developer-certification | | **linked_assessment_ref** | LMS_UNCONFIGURED_COURSE_ASSESSMENT | | **markdown_file_url** | /academy/md/courses/marketplace-apps.md | | **generated_at** | 2026-04-28T06:55:36.759Z | | **intended_audience** | [] | | **prerequisites** | [] | | **related_courses** | [] | > **Academy MD v3** — companion `.md` for Ask AI. Quizzes and graded assessments are **LMS-only**; this file never contains answer keys. ## Course Overview | Metadata | Value | | --- | --- | | Catalog duration | 1h 5m 5s | | Released (if known) | 2026-03-01 | | Product area | marketplace | ### Description ### **Welcome to Introduction to Marketplace Applications Course!** This course is intended to introduce developers to the process of creating new Marketplace Apps and installing them in Contenstack.  Required for this course: 1. Account in Contentstack with access to an Organization as an Administrator or Developer. Create a training Org/Stack [here](https://www.contentstack.com/academy/). Training stacks are available for 25 days. Alternatively, you can bootstrap a [Starter App via the CLI](https://www.contentstack.com/docs/developers/cli/bootstrap-starter-apps) or from the [Marketplace](https://app.contentstack.com/#!/marketplace/starters).  2. Permissions to create new Marketplace Apps in Developer Hub. 3. Permissions to install Developer Hub Applications in your stack.  4. Assets for all the walkthroughs can be found on [Github](https://github.com/contentstack/marketplace-academycourse-app). 5. Contentstack Community account. If you do not have one, you can visit [community.contentstack.com/](https://community.contentstack.com/) and register for a new account. You can adjust your email notifications under your profile at [https://community.contentstack.com/settings/general](https://community.contentstack.com/settings/general) **﹥ Settings.** ### Overview ### **About the Course ** **What this course is:** * A comprehensive guide for developers aiming to understand the intricacies of building marketplace apps. * A deep dive into understanding the unique benefits of various extension locations, their specific use cases, common pitfalls, and best practices. * A blend of general guidance and in-depth insights on recommended approach when building Contentstack extensions via marketplace apps. * Not just any guide, but a set of step-by-step tutorials that walk the developer through the process of setting up a marketplace development environment using a boilerplate application that contains the foundation of any marketplace app development project. **What this course is not:** * A tutorial on developing the front end of your digital properties. * A guide on leveraging Contentstack Management or Content Delivery APIs for content management and delivery. * An exhaustive course that delves into every minute detail related to software development lifecycle. There are advanced development concepts that are beyond the scope of what this course covers. **\*Note:** Contentstack is a headless CMS with an API-first approach. Additionally Contentstack is the only fully automated Composable DXP, and due to this nature, several marketplace apps are available at the customer's disposal to integrate with various technologies and services. Have a look at the [Marketplace Apps](https://www.contentstack.com/docs/developers/marketplace-apps) documentation to get started. ### Learning objectives 1. Follow each lesson in order. 2. Practice in a training stack using placeholders **YOUR_STACK_API_KEY** and **YOUR_DELIVERY_TOKEN** in local `.env` files only. 3. Validate API responses against the official documentation. ### Topics covered marketplace ## Course structure ```text marketplace-apps/ ├── 01-introduction-to-marketplace-apps-and-app-framework · text · 1 min ├── 02-marketplace-boilerplate · text · 1 min ├── 03-development-environment-setup-for-marketplace · text · 1 min ├── 04-creating-app-in-developer-hub-and-installing-the-app · text · 1 min ├── 05-implementing-app-locations-introduction · text · 1 min ├── 06-implementing-app-locations-app-configuration · text · 1 min ├── 07-implementing-app-locations-custom-field · text · 1 min ├── 08-implementing-app-locations-entry-sidebar · text · 1 min ├── 09-implementing-app-locations-stack-dashboard · text · 1 min ├── 10-implementing-app-locations-asset-sidebar · text · 1 min ├── 11-implementing-app-locations-full-page · text · 1 min ├── 12-implementing-app-locations-field-modifier · text · 1 min ├── 13-implementing-app-locations-json-rte · text · 1 min ├── 14-best-practices-tips-and-next-steps · text · 1 min ├── 15-summary · text · 3 min ├── 16-marketplace-apps-quiz · quiz (LMS only) · 3 min ``` ## Lessons ### Lesson 01 — Introduction to Marketplace Apps and App Framework #### Lesson text 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\]([https://github.com/contentstack/app-sdk-docs](https://github.com/contentstack/app-sdk-docs)) 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. #### Key takeaways - Connect **Introduction to Marketplace Apps and App Framework** back to your stack configuration before moving to the next module. - Capture one concrete artifact (screenshot, Postman call, or code snippet) that proves the step works in your environment. - Re-read the delivery versus management boundary for anything you changed in the entry model. ### Lesson 02 — Marketplace Boilerplate #### Lesson text 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: * Custom Field * Entry Sidebar Widget * Asset Sidebar Widget * Dashboard Widget * Field Modifier * Full Page * JSON RTE plugin  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 [Marketplace App Boilerplate GitHub repository](https://github.com/contentstack/marketplace-academycourse-app). #### Key takeaways - Connect **Marketplace Boilerplate** back to your stack configuration before moving to the next module. - Capture one concrete artifact (screenshot, Postman call, or code snippet) that proves the step works in your environment. - Re-read the delivery versus management boundary for anything you changed in the entry model. ### Lesson 03 — Development Environment Setup for Marketplace #### Lesson text 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. ## Pre-requisites Before setting up the development environment in your local machine, you must make sure the below software is installed: 1\. [NPM](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) - v8.1.4 or greater 2\. [NodeJS](https://nodejs.org/en/download) - v14.18.2 or greater Then, [Download or clone the Marketplace app boilerplate repo from our GitHub repo.](https://github.com/contentstack/marketplace-academycourse-app) The boilerplate application consists of the following file structure: ## **Project Folder Structure** 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   **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_. Those files can be used to fix any issues or missed steps while performing the exercises. ## **Dependency Installation and Application Run** Using your terminal or command prompt, navigate to the root directory of the downloaded repo and execute the following commands: npm install npm start The 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, http://localhost:3000 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 start Like 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 http://localhost:3000 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: * **404** - This is just an example react component that can be used to render in the UI during 404 errors. * **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. * **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 * **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. * **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. * **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. * **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. * **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. * **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. ## **JSON RTE PLUGINS** The JSON RTE Plugin will be implemented in the **rte/src.** A couple scripts are provided to build and deploy the compiled plugin code into the create-react-app **public** folder so it can be served from there. ## **Video: Development Environment Setup** 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. #### Key takeaways - Connect **Development Environment Setup for Marketplace** back to your stack configuration before moving to the next module. - Capture one concrete artifact (screenshot, Postman call, or code snippet) that proves the step works in your environment. - Re-read the delivery versus management boundary for anything you changed in the entry model. ### Lesson 04 — Creating App in Developer Hub and Installing the App #### Lesson text 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 [Developer Hub documentation](https://www.contentstack.com/docs/developers/developer-hub). **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 http://localhost:3000. you should see the following screen: ![BuildingMarketplaceApps\_L1\_img-1.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt9baf8e24ad9fac41/67ddd1beefd8a977054c06d5/BuildingMarketplaceApps_L1_img-1.png) Next, you will access the Developer Hub and register your application. To do so, follow these steps: 1\. [Log in to your Contentstack account](https://www.contentstack.com/login/). 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. ![BuildingMarketplaceApps\_L4\_img-2.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt80ff7d7c1ff2bc95/67ddd1da782bfb1d246f5b22/BuildingMarketplaceApps_L4_img-2.png) 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. ![BuildingMarketplaceApps\_L4\_img-3.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt584d5bc4b9b2c57c/67ddd1f3983a65221b3b8134/BuildingMarketplaceApps_L4_img-3.png) 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.  ![BuildingMarketplaceApps\_L4\_img-4.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltb20872c72a9d764f/67ddd211c566eea1c65e05ac/BuildingMarketplaceApps_L4_img-4.png) 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_ ![BuildingMarketplaceApps\_L4\_img-5.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltca8399c374d7fda5/67ddd229c566ee43de5e05b0/BuildingMarketplaceApps_L4_img-5.png) 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. ![BuildingMarketplaceApps\_L4\_img-6.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blte073ab35b2984bbd/67ddd243443bd642a3f1d063/BuildingMarketplaceApps_L4_img-6.png) 10\. Add the following locations by clicking the **+Add** button that shows up when you mouse over the different Available Location(s), e.g: ![BuildingMarketplaceApps\_L4\_img-7.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt54fc7725493b90a5/67ddd258632b9325acd4a744/BuildingMarketplaceApps_L4_img-7.png)  **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 _Save_ button at the bottom right corner of the page. ## **Custom Field** **Name:** Sample App  **Path:** /custom-field **Data Type:** JSON   **Multiple:** checked **Enabled**: on ![BuildingMarketApps\_L4\_img-8.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt0660fcf65e5af419/67ddd27cf7eccc8cb390dd93/BuildingMarketApps_L4_img-8.png) ### **Stack Dashboard**   **Name:** Sample App **Path:** /stack-dashboard **Default Width:** Full Width **Enabled**: on ![BuildingMarketApps\_L4\_img-9.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt2801a882269d8baa/67ddd295cb02417c5f41baf5/BuildingMarketApps_L4_img-9.png) ## **Asset Sidebar** **Name:** Sample App **Path:** /asset-sidebar **Enabled**: on **Width:** 500 ![BuildingMarketApps\_L4\_img-10.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt465d51e71080deaf/67ddd2ae37e25a0c8b1e4be3/BuildingMarketApps_L4_img-10.png) **App Configuration** **Path**: /app-configuration **Enabled**: on ![BuildingMarketApps\_L4\_img-11.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltf7a9e25a026d071e/67ddd2c145b2297837911ba8/BuildingMarketApps_L4_img-11.png) ## **JSON RTE** **Name**: Sample App **Path**: /json-rte.js **Enabled**: on ![BuildingMarketApps\_L4\_img-12.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt998120cf9e693e24/67ddd3535e486df27471bb8b/BuildingMarketApps_L4_img-12.png) ## **Entry Sidebar** **Name**: Sample App **Description**: Example JSON RTE **Path**: /entry-sidebar **Enabled**: on ![BuildingMarketApps\_L4\_img-13.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt38f2afe06ed1a224/67ddd3683a0f383e7e00f05f/BuildingMarketApps_L4_img-13.png) ## **Field Modifier** **Name**: Sample App **Path**: /field-modifier **Allowed Field Types**: All **Enabled**: on ![BuildingMarketApps\_L4\_img-14.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt9c735c8481833e23/67ddd37ea6d88e2861053a14/BuildingMarketApps_L4_img-14.png) ## **Full Page** **Name**: Full Page Example **Path**: /full-page **Enabled**: on For full page integrations, this location supports the ability to upload an icon. This icon is then displayed in the main left navigation icon list. ![BuildingMarketApps\_L4\_img-15.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt8218c8dd05f02172/67ddd3930c6f554d721fd454/BuildingMarketApps_L4_img-15.png) 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: ![BuildingMarketApps\_L4\_img-16.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltfec1818564c23a2e/67ddd3a845b229ab4b911bb0/BuildingMarketApps_L4_img-16.png) 11.  Next you will install this application on a Stack. To do so, click the “Install” button on the top right corner of the screen. ![BuildingMarketApps\_L4\_img-17.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt9463c65f9c2664d9/67ddd3c15e486d864171bb91/BuildingMarketApps_L4_img-17.png) 12\. Next, Select the stack where you want to install the app and click the Install button. ![BuildingMarketApps\_L4\_img-18.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt7d2a83f254f6b4bf/67ddd3d7a6d88e5250053a1b/BuildingMarketApps_L4_img-18.png) **Note:** make sue you accept the Terms of Service, and click _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 screen like this: ![BuildingMarketApps\_L4\_img-19.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blteedfa72cad67f1de/67ddd40cc9b8d450e7d14779/BuildingMarketApps_L4_img-19.png) 14\. Click **Save** at the bottom right corner. 15\. Next, click the _Open Stack_ 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 examples of configuration screens for different apps available in Contentstack’s marketplace: #### Key takeaways - Connect **Creating App in Developer Hub and Installing the App** back to your stack configuration before moving to the next module. - Capture one concrete artifact (screenshot, Postman call, or code snippet) that proves the step works in your environment. - Re-read the delivery versus management boundary for anything you changed in the entry model. ### Lesson 05 — Implementing App Locations Introduction #### Lesson text 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: const AppConfigurationExtension = React.lazy(() => import("../ConfigScreen/AppConfiguration")); ... }/>; In the following modules, you will browse through the available UI locations along with their corresponding routes and code. #### Key takeaways - Connect **Implementing App Locations Introduction** back to your stack configuration before moving to the next module. - Capture one concrete artifact (screenshot, Postman call, or code snippet) that proves the step works in your environment. - Re-read the delivery versus management boundary for anything you changed in the entry model. ### Lesson 06 — Implementing App Locations: App Configuration #### Lesson text 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. ## **Use Case** Imagine we are going to build an e-commerce 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.   You can leverage the app configuration UI Location to manage those parameters, 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";   const \[state, setState\] \= useState({ installationData: { configuration: {}, serverConfiguration: {}, }, setInstallationData: (): any \=> {}, appSdkInitialized: false, });   useEffect(() \=> { ContentstackAppSdk.init() .then(async (appSdk) \=> { 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) \=> { console.error("appSdk initialization error", error); }); }, \[\]);   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: 1. **configuration** - This should have all the insensitive configs of an app as this will be available in all the other UI locations. 2. **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. 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, });   ## **Exercise 1** In this exercise, you will add a 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 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. * Using your code editor, access the file located at: **src/containers/ConfigScreen/AppConfiguration.tsx** * Import the following react components from the Contenstack venus components library: 1. import { Field, FieldLabel, Form, TextInput, } from "@contentstack/venus-components";   * Copy the following JSX snipped and replace the _{/\* add form code here \*/}_ placeholder with it: 1.
{localeTexts.ConfigScreen.page.label} * Add the below function inside the component: * const updateConfig \= async (e: any) \=> { // 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;   if (typeof state?.setInstallationData !\== "undefined") { await state?.setInstallationData({ ...state.installationData, configuration: updatedConfig, }); }   return true; }; * Save your file and make sure that your application is still running with no errors. * **Tip**: in case you might have experienced any issues or your application is erroring, the final code is provided in the **src/containers/ConfigScreen/solution.txt** file, which contents you can copy and paste into the **src/containers/ConfigScreen/AppConfiguration.tsx** file. * You should see the following Configuration screen in your browser: * ![BuildingMarketApps\_L6\_img-1.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt65ba5d2c51370f0a/67ddd47a20a3dc1de3f82d1c/BuildingMarketApps_L6_img-1.png) * 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. 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: [App Configuration Location](https://www.contentstack.com/docs/developers/developer-hub/app-config-location) In the next module you will create a Custom Field. #### Key takeaways - Connect **Implementing App Locations: App Configuration** back to your stack configuration before moving to the next module. - Capture one concrete artifact (screenshot, Postman call, or code snippet) that proves the step works in your environment. - Re-read the delivery versus management boundary for anything you changed in the entry model. ### Lesson 07 — Implementing App Locations: Custom Field #### Lesson text # **Implementing App Locations: Custom Field** The Custom Field Location of an app lets you add/ create custom fields that you can use in your content type. Apart from using the default fields such as "Single-line textbox", "Rich Text Editor", and so on, you can integrate with numerous business applications, such as "Bynder", "Cloudinary", "Shopify", by adding them as custom fields to your stack's content type. Contentstack loads this location of your app inside an iframe in the entry editing page. You can use the app sdk framework to access the entry data, manipulated it, and store your custom filed data into it. This will allow you to store field values in the entry from third-party systems such as Digital Asset Management systems Product Information Management systems, etc... ## **Use Case** One of the most common use cases in Contenstack to leverage custom fields, is typically when you want to manage assets from a different system and then bring the asset id and/or reference into Contenstack, so your editors can browse the Digital Asset Management system and choose their images from there and associate them with other content managed in Contenstack. Similarly you can apply the same concept if you need to browse product categories or attributes from your Product Information Management system so, again, your editor can choose the right product discounts, product ids, product features, etc... when, for instance creating product promotional pages.  In order to read and save this values as a field as part of the entry you can refer to the following code snippet: import ContentstackAppSdk from "@contentstack/app-sdk";   const \[state, setState\] \= useState({ config: {}, entry: {}, location: {}, appSdkInitialized: false, }); useEffect(() \=> { ContentstackAppSdk.init() .then(async (appSdk) \=> { const config \= await appSdk?.getConfig(); const entryData \= appSdk.location.CustomField?.field?.getData(); appSdk.location.CustomField?.frame.enableAutoResizing(); setState({ config, entry: entryData, location: appSdk?.location, appSdkInitialized: true, }); }) .catch((error) \=> { console.error("appSdk initialization error", error); }); }, \[\]);   Using the config and the entry objects in the state variable, you can now render your UI of the custom field location as per your requirement. If you need to save/overwrite the updated data to the custom field of an entry, then you have to use the **state.location.CustomField.field.setData()** function as shown below: state.location.CustomField?.field?.setData(updatedDataThatHasToBeStoredInCustomFieldOfTheEntry); ## **Exercise 2** In this exercise you will add a button to your custom field, an input box and a modal. When the exercise is completed, you will be able to click on the button, open the dialog, choose a product id from it (hardcoded in this example, but you could easily implement the logic to retrieve the actual product id from your third party system), and save it as part of the entry data. * Using your code editor, access the file located at: **src/containers/CustomField/CustomField.tsx** * Import the following react components from the Contenstack venus components library: * import { Tag, cbModal } from "@contentstack/venus-components"; * Create the following two new functions inside the component. This code will display a modal dialog upon clicking on a button: * const productModal \= (props: any) \=> ( );   const handleClick \= () \=> { cbModal({ component: productModal, modalProps: { onClose: () \=> {}, onOpen: () \=> {}, size: "xsmall", }, }); };   * Add the below code in  the **renderCustomFile** function to replace the placeholder that  says “{//add tag code here}”. * setSelectedItems(tags)} /\>   * Next, create a new file named **ProductModal.tsx** in the following folder: **src/containers/CustomField/** * Paste the following code into the file: * import { Button, ButtonGroup, Field, FieldLabel, ModalBody, ModalFooter, ModalHeader, TextInput, } from "@contentstack/venus-components"; import React, { useState } from "react";   import localeTexts from "../../common/locales/en-us";   const ProductModal \= ({ updateSelectedItems, ...props }: any) \=> { const \[name, setName\] \= useState("");   return ( <> {"Name"} setName(e.target.value)} /\>