Demo Projects - Bloomreach Experience - Open Source CMS
06-12-2019

Demo Projects

Introduction

Goal

Run a Bloomreach Experience Manager SPA demo project.

Background

Bloomreach provides an example React app to demonstrate the Bloomreach SPA SDKs. To run the example React app, 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 the example React app, use one of the following two options:

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

Run Prebuilt Docker Image

If you want to run a prebuilt demo project you can use this example Docker image:

docker run --net=host bloomreach/xm-spa-example
Docker Desktop for Mac users should follow the special instructions in the Docker image readme.

Create Bloomreach Experience Manager Project

  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. Check http://localhost:8080/essentials/#/installed-features (see Image 3).
    Request to rebuild the project
    Image 3. Request to rebuild the project.

  9. Stop the project and rebuild and restart it:

    $ mvn verify
    $ mvn -P cargo.run
  10. The project is ready and the CMS can be accessed via http://localhost:8080/cms/.

Run Example React Application

Clone the repository, and build and run the example React application.

$ git clone https://code.onehippo.org/cms-community/bloomreach-spa-sdk.git
$ cd bloomreach-spa-sdk/examples/react-csr

Create a file called .env with the following contents:

PUBLIC_URL=http://localhost:3000
REACT_APP_LIVE_BR_BASE_URL=http://localhost:8080/site
REACT_APP_LIVE_SPA_BASE_URL=
REACT_APP_PREVIEW_BR_BASE_URL=http://localhost:8080/site/_cmsinternal
REACT_APP_PREVIEW_SPA_BASE_URL=/site/_cmsinternal?bloomreach-preview=true
See README.md for more information on the above configuration.

Run the React Single Page Application example project locally:

$ npm install
$ npm run build
$ npm run start
You can use npn run dev to run the app in development mode but due to a bug in React, it won't work inside the Experience manager. See SPA Integration Troubleshooting for more information.

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 4).

Example React application
Image 4. 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?