Integration into Spark App
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:
-
Node.jsversion 18 -
pnpmversion 8 -
A CoreMedia Content Cloud account with CoreMedia Campaigns enabled
-
A clone of https://github.com/CoreMedia/coremedia-headless-client-react
-
Campaigns created for the english site Calista
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
-
CAMPAIGN_ENDPOINThas to be set tohttps://api.campaigns.coremedia.io/ -
CAMPAIGN_AUTHORIZATION_IDis your preview authorization id for the campaign service
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 |
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.
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/