Team Name

E-Square-V

What was the topic given ?

For this year Hackathon 2022, the below topics were given,

• Best Addition to the Sitecore-MVP Site
  • https://github.com/Sitecore/MVP-Site
• Building an e-Commerce Minimum Viable Product to sell community T-Shirts
  • The Submission is expected to include the following,
    • Sitecore XM – Rendering Host (.net or jss)
    • Sitecore Send
    • Sitecore Order Cloud
  • Authentication is not required
  • Payment processing is not required
• Sitecore Command Line Interface CLI Plugin

What topic we chose and why ?

I chose the “Best Addition to the Sitecore-MVP” Site as my choice. It is because I have already played around it for sometime and wanted to add some ideas which is not there now. Also playing around dotnet core SDK is interesting 🙂

Let us see what we have done…!!!

What is the current limitation with MVP-Site?

The current MVP-Site is based on Sitecore 10.2, dotnet core Rendering SDK with Sitecore JSS Headless Service.

It does not offer to use Experience Edge with GraphQL queries to fetch the layout route data of the pages. So we came up with an idea to introduce some custom foundation layers that enabled the Sitecore MVP Site to connect with Sitecore Experience Edge.

Github Url:- https://github.com/Sitecore-Hackathon/2022-E-Square-V

How we resolve it ?

The below two additional foundation layers have been introduced to achieve this.

• CustomRenderingEngineMiddleware
• CustomGraphQLEdgeConnector

The new Foundation Layers in the Mvp-Site solution as below,

Current working behaviour

The following diagram depicts the current behaviour of the Sitecore MVP site.

New Approach with Sitecore Experience Edge

Additional Foundation Layers

Mvp.Foundation.CustomMiddleware.Rendering

This layer introduces a custom layout request handler to handle the layout requests between both the Experience Edge Endpoint and JSS Headless Service. This is based on the following setting in the appsettings.config of the rendering host project.

When the ‘UseExperienceEdgeEndpoint’ is set to true, then the Custom Layout Request handler will be making the GraphQL Layout requests to the Experience Edge endpoints with the help of the layer Mvp.Foundation.GraphQLEdgeConnector.Rendering.

If this setting is set to false, then it works as normal and uses JSS Headless service to get the layout response of the page.

This custom layout request handler has to be registered like below, in the rendering host project Startup.cs file.

You can find the full source code of this layer in the given github url above.

Mvp.Foundation.GraphQLEdgeConnector.Rendering

This is also one of the new custom foundation layer introduced to the Mvp site solution. This foundation layer is responsible to build the GraphQL queries and makes the GraphQL Layout requests to the Experience Edge endpoint with the help of the GraphQL Client.

It uses the below query to get the route data of the given page. This route data is then deserialized as SitecoreLayoutResponseContent and uses to instantiate a new object of type SitecoreLayoutResponse.

It uses the below setting where we can configure the ExperienceEdge endpoints in the renderinghost project.

You can find the full source code of this layer in the given github url above.

Please follow the readme file and run the solution in local to see this in action. 🙂

Happy Sitecoring….!!!