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?
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:
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:
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:
After the basic solution setup we have install certain Nuget packages related to React.Net. The packages are:
These are the packages you need to install in your solution. Moving on the next step…
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.
I have created a Controller Rendering namely ReactController which will return the React View and pass the data to the React Jsx view.
As you can see the basic architecture of the solution and the controller extension for the same.
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.
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:
So, after creating the SampleItem, it is returning the item to the React View.
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.
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:
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:
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.
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.
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:
As shown in the image, now you can see the added rendering.
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
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:
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:
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).
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.
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
Please get in touch with me if you have any queries. I will be very glad to respond your queries.
Blogged By : Richard Seal