Bloomreach

Bloomreach Documentation version

Developer Docs / Frontend Integration / Configure HST for SPA SDK

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 Delivery API and the SPA Integration SDKs.

This type of integration requires some delivery tier configuration:

  • The Delivery 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 Delivery API and Cross-Origin Access

To enable the Delivery 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 Delivery 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 Delivery 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

Preview URL Property Replacement

This feature is available since Bloomreach Experience Manager 14.3.3.

Optionally, the value of org.hippoecm.hst.configuration.channel.PreviewURLChannelInfo_url may contain property placeholders which will be replaced with the values of corresponding system properties or HST configuration properties (in that order of precedence).

For example:

http://${spa_url}?brxm=${pma_url}

If a property placeholder can't be resolved, a 404 is returned and a warning is logged that the preview URL can't be parsed.

To prevent this, you may specify default values as follows:

${spa_url:http://localhost:3000}?brxm=${pma_url:http://localhost:8080/site/api/resourceapi}

In the example above, in case there is no system property or HST configuration property for spa_url and/or pma_url, the value becomes:

http://localhost:3000?brxm=http://localhost:8080/site/api/resourceapi
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?