HomeEngagementContentDiscoveryOther Resources

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 basic component including site configuration and frontend code.

### Estimated Time to Complete

10-20 minutes

### Summary

In this milestone, you will configure a new component for your channel using the [Site Management API](🔗) (or the _Site development_ app) and implement the frontend code to render that component. It will be a very minimalistic component with only one string property and no content.

In the video below, you can see a short demonstration of configuring a component through the Site Management API using [Postman](🔗):



To simplify things for your first time configuring a component, you'll be using the _Site development_ app, GUI layer on top of the Site Management API.

**Limitation:**

The _Site development_ app is currently in beta.

## Obtain an API Authorization Token

Before you can use the Site Management API, you need to obtain an API authorization token.

  1. In Bloomreach Content, navigate to _Setup > brXM API token management_.

  2. Click on the _+ API token_ button in the top right.

  3. Fill in a _Token name_, choose an _Expiration date_ (up to 1 month in the future), check the _Read_ and _Write_ checkboxes next to _Site Management API_, and click on _Create_.

  4. Copy the token to the clipboard or write it down. This is the only time it will be displayed.

**Note:**

See [API Authorization](🔗) for more information and detailed instructions with screenshots.

## Configure the Component Properties and Parameters

Open the _Site development_ app and select your development project.



You are now ready to make site configuration changes.

Select the _Components_ tab and open the _sample_ group:



Click on _+ Component_ and enter the following values:

  • _Display name_: "My Component" (this will automatically set _ID_ to "sample/my-component")

  • _extends:_ "base/component"

  • _ctype:_ "MyComponent"

You can leave the other fields blank.



Click _Create_ to add the component.

Once created, _My Component_ will automatically be selected.

Open the _Properties_ tabm click on _+ Property_, and select _New simple property_.



The _New simple property_ dialog will pop up.

Set the _name_ to "title", select "String" for _Value type_, and enter "My First Component!" for _defaultValue_.



Click on _Save_ to persist the new property.



If you prefer to use the Site Management API directly instead of the _Site development_ app, you can use the [Channel Component Operations](🔗) with a PUT request of the following URL:


Use the following payload:

Postman Collection
Bloomreach provides a [Postman collection](🔗) for the Site Management API to make working with the API easier for developers.
409 Conflict in Postman
If you use Postman to make the above PUT request, you may get a 409 response with the following error message:
**Component definition my-component not found, but a version identifier was provided**
In that case, Postman may have incorrectly set the `X-Resource-Version` header automatically. Remove it from your request and try again.
## Add the Component to the Page
Now that you have configured the component, you can already add it to the page in your channel.
Open your channel in the _Experience manager_ and make sure you have selected your development project in _For project_.
Before you can make changes to the page, it must be added to the development project. Open the _Page_ menu and choose _Add to project_:

Open the left drawer and select the _Components_ tab. "My Component" should be available in the library:

Click on _My Component_ to select it, then click inside the container on the page to add the component. Because you did not yet implement the component in your frontend app, you will see a text _Component "My Component" is not defined:_

Everything in the backend is now in place and you can move on to implementing the component in your frontend app.
## Implement the Frontend Code for the Component
In your frontend app, create a file `src/components/MyComponent.jsx` and implement the component as in the code below:
`src/components/MyComponent.jsx`

In `src/App.js`, import `MyComponent`:

And add `MyComponent` to the `mapping` property of the `BrPage` element:

Return to the _Experience manager_. You should now see the component's title property displayed. Click on the component to open the right drawer and edit the component properties. Try changing the _title_ property to see the preview update automatically.

Congratulations, you developed your first component for Bloomreach Content!
## Full Code
Find the complete code for milestone 4 in React, Angular, and Vue in Github:
<https://github.com/bloomreach/content-getting-started/tree/Milestone_4_Create_a_Component>
## Next
Now that you have some hands-on experience with basic Bloomreach Content development, you can dive into the developer documentation and learn about more advanced topics:
  • For a better understanding of the platform, read about its [High-Level Architecture](🔗) and the [concepts](🔗) used in development.
  • To learn more about site development, read about [content types](🔗), [site Configuration](🔗), and [Frontend Integration](🔗).
  • To get more hands-on experience, follow the tutorials to learn [About Bloomreach Content](🔗).