Connect Local Reference SPA with brX GraphQL Service

Where to find the Reference SPA repository?

The Reference SPA repository is publicly hosted on the official Bloomreach GitHub page. Please ensure to check out the latest tag revision available when the Bloomreach Headless Experience Manager instance has been provisioned.  

How to set up the Reference SPA locally?

Please follow the README.md instructions included with Reference SPA repository.

How to configure the Reference SPA with a provisioned GraphQL Service?

The Reference SPA fetches the page definition from the Bloomreach Headless Experience Manager instance via the Delivery API's Pages endpoint. The local Reference SPA configuration includes the Pages endpoint URL, like the following:

REACT_APP_BRXM_ENDPOINT=https://<account_name>.bloomreach.io/delivery/site/v1/channels/brxsaas/pages

In this example, the Reference SPA reads - by default - the page definition from the brxsaas channel. The JSON representation of each page also includes the channel properties.  

Channel-specific properties can be configured via the Experience manager app. Among the others, site editors can specify the brX GraphQL Service base URL property. Below you can find an example:

In most of the cases the brX GraphQL Service is publicly available at http://graphql.<account_name>.bloomreach.io, a sub-domain of the Bloomreach Content instance.

Once the channel settings have been saved and published, open a new browser tab and visit the URL specified as part of the Reference SPA configuration. You should see a new value for the graphql_baseurl property:

{
   "meta": { ... },
   "links": { ... },
   "channel":{
      "info":{
         "props":{
            "graphql_baseurl":"https://graphql.<account_name>.bloomreach.io",
            ...
         }
      }
   },
   "root": { ... },
   "document": { ... },
   "page": { ... }
}

The Reference SPA is now able to talk to the provisioned brX GraphQL Service.