Sitecore: A Headless Architecture by Richard Seal

22 September 2017
1009 Views

What is it’s all about?

You may be wondering what is Sitecore as a Headless Architecture. Well the basic meaning of sitecore as headless architecture is that we are going to decouple the presentation layer or view from the sitecore. We are not going to use the general renderings which are used to render the data in the form of general aspx or cshtml view. Yet I have ensured that the basic experience editor functionalities and the analytics related functionalities will work fine with this. It is quite fast and easy to understand.

I will be demonstrating on below approaches for making Sitecore as a Headless Architecture.

Integration of Sitecore with React.js to render our presentation layer instead of general cshtml or aspx view.

Exposing the Sitecore API Service so that we can access the content through apis and render the data.

Apart from these, there will also the Sitecore FXM which can be used but in that approach we cannot use the Sitecore Experience Editor Functionalities which is a very useful one so I am skipping the FXM part.

So, here I will initially demonstrate the first approach. Let’s start with the Sitecore.React + React.js + React.Net to make Sitecore Headless.

Before proceeding to the actual explanation, I am providing the base sample application and the “Sitecore.React” Module which is currently available on Github.

GitHub Link -> https://github.com/GuitarRich/sitecore.react.project

You can download the code from here and in the “SitecoreReactModule” Folder, you can download the “Sitecore.React” Module which will be used for creating React based rendering in the sitecore.

SITECORE WITH REACT

What is Sitecore.React?

Well basically Sitecore.React as from the name suggests is the integration of the Sitecore + React.js. React is a declarative, efficient, and flexible JavaScript library for building user interfaces. So, react will be used to integrate the presentation layer of the sitecore instead of using normal webforms and views. So, it basically the presentation layer from the sitecore.

Why Sitecore.React?

Imagine being able to engage a JavaScript developer on a Sitecore project, who just knows how to create components in react and not familiar with neither ASP.NET MVC nor WebForms. How cool would it be? The potential for that sort of setup is mind boggling to me.

Sitecore and React. How hard can it be?

React is not new to the .NET world, and ReactJS.NET already solves that problem beautifully. So basically it is the amalgamation of the React.Net and Sitecore.React.

This library lets you do something truly amazing:

Using ASP.NET Minification and Combination, you get JSX to JavaScript compilation on the web server. That’s very creative!

Server-side rendering allows pre-rendering of the initial state of your React components on the server. This not only makes the rendering faster, but should also provide a better SEO story, since the initial state will contain the content for your component.

So, as we know that React.js is the latest trend in the market and it is highly used these days. We will be using the below mentioned artifacts in our solution to setup Headless Architecture:

Sitecore.React Module

React.Net

React.js

I am assuming here that you know the basic solution setup for the sitecore. If you don’t know please visit (Solution Setup) for the basic solution setup and get the first hands on sitecore. So, after you are done with the base solution setup, there are series of steps which are going to perform. Let’s start with the steps:

Step 1:

After the basic solution setup we have install certain Nuget packages related to React.Net. The packages are:

React.Core

React.Web

React.Web.Mvc4

System.Web.Optimization.React

          Sitecore Headless

These are the packages you need to install in your solution. Moving on the next step…

Step 2:

After installation of the packages, there are certain pipelines and JSX engine which I have overridden to call the React view from the controller. So, you just need to add these pipelines in the solution as it is. The code is there so it is up to you that you can further extend it and wire them up. It basically includes the controller extensions and the JSX view engine which will be used to render the Jsx file.

Jsx file is basically the js file on which the React related code will be get written to render the data passed from the controller in the JSON format. JSX is a preprocessor step that adds XML syntax to JavaScript. You can definitely use React without JSX but JSX makes React a lot more elegant. Just like XML, JSX tags have a tag name, attributes, and children.

I have created a Controller Rendering namely ReactController which will return the React View and pass the data to the React Jsx view.

         Sitecore Headless

          Sitecore Headless

As you can see the basic architecture of the solution and the controller extension for the same.

Step 3:

Now we have the packages installed, react piplines we have included in the solution, we have also added a controller. Now we can write one ActionMethod on the controller to return the React Jsx view. Let’s add the code now.

          Sitecore Headless

Now as you can see from the image, I have added a method SampleReact. First I am getting the current item from the Rendering Context which will be set as the datasource in the rendering in sitecore. I will showcase that also moving further in this blog.

Now I have 2 fields on my item “Title” & “Text“. I am fetching the content of the both fields and storing it in a SampleItem Class object. The Sample Item Class will look something like this:

         Sitecore Headless

So, after creating the SampleItem, it is returning the item to the React View.

Step 4:

Now I have created a sample react view to bind the data which is sent by the controller to render it on the view. The placement of the sample view and the code for displaying the view.

          Sitecore Headless

As you can see I have kept the view in the views folder itself, so this basically the same legacy mvc way of storing the view. Moving on to the code:

          Sitecore Headless

It is basically a very simplified view but in the real practical scenario, it will be much more complex. So, here I am only setting the values which I have passed from the controller.

So uptill this step we have our work done on the solution. After the proper build and successfull publish we can now move to the sitecore part. So, moving on to the Sitecore part now:

Step 5:

So, the first step which we are goin to do in the sitecore is to install the “Sitecore.React” module in the sitecore. Just go to Start -> Development Tools -> Installation Wizard and install the Sitecore.React module. After the successful installation, verify the below shown items in sitecore.

         Sitecore Headless

In the templates section, you will find the “React Controller Rendering” and “React View Rendering“. From these templates, now on in further steps we will create the Renderings which is to be applied on the Item for rendering the React View.

Step 6:

In this step, we will now create a React Rendering from the templates shown in the previous step. We have to now create a new React Controller Rendering. For creating just right click the item and go to the “Insert From Template” option as shown:

          Sitecore Headless

As shown in the image, now you can see the added rendering.

         Sitecore Headless

Now we have define three parameters on the rendering.

Controller -> Your Custom Controller Name

ActionMethod -> Your Custom Action Method Name

JSX File Path -> File path for the JSX

         Sitecore Headless

Step 7:

So after creation of rendering, we are now left with creation of datasource for the rendering. Now to do this, just create a “Sample Item” from the sitecore’s default template. I have created one below the Home Node & populated the “Title” and “Text” field inside it. See the below image for reference:

          Sitecore Headless

Step 8:

Now the next step is to just put the rendering on any item and populate it with the datasource. I have put the rendering on Home Item and datasource is set as the “Sample Item” which we have just created in the previous step. See the image below:

         Sitecore Headless

As you can see I have set the datasource as the same item we have just created. Also the placeholder is “main”. I have created a custom Layout and created a placeholder on the same with the name “main”. You can refer this link for the initial setup of the layout (Basic Sitecore Setup).

 Step 9:

This is all which we need to do for setting this up. Now just publish the items, templates, renderings and you will be able to see the content on the same page.

Now if can see in the below image, I have opened the home page in experience editor. Now, the fields have been rendered on the page with the react view and another major benefit of this approach is that it is editable in sitecore also.

          Sitecore Headless

So, this is the first approach which is created for making Sitecore as a Headless Architecture.

 Advantages of Sitecore.React?

  • This is really fast approach and the rendering of the page is quite compartively faster than the old legacy method because the view is created and rendered on the client side. The presentation layer is now decoupled from the Sitecore.
  • Another benefit is that developers only need to pass the JSON or data in Items form as we have seen in this example and rest of the thing is rendered on the client side. So the integration of view with code effort is saved in this approach.
  • Also, the sitecore analytics and the rest of the functionalities of sitecore works gracefully with this approach and it will work for all those features.

So, this is the first approach which I have explained and will be posting the second approach soon. Till then you can work out on this approach laughing

Please get in touch with me if you have any queries. I will be very glad to respond your queries.

Blogged By : Richard Seal

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *