Connect Local Reference SPA with brX GraphQL Service - Bloomreach Experience - Headless Digital Experience Platform

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 checkout the latest tag revision available when the brX Content 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 brX Content 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 brX 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.

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?