Milestone 2: Create a front-end app

📘

Note

To make the most of this tutorial, acquire our publicly available credentials to log in to a shared developer environment. (This is different from your personal developer trial account credentials that leads you to a private trial environment.)

Milestone overview

Goal

Create a front--end app to render the channel you created in milestone 1.

Estimated time to complete

5-10 minutes

Summary

In this milestone, you will take the Delivery API output for the channel you created in the previous milestone and use the Bloomreach SPA SDK to create your own frontend app that consumes the API output and renders the channel as a website.

📘

Note:

The code examples on this page are for a React-based front-end app. You can find Angular and Vue versions of the example app, as well as the full React app, in our Github repository.

A brief look at the Delivery API response

Bloomreach Content provides a Delivery API for front-end applications to retrieve channel and page data. The API's Pages endpoint provides all the data needed to render a particular page including any containers, components, and content items on that page.

The Pages endpoint for your channel's single page can be accessed at a URL of the following format, where [account_name] and [channel_name] should be replaced with the appropriate values:

https://[account_name].bloomreach.io/delivery/site/v1/channels/[channel_name]/pages

For example, if your account is named "trial-1234abcd" and you named your channel "getting started", the URL would be:

https://trial-1234abcd.bloomreach.io/delivery/site/v1/channels/getting-started/pages

Enter the API URL in your browser and have a brief look at the JSON response. It contains a lot of objects including the page and a flattened hierarchy of containers and components on the page. You don't have to understand everything yet at this point but can you match some of the objects in the JSON data with the page elements you see in the Experience manager preview?

📘

Note:

See Pages JSON Representation in the Delivery API reference documentation for a full description of the data format.

Create a front-end app

Now that you have created a channel and can retrieve a page from the Delivery API, it is time to create a front-end application that can consume the API response and render the page.

Watch the video below which will give you an overview on how to create a front-end app. This will be followed by commands that you need to use to create a front-end app below the video.

Create a new React app using the following command:

npx create-react-app my-react-content-app

To simplify integration with Javascript-based front-end applications, Bloomreach provides a Bloomreach SPA SDK that interacts transparently with the Delivery API and exposes a simplified and framework-agnostic interface to the API's data model. You'll be using the SDK to build up your front-end app.

Use the following command to install the SDK libraries as well as the axios library:

cd my-react-content-app
npm install @bloomreach/spa-sdk @bloomreach/react-sdk axios

Open src/App.js in your favorite editor and change its contents to the following:

src/App.js

import logo from './logo.svg';
import './App.css';
import axios from "axios";
import { BrPage } from "@bloomreach/react-sdk";
import { ContentPage } from "./components/ContentPage";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <BrPage configuration={{
          endpoint: 'https://developers.bloomreach.io/delivery/site/v1/channels/getting-started/pages',
          httpClient: axios
        }} mapping={{ ContentPage }}>
        </BrPage>
      </header>
    </div>
  );
}

export default App;

Study the code above and note the following:

• The BrPage element (imported from the SDK) is a placeholder in your front-end application which will render components in the page's JSON representation as returned by the Delivery API.
• The endpoint property specifies the URL of the Delivery API's Pages endpoint (make sure to update the URL to reflect your Bloomreach Content account!).
• The mapping property maps your React components their counterparts in the JSON representation.
• A Content component (which you will implement in a moment) is imported and mapped.

👍

Tip

Make sure to modify the endpoint URL in the code to reflect your Bloomreach Content account!

In the src folder, create a subfolder called components and inside it, create a file ContentPage.jsx with the contents below. This is will be the front-end implementation of the ContentPage component you added to the page in the previous milestone.

src/components/ContentPage.jsx

export function ContentPage({ component, page }) {

  const document = page.getDocument();

  const { title, content, introduction } = document.getData();

  return (
    <div>
      <h1>{title}</h1>
      <p>{introduction}</p>
      <div dangerouslySetInnerHTML={{ __html: content.value }} />
    </div>
  );
}

At this point, you are ready to launch your app using the following command:

npm start

This will load the app in your browser (at http://localhost:3000/) and if everything went well you should see the following page:

Congratulations, you created your first front-end app for Bloomreach Content!

Now go back into the Experience manager application and make some changes to the content (see Milestone 1 for instructions, don't forget to publish!) and refresh the front-end app to see the updated content.

Full code

Find the complete code for milestone 2 in React, Angular, and Vue in Github:

https://github.com/bloomreach/content-getting-started/tree/Milestone_2_Create_a_Frontend_App

Next

Now that you have created a channel and a front-end app, your next step is to set up a development project and configure it to use your front-end app to render the preview.