Integration into Spark App

Last updated 15 days ago

Learn how to integrate Campaigns into the Spark App.

After learning the basics of Getting Started and how to stitch the campaign and the CoreMedia content schema together, this page will give an overview on how we integrated CoreMedia Campaigns into the open-source example React app called Spark.

The Spark app will fetch and render Campaign data on content pages, category pages, and product detail pages.

Prerequisites

To follow this tutorial, you need:

Since the release v2301.0.0 of Spark for CoreMedia Content Cloud v11 - 2301.1, the app supports campaigns out of the box.

Configuration

The GraphQL stitching server in the Spark workspace needs one environment variable COREMEDIA_ENDPOINT, and COREMEDIA_CLOUD_ACCESS_TOKEN, if you want to connect to a protected CoreMedia Content Cloud instance.

With CoreMedia Campaigns, you need to add two more variables to the stitching server and one for the Spark app itself.

Stitching Server

Spark App

  • VITE_CAMPAIGN_ENABLED="true"

A locally started spark app is automatically running in the preview mode. Therefore, you need to use your campaigns preview token for authentication. Otherwise, add another environment variable VITE_PREVIEW=false.

See example .env file for more details.

Running the App

After the configuration, you should be able to start the app via pnpm start. This command should start three components, a commerce mocking server, the stitching server, and the React app called Spark. Open the URL http://localhost:5173/calista/ in the browser.

screenshot spark homepage

If you have added a campaign to the hero slot of the homepage, it should be displayed above the wide "fashion trends this summer" banner.

Concepts

The base concepts have been already described in the previous guides. A detailed description of the integration can be found in the documentation of the spark app: https://coremedia.github.io/coremedia-headless-client-react/docs/

Copyright © 2024 CoreMedia GmbH, CoreMedia Corporation. All Rights Reserved.