SDL Tridion sites 9 PCA with REACT - Part 2

In the previous post, we saw how to set up the project using Apollo Client, ReactJS and interact with Tridion Sites 9 PCA. We also build a new schema, Dynamic CT and published 3 components using the Dynamic CT in order to retrieve them via PCA (GraphQL).

In the last exercise, we rendered the list of Dynamic News Components on the Landing page. Today we are going to continue using the same code and build the Details page and later on will see the deployment process and how to deploy ReactJs App.

So, let's start with the News details page, we already created the landing page and while doing that we had sufficient information to get the DCP of that particular component. If you have noticed in the code or screenshot from my last blog the Href that I've created for each News and Article items contains the combination of ItemId and CT and we need that same combination to get the Component Presentation.

DCPs with ItemID-CT available on Landing Page

Here are the JSX and Graphql code to render the News details page

News Detail Page

Here is the News and Article Details page again not a very attractive UI 😊.

Details Page

Let's build the App and see how's the production-ready build looks like. The below commands build the deployment package after npm build we need to run serve -s from the build folder and this will spin the Website

 $ npm run build

 $ serve -s

Build Package

Final Output 

Final Build

The updated code is available on GitHub and in the next blog, we will see more features works until then.

Happy Coding and Keep Sharing !!!

SDL Tridion sites 9 PCA with REACT

Tridion sites 9 PCA is getting popular more and more every day, and today in this blog, we will be creating an app using Apollo Client to communicate with SDL Tridion GraphQL API. We will integrate Apollo Client with ReactJS, but you can use it with several other client platforms as well.

Setting Up The Project

To get started we first need to set up a new React project. The easiest way to do so is to use create-react-app. This script creates a new React project.

 npm install -g create-react-app react-graphql  
 cd react-graphql  
 npm start  

with this, you will have the default app up and running on port number 3000, This is initiating a new basic React project in the newly created project folder react-graphql. By using the npm start to command the live-reloading development web server is started and the output of the default React project can be accessed in the browser:

Default ReactJS

In order to work with GraphQL, we have to install Dependencies. The next step is to install the needed dependencies.

• apollo-boost: Package containing everything you need to set up Apollo Client
• react-apollo: View layer integration for React
• graphql-tag: Necessary for parsing your GraphQL queries
• graphql: Also parses your GraphQL queries

The installation of these dependencies can be done by using the following NPM command

 $ npm install apollo-boost react-apollo graphql-tag graphql  

Project Structure 

As you can see I've imported react-apollo in order to work with GraphQL. In today's demo, we will see how to get the Dynamic Component Presentation and reder the same in React based webapp. To start this I've created a new schema with Title and Description as content fields and used the default DXA standard Metadata Schema as well.

Based on this new schema I've created 3 new components and published them using Dynamic CT. They are now available via PCA.

3 DCPs for Demo Purpose

DCPs via GraphiQL

Next, is call PCA using Apollo Client and ReactJS and render the DCPs.

Here is the query to get all the DCPs to render them on the News and Article Landing page.

 const repoQuery = gql`  
  query  
 {  
  componentPresentations(namespaceId: 1, publicationId: 11, filter: {schema: {id: 789}}) {  
   edges {  
    cursor  
    node {  
     itemType  
     rawContent {  
      data  
     }  
    }  
   }  
  }  
 }  
 `  

Based on the query criteria we are getting 3 DCPs which is correct

PCA output

Next, Display the Data

Let's write some JSX to display the fetched data. I'm fetching/rendering the data from both Metadata and Content fields, just to test the feasibility/flexibility and syntax.

 class News extends Component {  
  render() {  
   console.log(this.props)  
   return (  
    <div>  
     <h2>News and Articles Landing Page</h2>   
     {  
      this.props.data.loading === true ? "Loading" :   
       this.props.data.componentPresentations.edges.map  
       (  
        data =>  
       <ul key={data.node.rawContent.data.Id}>  
       <li style={{fontWeight: 'bold'}}>  
         <a href={"newsdetails?ids="+data.node.rawContent.data.Id +  
          "&name="+data.node.rawContent.data.Content.title.replace(/[^a-zA-Z0-9]/g, '-')}>  
          {data.node.rawContent.data.Content.title}  
         </a>  
       </li>  
       <p>  
        {  
         data.node.rawContent.data.Metadata.metadata.description  
        }  
        </p>  
      </ul>  
       )  
     }  
    </div>  
   );  
  }  
 }  

And Finally, our News and Article Landing page with DCPs is ready, not the very attractive UI though 😊 

DCPs Rendering on ReactJS app

In the next blog, we will be creating News details page and will try to implement search and other features as well. 

Part -2 Create News detail page and Production Build

You can download the sample application from GitHub, don't forget to update the PCA URL 

Happy Coding and Keep Sharing !!!! 

Hybrid Architecture SDL WEB 8.5 and SDL Tridion Sites 9

Well, In my previous post we saw how we can use GraphQL with SDL WEB 8.5 by simply installing Tridion Sites 9 Content Service that will work isolated and read data from 8.5 Broker. But, this has some limitations I saw some difference in the Broker Database of 8.5 and Tridion 9.e:g The "Component Presentation" table has a new column CONTENT_ID in the Tridion 9 Broker. This field is not there in the 8.5 Broker and this caused an issue while accessing Dynamic Component Presentations using GraphQL.

To, sort any such issues which we might face, we discussed the new Hybrid approach where we will have the Tridion 9 Broker and State Store Database with Tridion 9 Services Discovery, Deployer, and Content service running parallelly with 8.5 CMS .

High-Level Architecture Diagram

1. Install Tridion 9 Broker and State_Store Database (As per the recommendation by SDL we need to install SQL Server 2016 SP2 or 2017).
2. Update storage configuration as per the new Tridion 9 DB details in the Tridion 9 Discovery, Deployer and Content service(These services could be on the same box or in a new) and then install the services.
3. After installation of service run the “java -jar discovery-registration.jar update” from discovery service config folder. This command will register the discovery service capabilities.
4. The above steps/command will set up the services for the content delivery environment.
5. Next is create a new topology manager in order to set the publishing
1. We need to keep 8.5 and Tridion 9 broker DB in sync. So that we can run existing  8.5 and at the same time we should be able to query Tridion 9 Broker DB using GraphQL.
2. We need targets that will publish to both the Brokers (e:g WEB8_Staging, Tridion9_Staging, WEB8_LIVE, and Tridion9_LIVE). This will keep the existing env. working and at the same time, we can use Graphql.
• WEB8_Staging will point WEB 8 Staging Discovery 
• Tridion9_Staging will point to Tridion 9 Staging Discovery
6. There is another advantage here, so when you MIGRATE from CM 8.5 to Tridion 9 you already have your Broker DB up-to-date, content delivery microservices are already working.

The above setup will let you continue with the 8.5 and it will also give us the privilege to use GraphQL as well.


Happy Coding and Keep Sharing !!!

SDL Tridion Sites 9 Content API GraphQL with SDL WEB 8.5

Recently, One of our customers requested this, can we have new SDL Tridion Sites 9 feature GraphQL in SDL WEB 8.5. They have the following questions before we can proceed to POC.

The client is very excited about this new GraphQL feature as this will bring lots of improvement in their existing implementation. So, they wanted to know can we have this new feature in 8.5.

1. Can the CD side be upgraded to Sites 9 to have the GraphQL API, but the CM be left on Web 8.5?
2. Can only the content microservice be updated to Sites 9 (while leaving the Broker and Deployer on 8.5) 
3. Broker and Deployer also have to upgrade to 9?

We also need to think about downtown while we do all these. 

We did some investigation and come up with this idea/approach that we are not going to upgrade anything here just to have the new Content API feature (GraphQL).

So, We decided to Install only the Tridion Sites 9 Content Microservice and this will read the data from existing WEB 8.5 broker DB. NOTE:- We are still running the 8.5 services here no upgrade yet on CM or CD side.

With this approach, we were able to deliver what the client was requested from us. Now they are running their existing site using 8.5 content delivery and parallelly they started planning on building apps using 8.5 broker data using Tridion sites 9 GraphQL API. 

It was an interesting POC.

WEB 8.5 Content Service

Tridion Sites 9 Content Service running on same ENV and hitting 8.5 Broker to fetch the data.

Happy Coding and Keep Sharing !!!

Cms Talk to Cms

The Value of website content

Content is what sets your website apart from the masses.The success of your website is determined primarily by its content .

The key to a successful website is having managed,relevant,clear and keyword-rich content . 

Why content is important ?

1. It makes your brand an authority 
• Quality content delivered on a regular basis makes your brand an authority
2. You get to know your customers
• Content ,when delivered through websites,social media allow for feedback.It means you can gauge your customers.
3. Generating content improve SEO
• Managed,relevant and keyword-rich content is very important for SEO.
4. Content add value 

Today we are going to see how we can manage,share our content between multiple CMS. The whole idea here is how we can share the content across multiple CMS.

High-Level Architecture diagram of CmsTalkToCms

Let's discuss the diagram

1. Point A
1. Here I have created a C# console based application which takes inputs from user and forward that request to business connector 
2. Inputs are like
• Read data from CMS A process it in a manner which is accepted by CMS B.
• Mentioned the type of the data (In case of Tridion schema and for Umbraco parent document type)
• Returns the count and details of the transaction.
• User authentication is done at this level.
2. Point B
1. Business connector is the core of this architecture.
1. It will consume all the input provide by the Client
2. Based on that it will first call the source CMS could be point (C) or (D) .
• Here we extract all the items which needs to share.
• Transform the data in a manner which is accepted by the destination CMS
• Once data transformation is done then we will call the destination CMS service which could be point (C) or (D).
• Service will validate the data 
• Finally data is pushed to destination CMS.
3. Destination service
1. Will also validate the data before performing CRUD operation
2. Service will check if any item in the list send by the source already exist
3. If yes will run update else create new item.
2. After all the data is either updated created or rejected the response will be send back to the business connector and business connector share that response with the client Point A.
3. Point C
1. I have created Custom web service .ASMX 
2. Using Umbraco.core DLL provided by Umbraco.
3. Using this DLL we can perform all the CRUD operations. 

   

   Point (C) Content Service used for CRUD operations 
4. Point D
1. Tridion core service is used for CRUD operations.
2. ISessionAwareCoreService is used to create the core service client.