---
title: "Quick start (CLI)"
slug: "quick-start--cli-"
abstract: "Start developing for the Sitecore Marketplace locally by connecting your app to Sitecore. Build a client-side or full-stack app with built-in or custom authorization using a single CLI command."
---
# Quick start (CLI)

This guide describes how to start developing for the Sitecore Marketplace locally by scaffolding a Next.js App Router app with the Marketplace SDK using a single command. This guide is for building client-side[^UUID-9f3af1b0-4e64-fc35-eb7d-0b2a8bdb572c_N68c3cf9476daa] and full-stack[^UUID-9f3af1b0-4e64-fc35-eb7d-0b2a8bdb572c_N68c3cfaee88de] apps, with either the built-in authorization[^UUID-9f3af1b0-4e64-fc35-eb7d-0b2a8bdb572c_mp-builtinauth] or custom authorization[^UUID-9f3af1b0-4e64-fc35-eb7d-0b2a8bdb572c_mp-customauth].

In this guide, you:

## Prerequisites

Check that you have the following before getting started:

- A Marketplace app [installed](https://doc.sitecore.com/mp/en/developers/marketplace/install-an-activated-custom-app.html) in your Sitecore Cloud Portal organization.
- If you decide to use *custom authorization*, make sure your app has [client credentials](https://doc.sitecore.com/mp/en/developers/marketplace/create-client-credentials.html), and [set up a custom DNS](https://doc.sitecore.com/mp/en/developers/marketplace/set-up-a-custom-dns-for-local-development.html) for local development.

    > [!note]
    > The quick start templates use `@auth0/auth0-react` for client-side authentication, which provides better support for organizations with multiple environments. When creating client credentials, make sure to select **Single-page app (SPA)** as the application type, even if you're building a full-stack Next.js app.
    >
    > However, the Marketplace SDK does not impose constraints on which Auth0 library you use. If you prefer to use `@auth0/nextjs-auth0` with server-side authentication patterns, you can replace the package and adapt the implementation accordingly.
    >
    > For more information, refer to the [Auth0](https://auth0.com/docs/get-started/applications) documentation.

- [Node.js 16](https://nodejs.org/) or later. Check your installed version by using the `node --version` command.
- [npm 10](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) or later. Check your installed version by using the `npm --version` command.

## Scaffold an app

To start development, you scaffold a Next.js App Router app using a single command. This process creates a Next.js App Router project and installs the necessary Marketplace SDK packages, [Blok](https://blok.sitecore.com), and additional packages depending on your app requirements.

To scaffold an app:

::::tabs
:::tab{title="Client-side"}

To create a client-side app:

- Open an empty folder in your code editor, then run one of the following commands depending on your app requirements:

    When prompted, select:

    - **Yes** for Next.js or Next.js as a monorepo, depending on your preferences.
    - **Neutral** for base color. Blok will automatically override the default styling.
    - *Client-side* app with *built-in authorization*, using the SDK `client` package:

        ```bash
        npx shadcn@latest add https://blok.sitecore.com/r/marketplace/next/quickstart.json
        ```

    - *Client-side* app with *built-in authorization*, using the SDK `client` and `xmc` packages:

        ```bash
        npx shadcn@latest add https://blok.sitecore.com/r/marketplace/next/quickstart-with-client-side-xmc.json
        ```

:::
:::tab{title="Full-stack"}

To create a full-stack app:

1. Open an empty folder in your code editor, then run one of the following commands depending on your app requirements:
    - *Full-stack* app with *custom authorization*, using the SDK `client` package:

        ```bash
        npx shadcn@latest add https://blok.sitecore.com/r/marketplace/next/quickstart-with-custom-auth.json
        ```

    - *Full-stack* app with *custom authorization*, using the SDK `client` and `xmc` packages:

        ```bash
        npx shadcn@latest add https://blok.sitecore.com/r/marketplace/next/quickstart-with-full-stack-xmc.json
        ```

    When prompted, select:

    - **Yes** for Next.js or Next.js as a monorepo, depending on your preferences.
    - **Neutral** for base color. Blok will automatically override the default styling.
2. In `package.json`, update `scripts.dev` to include the following flags:

    ```text
    --experimental-https --hostname myapp.local
    ```

3. In `.env.local`, update the following variables:
    - `NEXT_PUBLIC_SITECORE_APP_ID` - with your [Marketplace app ID](https://doc.sitecore.com/mp/en/developers/marketplace/configure-and-activate-a-custom-app.html).
    - `NEXT_PUBLIC_AUTH0_CLIENT_ID` - with your app [client ID](https://doc.sitecore.com/mp/en/developers/marketplace/create-client-credentials.html).
    - `NEXT_PUBLIC_APP_BASE_URL` - with your [custom DNS](https://doc.sitecore.com/mp/en/developers/marketplace/set-up-a-custom-dns-for-local-development.html), for example, `https://myapp.local:3000`. The base URL must match your app's [deployment URL](https://doc.sitecore.com/mp/en/developers/marketplace/configure-and-activate-a-custom-app.html).
4. Save all your changes.

:::
::::

## Open your app in Sitecore

After scaffolding your app, you open your Marketplace app in a [Sitecore extension point](https://doc.sitecore.com/mp/en/developers/marketplace/extension-points.html) you selected for it during [app configuration](https://doc.sitecore.com/mp/en/developers/marketplace/configure-and-activate-a-custom-app.html).

To open your app in Sitecore:

::::tabs
:::tab{title="Client-side"}

1. Start your app by entering the following command in your terminal:

    ```bash
    npm run dev
    ```

2. In your web browser, in the [Cloud Portal](https://portal.sitecorecloud.io/), find and open your Marketplace app in one of its extension points.

    Your app now appears in Sitecore, it displays the [application context](https://doc.sitecore.com/mp/en/developers/sdk/0/sitecore-marketplace-sdk/understanding-queries.html "Understanding queries"), and the user interface lets you make calls to SitecoreAI APIs.

3. On the same page, open your console to find logs related to the Marketplace SDK. Make a call to SitecoreAI APIs in the user interface, and track the related logs in the console.

    > [!note]
    > During development, trace console logs in your web browser's console in the Sitecore extension point, not on your app's localhost address.
    >
    > Similarly, always preview your app in the Sitecore extension point. Any functionality that requires communication with Sitecore, such as getting application details and calling SitecoreAI APIs, only works in the extension points.

:::
:::tab{title="Full-stack"}

1. Start your app by entering the following command in your terminal:

    ```bash
    npm run dev
    ```

2. If prompted, accept the security warnings.
3. In your web browser, in the [Cloud Portal](https://portal.sitecorecloud.io/), find and open your Marketplace app in one of its extension points.

    Your app now appears in Sitecore, it displays the [application context](https://doc.sitecore.com/mp/en/developers/sdk/0/sitecore-marketplace-sdk/understanding-queries.html "Understanding queries"), and the user interface lets you make calls to SitecoreAI APIs.

4. On the same page, open your console to find logs related to the Marketplace SDK. Make a call to SitecoreAI APIs in the user interface, and track the related logs in the console.

    > [!note]
    > During development, trace console logs in your web browser's console in the Sitecore extension point, not on your app's localhost address.
    >
    > Similarly, always preview your app in the Sitecore extension point. Any functionality that requires communication with Sitecore, such as getting application details and calling SitecoreAI APIs, only works in the extension points.

:::
::::

### Next steps { .notintoc }

You've now displayed your app in Sitecore, read the application context, and made a call to SitecoreAI APIs. Next, you can:

- Explore the project structure:
    - `app/page.tsx` is your app's entry point.
    - `app/api` contains calls to SitecoreAI APIs.
    - `components/providers` contains the SDK initialization and authorization code.
    - `components/ui` contains Blok-style components, such as cards, buttons, and badges.
- Continue developing your app:
    - [Make more queries](https://doc.sitecore.com/mp/en/developers/sdk/0/sitecore-marketplace-sdk/understanding-queries.html "Understanding queries") to retrieve data from Sitecore.
    - [Make mutations](https://doc.sitecore.com/mp/en/developers/sdk/0/sitecore-marketplace-sdk/understanding-mutations.html "Understanding mutations") to change data in Sitecore.
- Learn more about the Marketplace SDK with the [reference documentation](https://github.com/Sitecore/sitecore-marketplace-sdk/tree/main/docs).
- Explore [other tasks to complete](https://doc.sitecore.com/mp/en/developers/marketplace/en/introduction-to-sitecore-marketplace-for-custom-and-public-apps.html#UUID-1735fb7a-559b-d6af-ec6f-91456d2504c5_section-idm234813214660084) after you finish building your app.

[^UUID-9f3af1b0-4e64-fc35-eb7d-0b2a8bdb572c_N68c3cf9476daa]: A Marketplace application that uses a client-side architecture. Client-side apps run entirely in the user's web browser. All API requests from the app to SitecoreAI APIs run indirectly, via the web browser. Ideal for simple UI extensions and functionalities that don't require server-side processing.

[^UUID-9f3af1b0-4e64-fc35-eb7d-0b2a8bdb572c_N68c3cfaee88de]: A Marketplace application that uses a full-stack architecture. Full-stack apps include both client-side and server-side components. API requests from the app to SitecoreAI APIs can run directly, server to server. Ideal for AI-powered apps such as AI agents, agentic workflows, and other server-to-server API interactions.

[^UUID-9f3af1b0-4e64-fc35-eb7d-0b2a8bdb572c_mp-builtinauth]: An authorization flow for Marketplace applications that is managed entirely by the Marketplace SDK, abstracting it away from the developer.

[^UUID-9f3af1b0-4e64-fc35-eb7d-0b2a8bdb572c_mp-customauth]: Auth0 authorization flow for Marketplace applications that replaces the built-in authorization managed by the Marketplace SDK. Required if your app needs to make server-side API calls to SitecoreAI APIs.