Content Saas | Learning to walk with Bloomreach content SaaS
Tags: bloomreach, frontend, brxmsaas
Published: 2023-05-19 12:36:39

## Blogs to enjoy before this one

This is Blog number 2 of what I hope will become a _Content Saas | Learning to_ series.
As such, to get a better idea of where we are, you should at least glance at the _Content SaaS | Learning to Crawl with Bloomreach Content SaaS_ Blog.
If any questions come up during this blog, you can check the documentation website or the blog mentioned above.

## What will be covered in this blog

So, you have access to **Bloomreach Content SaaS** and have created a couple of documents and pages. But how do we display something on that page? What if we want to create something a bit more costume?
In this blog, we'll continue working on a fully integrated website and we'll answer the above questions. 
We'll start by customizing the **Blog page** that we created on the previous Blog post. 

## Learning to walk | How I learned to add components to pages

After you've logged in to your instance of **Bloomreach Content SaaS** navigate to the **Experience Manager tab**.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wxiobfc9hb4vz8zsdbz2.jpeg)

Navigate to the Blog Page. You can do this via the Menu item we created last time or via the **Sitemap And Components Button**.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/majyz3tegub6z8mn7td9.jpeg)

Now that we're on the Blog page, we can proceed to add an already existing **Component** to the page.
But what is a **Component**? A **Component** is just a part of the website that can be reused as desired. For example, we could use a Banner with an image and a Title as a **Component**. 

**Components** are added to **Containers**. 
You can view all containers on a page by clicking the **Show Components outlines and content Button** button.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o2o7a4fizca0hoah1edx.jpeg)

To add a **Component** to the page, click on the **Sitemap and Components button**. This will display all the Sitemap Items and all the Components. Click on the Component button.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ot54a0f3h2jrewj1myh0.png)

This shows us a list of all available Components, be it **Page specific Components** or **Shared Components**.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fvc7rca4jdtu2d84dxmw.png)

The only difference between **Page Specific Components** and **Shared components** is the way they retrieve the information to display. 

**Page Specific Components** receive arguments directly in the component. This is more direct, but it forces you to rewrite the same information if you want to have the same component with the same fields.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6xfbl6sfj2uw9z4piyxo.png)

**Shared Components** require you to provide a document with all the information.
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yh2c1us6cjyf87l0j35z.png)

For now, let's simply add a ** Reference SPA Title & text ** single page component to the main container. You can give whatever values you want.
This is the main container as you can see via the name.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x3tmydpu3ssa0s8lzw2f.png)

The Page should now look something like this.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hlhfd6a3hzfsvwti4nmb.png)

Then, we click on the components tab.
 

## Learning to walk | How I learned to create my own components
  
As you might have noticed, there's a limited amount of Components and they can't possibly cover all possible use cases. 
This is why **Bloomreach Content SaaS** enables you to create costume components with virtually unlimited possibilites. From the most basic of components to the most complex.

To create Components, simply click on the **Site development** tab.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k4iuzc7c9omer8idoubx.png)

Then, we click on the components tab.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7t1ezjth28rtcfo8h3eu.png)

And follow by clicking the **+Components** Button.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bfifdhvfxd0vxr38cce9.png)

This will show you a tab with a lot of different fields.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/74211bohh3hsntujujzo.png)
 
The **Display Name** defines the name that will be displayed in the **Sitemap And Components** tab. 
The ctype field allows us to define the Component Name that the frontend will work refer to.

The **Extends** field defines what type of component we are going to create. 
There are  3 choices for the **Extends** field.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bfirzoga40h1rp7ib081.png)

The **base/component** field allows us to add a simple component without much background logic.

The ** base/menu** field allows us to create an extra menu component that can be used.

The **base/query** field allows the component to perform queries in the background.


For now, we will be using the **base/component**.
Fill in the fields with the following values and then click the **Create** button.


The base/component field allows us to add a simple component without much background logic.

Now, navigate to the Properties of the newly created component and click the **+ Property Button**.

We will continue by adding a single Title property. This will be used in the frontend to display some text.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g697v1mm4kt5ijrcf8i5.png)


We've just created our first component. Currently, it's very simple, but we'll continue to iterate over this component in the following blogs.

Now, if you go back to the Experience Manager, you'll see the component is now available.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rdgmpfa0owb5pj9x8o4i.png)

Add it to the **Right Container** on the Blogs page. You'll find that while the component is added you won't see anything.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j7edmeawu6r8rh4twomp.png)
 
This is okay for now and will be addressed in the next chapter.

## Learning to walk | How I learned to develop the front-end for my own components

So far, we've managed to customize the Blogs page with some pre-existing components and even create our very own costume component. 
Now, all that's missing, is adding some frontend logic to the just created component.

First thing, we need to connect our local frontend with the **Bloomreach Content SaaS** environment.
In this Blog, we are using https://github.com/bloomreach/bloomreach-reference-spa. 
You might be using something different and that's okay. 
Just make sure to connect the frontend correctly.

In the .env file quickly change the **NEXT_PUBLIC_BRXM_ENDPOINT** to connect to your environment. 
It should be something like this:


```
NEXT_PUBLIC_BRXM_ENDPOINT=https://<context-path>/delivery/site/v1/channels/<channel>/pages
```

Finally, in your channel settings make sure to point to the localhost url!

Now that we've set up the frontend, we need to create a component with the exact same name as the component we created.

In the React SPA project, we simply create the component folder in the components folder.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kr748dnb93bpqtpz4dkj.png)


Then, we simply start to write the frontend code.

```
import React from 'react';
import { ContainerItem, getContainerItemContent } from '@bloomreach/spa-sdk';
import { BrProps } from '@bloomreach/react-sdk';

export function AllBlogsComponent({ component, page }: BrProps<ContainerItem>): React.ReactElement | null {
  if (!component || !page) { return null; }

  if (component.isHidden()) {
    return page.isPreview() ? <div /> : null;
  }

  const { title:parameterTitle } = component.getParameters();

  return (
    <div>
      {parameterTitle && <h1>{parameterTitle}</h1>}
    </div>
  );
}
```

And finally, we export it in `index.ts`

```
export { AllBlogsComponent } from './AllBlogsComponent';
```

Then, we simply add the export to the `App.ts` and `index.ts.` 


The final result will look like this.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3v3ibnt2ghqzfut2424u.png)

## Conclusions

Congratulations!

Over this blog, we managed to customize the Blogs page with a title and text and we've managed to even create our custom component with whatever frontend code we want. 
In the next blog, we will continue by improving the Blog page and further adding complexity to the Component we just created.