Building Marketplace Apps

Course Home
1. Introduction to Marketplace Apps and App Framework
1m
2. Marketplace Boilerplate
1m
3. Development Environment Setup for Marketplace
3m 30s
4. Creating App in Developer Hub and Installing the App
6m 30s
5. Implementing App Locations Introduction
2m 15s
6. Implementing App Locations: App Configuration
2m 20s
7. Implementing App Locations: Custom Field
6m 45s
8. Implementing App Locations: Entry Sidebar
4m 25s
9. Implementing App Locations: Stack Dashboard
6m 45s
10. Implementing App Locations: Asset Sidebar
3m 30s
11. Implementing App Locations: Full Page
8m 45s
12. Implementing App Locations: Field Modifier
6m 20s
13. Implementing App Locations: JSON RTE
7m 45s
14. Best Practices, Tips and Next Steps
4m 15s
15. 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 - v8.1.4 or greater

2. NodeJS - v14.18.2 or greater
Then, Download or clone the Marketplace app boilerplate repo from our GitHub repo.

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.