Demo Projects - Bloomreach Experience - Headless Digital Experience Platform
03-02-2021

Demo Projects

This feature is only available in Bloomreach Enterprise Edition.

Introduction

Goal

Run a Bloomreach Experience Manager SPA demo project.

Background

Bloomreach provides example SPAs to demonstrate the Bloomreach SPA SDKs. To run any of the example SPAs, you need a local Bloomreach Experience Manager instance with some configuration and demo content. 

To set up a local Bloomreach Experience Manager demo instance pre-configured for any of the example SPAs, use one of the following two options:

Once your Bloomreach Experience Manager instance is up and running, run the example SPA.

Run Prebuilt Docker Image

Please note that the Docker image may not have the latest Bloomreach Experience Manager release. If you need to use the latest release, please create a local Bloomreach Experience Manager project.

If you want to run a pre-built Bloomreach Experience Manager demo project you can use this example Docker image:

docker run -p 8080:8080 bloomreach/xm-spa-example

The CMS can be accessed via http://localhost:8080/cms/. Log in with the default username/password combination (admin/admin).

Create Bloomreach Experience Manager Project

Alternatively, you can set up a local Maven project as follows:

  1. Create a project using the Maven archetype.
  2. Add the SPA Demo Essentials plugin dependency to essentials/pom.xml:
    <dependency>
      <groupId>org.onehippo.cms7</groupId>
      <artifactId>hippo-essentials-plugin-spa-demo</artifactId>
      <version>${essentials.version}</version>
    </dependency>
    
  3. Build and run your project:
    $ mvn verify
    $ mvn -P cargo.run
    
  4. Go to http://localhost:8080/essentials in your browser.

  5. Enable enterprise features (see Image 1).
    Enable showing enterprise features
    Image 1. Enable showing enterprise features

  6. Install the SPA Integration Demo feature (see Image 2).
    Install SPA Integration Demo feature
    Image 2. Install SPA Integration Demo feature

  7. Stop the project and rebuild and restart it:
    $ mvn verify
    $ mvn -P cargo.run
  8. The project is ready and the CMS can be accessed via http://localhost:8080/cms/.

Run Example SPA

There are several different example SPAs, each demonstrating a different frontend framework. The instructions below are for the React CSR example SPA. To run one of the other apps, replace react-csr with the appropriate name.

Clone or download the latest brXM release from GitHub (https://github.com/bloomreach/brxm/releases).

Change to the directory containing example React application (assuming project root directory 'brxm'):

$ cd brxm/community/spa-sdk/examples/react-csr

Create a file called .env with the following contents:

REACT_APP_BRXM_ENDPOINT=http://localhost:8080/site/resourceapi

Run the React Single Page Application example project locally:

$ npm install
$ npm run dev

There is currently an issue with create-react-app that causes the following error when starting up the sample SPA:

TypeError: Cannot assign to read only property ‘jsx’ of object '#'

As a workaround, pin the typescript version to 4.0 using the following command:

npm install [email protected]~4.0

The demo React app will be accessible at http://localhost:3000/ and will consume the Page Model JSON API at http://localhost:8080/site/resourceapi/. The app will also be accessible as a channel in the Experience manager (see Image 3).

Example React application
Image 3. Example React Application in the Experience manager

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?