Drive business forward and build better customer experiences with composable technologyDrive business forward with composableGo Composable

Marketplace App Boilerplate

A boilerplate is a fitting template to describe distinct repetitive segments of a project to help build projects quickly and efficiently.

They can define project-level elements or standard methods for one or more projects.

The following guide shows how to build an app using our Marketplace App boilerplate. For more information about the Marketplace App boilerplate, you can check the GitHub repository here.

Why should you use the Marketplace App Boilerplate?

  1. The boilerplate code includes all categories of applications you can create in Contentstack, i.e., custom fields, sidebar widgets, and dashboard widgets.
  2. Creating any application is prompt since you only need to use the required routes and corresponding components.
  3. We have built a boilerplate that incorporates all the best practices you can use while building your application in Contentstack.
  4. With this template, you can save a considerable amount of development time.
  5. The boilerplate also provides the venus components library to make your application correspond with our new Contentstack user interface.
  6. You can use the JSON RTE plugin within the Boilerplate App. For more information, please refer to the JSON RTE plugin documentation.

Structure of the Marketplace App Boilerplate

The boilerplate folder structure consists of relative files and references, making it easy to acclimate within your project. This structure also allows the boilerplate to be thoroughly portable between different stacks in Contentstack.

Below is the folder structure of the boilerplate:

├─ e2e
└─ public
└─ rte
|  ├─ src
|  ├─
|  └─ package-lock.json
|  └─ package.json
|  └─ tsconfig.json
|  └─ webpack.common.js
|  └─
|  └─
├─ src
|  ├─ assets
|  └─ common
|  |  ├─ contexts
|  |  └─ hooks
|  |  └─ locales/en-us
|  |  └─ providers
|  |  |  ├─ AppConfigurationExtensionProvider.tsx
|  |  |  └─ CustomFieldExtensionProvider.tsx
|  |  |  └─ EntrySidebarExtensionProvider.tsx
|  |  |  └─ MarketplaceAppProvider.tsx
|  |  └─ types
|  |  └─ utils
|  └─ components
|  └─ containers
|  |  ├─ 404
|  |  └─ App
|  |  └─ AssetSidebarWidget
|  |  └─ ConfigScreen
|  |  └─ CustomField
|  |  └─ DashboardWidget
|  |  └─ SidebarWidget
|  |  └─ index.tsx
|  └─ test-utils
|  └─ index.css
|  └─ index.tsx
|  └─ react-app-env.d.ts
|  └─ reportWebVitals.ts
|  └─ setupTests.ts
└─ .editorconfig
└─ .env.sample
└─ .gitignore
└─ .prettierrc
└─ global-setup.ts
└─ global-teardown.ts
└─ package-lock.json
└─ package.json
└─ playwright.config.ts
└─ tsconfig.json

Below are the app routes for each location in App.tsx:

function App() {
  return (
          <Route path="/" element={<DefaultPage />} />
                  <CustomFieldExtension />
                  <EntrySidebarExtension />
                  <AppConfigurationExtension />
                <AssetSidebarExtension />
                <StackDashboardExtension />
          <Route path="*" element={<PageNotFound />} />

Using Marketplace App Boilerplate To Develop Custom Applications

To get started with building applications using the boilerplate, follow the steps given below:


  1. Contentstack account
  2. Contentstack App Framework and knowledge of app development
  3. Reference to App SDK

Install Dependencies

  1. Navigate to the root directory of the downloaded zip file.
  2. Run the following command to install the necessary packages:
    npm install
  3. After you install the packages, run the following command  to get started:
    npm start

Creating Project Using The Boilerplate

To use your application, you need to upload it to Contentstack. To do so, perform the steps given below:

  1. Log in to your Contentstack account.
  2. In the left-hand-side primary navigation, you will find a new icon for Developer Hub (as shown below). Click the icon to go to the Developer Hub.
  3. Click the + New App button. 
  4. In the New App modal, give a suitable name and description.
  5. Click Create.
  6. On the resulting Basic Information page, upload your app's icon and Save the changes.
  7. Click the UI Locations icon. On the resulting page enter the App URL.Boilerplat_Doc-_App_URL.png
  8. Add the UI Locations as per your requirement.
  9. Add the below routes for each UI Location to get the desired results
    1. Stack Dashboard
      For the Stack Dashboard UI Location, use Dashboard App for Name and /stack-dashboard for Path.
    2. Asset Sidebar
      For the Asset Sidebar UI Location, use Asset Sidebar App for Name and /asset-sidebar for Path.
    3. JSON RTE
      For the JSON RTE UI Location, use JsonRte Plugin for Name and /json-rte.js for Path.
    4. Custom Field
      For the Custom Field UI Location, use Custom Field App for Name and /custom-field for Path. Enter Text for Data Type.
    5. Entry Sidebar
      For the Entry Sidebar UI Location, use Entry Sidebar App for Name and /entry-sidebar for Path.
    6. App Configuration
      For the App Configuration UI Location, use App Config for Name and /app-configuration for Path.

      Note: After adding each route save and install the app in any stack.

  10. Select the stack where you want to install the app and click the Install button.
  11. You will be redirected to the configuration page of the app. Fill in the necessary details to configure your app.
  12. Click the Open Stack button to start using your application within your selected stack.
  13. Installing JSON RTE Plugin

    1. Navigate to rte subfolder as shown below. The folder structure will look like this:

    2. ├─ rte
      |  ├─ src
      |  |  ├─ public
      |  |  └─ index.css
      |  |  └─ plugin.tsx
      |  |  └─ type
      |  |  |  ├─ svg.d.ts 
      |  |  └─
      |  |  └─ package-lock.json
      |  |  └─ package.json
      |  |  └─ tsconfig.json
      |  |  └─ webpack.common.js
      |  |  └─
      |  |  └─
    3. Perform the following steps:
      • Run the following command to install the necessary packages:
        npm install
      • Run the following command to get started:
         npm start
    4. After you run the npm start command, localhost on port 3000 will serve a file json-rte.js i.e., https://localhost:3000/json-rte.js
    5. The localhost is up and running and you have already configured the JSON RTE Plugin in a stack.
    6. Edit the content type where you are using the JSON RTE to select the plugin as shown below and save.
    7. When creating an entry consisting of JSON RTE you will find an icon within the app component within the JSON RTE, as shown below. Click the icon, and the below component will appear. JSON_RTE_Plugin.png

    Integrating Venus Component Library

    Venus Components can be used in creating a React app or any React app build that uses webpack or any other bundler.

    Follow the instructions given below to integrate the components with existing UI extensions built using React.


    Run the following command to install the Venus Component Library elements:

    npm i @contentstack/venus-components@1.0.5


    Next, use the following code snippet to integrate the components into your application:

    import React from 'react';
    import ReactDOM from 'react-dom';
    import ContentstackUIExtension from "@contentstack/ui-extensions-sdk";
    import { Button, Heading } from '@contentstack/venus-components';
    import '@contentstack/venus-components/build/main.css';
    class App extends React.Component {
      render() {
        return (
          <Heading tagName="h2" text="Extension building using Venus component" />
            onClick={() => {
              console.log('You clicked on Venus button');
            Click on me
    ContentstackUIExtension.init().then((extension) => {
          <App />

    Using Modal Component for Fullscreen View:

    Modal component for fullscreen view can be added for any of the UI locations. Let us consider Stack Dashboard UI location as an example here:

    Step 1: In the App Boilerplate template, go to /src/common/providers/MarketplaceAppProvider.tsx file and add the following in the UseEffect()

    useEffect(() => {
          .then(async (appSdk) => {
            window.postRobot = appSdk.postRobot;
            const appConfig = await appSdk.getConfig();
          .catch(() => {
      }, []);

    Step 2: Now go to /src/components/ and create a Fullscreen component “FullScreenPage.tsx” to integrate within your app

    import React from "react";
    import "@contentstack/venus-components/build/main.css";
    import { Icon } from "@contentstack/venus-components";
    export type fullScreenProps = {
      closeModal: () => void;
      children: React.ReactNode;
    const FullScreenPage: React.FC<fullScreenProps> = ({ closeModal, children }) => {
      return (
            width: "calc(100vw - 100px)",
            height: "calc(100vh - 100px)",
            borderRadius: "inherit",
            overflow: "hidden",
            display: "flex",
            flexDirection: "column",
          <div className="flex FullPage_Modal_Header">
            <h6 style={{ margin: "auto auto auto 22px" }}>FullScreen View</h6>
              className="Tab__icon mt-20"
              style={{ marginRight: "30px", marginLeft: "auto", cursor: "pointer" }}
              onClick={() => {
          <div className="fullscreen h-full">{children}</div>
    export default FullScreenPage;

    Step 3: Create a CustomComponent.tsx file inside /src/components/ which will be used to render in the fullscreen mode.

    const CustomComponent = () => {
      return (
        <div style={{ margin: "10px", padding: "10px" }}>
          <p style={{ textAlign: "justify", padding: "8px" }}>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, ducimus doloremque eum, a dolorum repudiandae,
            nostrum quas quae dolor tenetur saepe. Voluptas eaque praesentium ab velit consequatur deserunt totam, hic
            quidem, ipsam blanditiis vitae tempore nostrum officia tempora magni repudiandae consectetur laborum sint
            adipisci ex minima quas soluta esse id? Cupiditate saepe corporis suscipit! Molestias maiores quae blanditiis
            ipsa possimus, repudiandae cum? Iure deserunt quam blanditiis et?
    export default CustomComponent;

    Step 4: Go to /src/containers/DashboardWidget/StackDashboard.tsx file and add the following:

    import { useEffect, useRef } from "react";
    import { useAppSdk } from "../../common/hooks/useAppSdk";
    import { cbModal } from "@contentstack/venus-components";
    import FullScreenPage from "../../components/FullScreenPage";
    import { ReactComponent as FullscreenIcon } from "../../assets/fullscreen.svg";
    import CustomComponent from "../../components/CustomComponent";
    interface StackDashboardExtensionProps {
      fullScreen?: boolean;
    /** Stack Dashboard page component. */
    const StackDashboardExtension = ({ fullScreen }: StackDashboardExtensionProps) => {
      const ref = useRef(null);
      const appSdk = useAppSdk();
      useEffect(() => {
        if (!fullScreen) {
          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
          // @ts-ignore
          window.iframeRef = ref.current;
      }, []);
      const openModal = () => {
          component: (modalProps: any) => (
            <FullScreenPage {...modalProps}>
              <StackDashboardExtension fullScreen={true} />
          modalProps: {
            size: "customSize",
      let dynamicClassName = fullScreen ? "fullScreenWrapper" : "h-screen";
      return (
        <div ref={ref} className={dynamicClassName}>
          <CustomComponent />
          {!fullScreen && (
              style={{ position: "fixed", top: "10px", right: " 10px" }}
    export default StackDashboardExtension;

    Next Step

    Next, you can refer to the Get Started with Building Apps using Contentstack’s App SDK guide to start using the Contentstack App SDK in creating your apps.

Was this article helpful?