Configure HST for SPA SDK - Bloomreach Experience - Open Source CMS

Configure HST for SPA SDK

This documentation applies to Bloomreach Experience Manager 14.2.1 and newer.

Introduction

Goal

Configure the Bloomreach Experience Manager delivery tier (HST) for SPA integration using the SPA SDK.

Background

Bloomreach Experience Manager supports SPA frontend integration through the Page Model API and the SPA Integration SDKs.

This type of integration requires some delivery tier configuration:

  • The Page Model API must be enabled and accessible by the SPA.
  • The Experience manager must delegate page rendering to the SPA.

Use the Console to perform the configuration step described on this page.

Configuration

Configure a Virtual Host for the Page Model API and Cross-Origin Access

To enable the Page Model API for a virtual host:

  • On the mount node, set the hst:pagemodelapi String property to 'resourceapi'.

To enable cross-origin access from an external SPA to the Page Model API:

  • On the mount node, add the value 'Access-Control-Allow-Origin: https://www.example.com' to the multi-valued String property hst:responseheaders (replace 'https://www.example.com' with the actual URL of the SPA).

Example:

/hst:myproject/hst:hosts/dev-localhost/localhost:
  jcr:primaryType: hst:virtualhost
  /hst:root:
    jcr:primaryType: hst:mount
    hst:homepage: root
    hst:mountpoint: /hst:myproject/hst:sites/myproject
    hst:pagemodelapi: resourceapi
    hst:responseheaders: ['Access-Control-Allow-Origin: https://www.example.com']
For more cross-origin access control options, such as allowing multiple origins, see Configure Page Model API (section 'Configure CORS Response Headers').

Configure a Channel for Cross-Origin Resource Loading

To enable rendering of a channel in the Experience manager by an external SPA:

  • On the channel's hst:channelinfo node, set the String property org.hippoecm.hst.configuration.channel.PreviewURLChannelInfo_url to the URL of the SPA, e.g. 'http://localhost:3000'.

Example:

/hst:myproject/hst:configurations/myproject/hst:workspace/hst:channel/hst:channelinfo:
  jcr:primaryType: hst:channelinfo
  org.hippoecm.hst.configuration.channel.PreviewURLChannelInfo_url: http://localhost:3000
Did you find this page helpful?
How could this documentation serve you better?
On this page
    Did you find this page helpful?
    How could this documentation serve you better?