Demo Projects
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
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:
- Create a project using the Maven archetype.
- 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>
- Build and run your project:
$ mvn verify $ mvn -P cargo.run
-
Go to http://localhost:8080/essentials in your browser.
-
Enable enterprise features (see Image 1).
Image 1. Enable showing enterprise features -
Install the SPA Integration Demo feature (see Image 2).
Image 2. Install SPA Integration Demo feature - Stop the project and rebuild and restart it:
$ mvn verify $ mvn -P cargo.run
-
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).
Image 3. Example React Application in the Experience manager