Marketplace SDK best practices

Choose the correct JavaScript framework - the Marketplace SDK is compatible with JavaScript or TypeScript projects that use a package manager, such as npm. When choosing a JavaScript framework, consider your application requirements. Next.js is ideal if your app requires server-side functionality. React (Vite) is suitable for purely client-side applications.

Use client-side code for user interactions - Your app can include server-side functionality to, for example, retrieve third-party data. But any functionality that you expect Sitecore users to directly interact with must be in the client-side code. This includes, for example, updating the contents of a SitecoreAI page.

Install only the packages you need - the client package is required for all Marketplace apps, but the other SDK packages are optional. Installing only the packages you need helps keep your app's bundle size small.

Use the extension point for debugging - console logs, warnings, errors, and network requests related to Sitecore are displayed in your web browser's console in the extension point, but not on your localhost address. Also, any functionality that requires communication with Sitecore, such as getting application details and calling SitecoreAI APIs, only works in the extension points.

Use logging - use logging liberally to trace code execution and inspect the data that Sitecore returns to your app.

Use localhost for UI development - localhost is ideal for developing your app's user interface. It loads faster and gives you more space on the screen. After iterating on the UI, preview your app in the extension point to test your interface in the context of Sitecore and make changes as needed.

Do not expose API keys or other secrets - the Marketplace SDK sets up secure communication with Sitecore, so your app should not need to expose Sitecore API keys. For other sensitive information, use environment variables.

Securely handle Sitecore data - if your app retrieves data from Sitecore, don't store it in an insecure location such as local storage.

Securely send data to Sitecore - if your app sends data to Sitecore, such as user input, validate and sanitize the data before sending it.

Initialize the SDK centrally - initialize the Marketplace SDK in a hook (as seen in the SDK quick start) or in React Context, to ensure that client is always available to those parts of your app that need it.

Initialize asynchronously - getMarketplaceClient is an asynchronous operation. Wait for it to complete and succeed before making queries mutations.

Make sure the SDK is initialized before making a query.

Use catch to handle potential errors.

Use console logs and warnings to trace code execution.

Use JavaScript optional chaining (a variable followed by a question mark) to check whether the property exists before trying to use it.

Use loading states to inform the user that something is happening. For example, disable a button or display a spinner.

Make sure the SDK is initialized before performing a mutation.

Use catch to handle potential errors.

Use console logs and warnings to trace code execution.

Consider whether the mutation requires parameters.

Use JavaScript optional chaining (a variable followed by a question mark) to check whether the property exists before trying to use it.

Use loading states to inform the user that something is happening. For example, disable a button or display a spinner.

Provide success and error messages to the user. For example, display a success toast after the SitecoreAI page is updated.