# Development Environment Setup for Marketplace ### About this export | Field | Value | | --- | --- | | **content_type** | lesson | | **platform** | contentstack-academy | | **source_url** | https://www.contentstack.com/academy/courses/marketplace-apps/development-environment-setup-for-marketplace | | **course_slug** | marketplace-apps | | **lesson_slug** | development-environment-setup-for-marketplace | | **markdown_file_url** | /academy/md/courses/marketplace-apps/development-environment-setup-for-marketplace.md | | **generated_at** | 2026-04-28T06:55:37.562Z | > Part of **[Building Marketplace Apps](https://www.contentstack.com/academy/courses/marketplace-apps)** on Contentstack Academy. **Academy MD v3** — structured for retrieval; no quiz or assessment keys. #### 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. ## Supplement for indexing ### Content summary Development Environment Setup for Marketplace. 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 str ### Retrieval tags - Development - Environment - Setup - for - Marketplace - marketplace-apps - lesson 03 - Development Environment Setup for Marketplace - marketplace-apps lesson ### Indexing notes Index this lesson as a primary chunk tagged with lesson_id "03" and topics: [Development, Environment, Setup, for, Marketplace]. Parent course slug: marketplace-apps. Use asset_references URLs as thumbnail hints in search results when present. Never surface LMS quiz content or assessment answers from this file. ### Asset references _No image or video thumbnail URLs were extracted._ ### External links | Label | URL | | --- | --- | | Contentstack Academy home | `https://www.contentstack.com/academy/` | | Training instance setup | `https://www.contentstack.com/academy/training-instance` | | Academy playground (GitHub) | `https://github.com/contentstack/contentstack-academy-playground` | | Contentstack documentation | `https://www.contentstack.com/docs/` | | NPM | `https://docs.npmjs.com/downloading-and-installing-node-js-and-npm` | | NodeJS | `https://nodejs.org/en/download` | | Download or clone the Marketplace app boilerplate repo from our GitHub repo. | `https://github.com/contentstack/marketplace-academycourse-app` |