• Ramkumar Nambhi Krishnan Dhinakaran
• Elakkuvan Rajamani

JamStack - We know this buzzword for quite sometime and it's popular among only the Front Ender community. Currently there are no handy modules available for the Sitecore Backenders to play around this term "JamStacking".

Here we are unveiling a whole new approach of JamStacking a Sitecore website in a simpler way. Now the BE's can have same fun as FE's.

• Docker for Windows
• Visual Studio 2019
• .NET Core (>= v 3.1) and .NET Framework 4.8
• Netlify Account (To create & host Site)
• Valid Sitecore license
• Approx 40gb HD space

• Statiq.Framework - Custom Sitecore Page generation Pipeline - Statiq Framework
• NetlifySharp - Deployment to netfliy Site -
• StackExchangeRedis - Store & retrieve values in Redis InMemory Cache
• AngleSharp - HTMLDocument processing

• run ./init.ps1 -LicenseXmlPath 'Provide-your-Sitecore-Path-Along-with-License.xml-file'
• run ./up.ps1 (for the first time to build and start containers)
• run ./up.ps1 -SkipBuild (Just to run containers by skipping build)
• It will prompt for the login to sitecore. Login and accept the device verification
• Wait for the script to complete and open the CM, CD and rendering host sites
• To Stop the environment again
• run ./down.ps1 to stop containers

In 'Appsettings.json' provide below values under Foundation:GrapheNetor section,

After updating the configuration, run the site using ./up.ps1 -Skipbuild command.

• Add new or update contents in Sugcon Site
• Upon publishing - Pages that are updated gets generated automatically and it's published to Netlify Site

🏆 Live Site - Check this Site

The following diagram depicts the working behaviour of the approach

1. As you are seeing, the Content Authors will be editing the pages in Experience Editor which is supported by Rendering Host JSS Renderer
2. When there is a publish, the new updated content will be available for access via the Experience Edge Endpoint
3. The publish end will trigger the GeneratePage API call. This GeneratePages end point is written with set of predefined pipelines that gets executed one after another. The following are the two important pipelines with this approach,
   1. CopyAssets Pipeline
   2. Pages Pipeline

The following diagrams showes these pipelines and its different modulelists and modules in details.

These pipelines are working based on the behaviour of the Statiq framework pipelines and modules. You can find more info about them from here,

Statiq Pipelines and Modules

1. The primary functionality of this pipeline is to copy the different statiq assests of the website
2. Statiq assest like Favourite Icons, Jss, Css etc.,

This is the core pipelines of our approach and it has following different Modules Lists,

This is the first module list in the pages pipeline and has the following modules,

1. It queries all the pages of the given site
2. It has its own GraphQLSitePageService
3. Retrives only the Id, Path and Language of the page

1. It processes the pages one by one
2. It makes GraphQL Layout Request to the Experience Edge Endpoint to fetch the Layout Response of the given page
3. It takes only the Id and Language of the page as input params

It looks like below,

The ProcessPage module list is having below set of modules,

1. This binds the LayoutResponse of the page to the SitecoreRenderingContext
2. It uses custom ViewRenderer to render the page into a html document

1. It processes the images in the html document
2. It replaces the path of the images to the local output folder path

1. It downloads all the images
2. Both Sitecore images and external images

This ProcessPage module list looks like below,

This is the final module lists of this Pages pipeline and has the follwing module,

1. It writes the generated Html document into the local output folder.

The following are the Lighthouse report comparion of the Sitcore SUGCON site versus Static Netlify Site.

Here it is....!!!