Our Blog

24

Jun

Using Modern JavaScript frameworks with Sitecore JSS

The Sitecore JavaScript Services (JSS) is a complete SDK for running modern JavaScript applications within a Sitecore website, supporting the major UI frameworks (React, Angular, Vue) and allowing front end developers to work headless (i.e. without a running Sitecore instance).

Sitecore JSS

There is a lot of flexibility when using the Sitecore JSS, and its key features are: 

  • Server-side rendering (for improved performance and SEO)
  • Command line interface for change deployment and getting up and running quickly
  • Import service for deploying templates, etc to Sitecore from code
  • Headless rendering allowing you to develop and test components without Sitecore running
  • Uses a Watch to hot load changes
  • Support for standard front end developer tools such as Visual Studio Code, npm, webpack
  • Full support for Sitecore fields and placeholders (including rendering in Experience Editor)
  • Command line tools production build option to automatically optimise the JavaScript assets
  • Create Sitecore items using YML (e.g. for testing)
  • Query Sitecore content using either the GraphQL or Rest APIs

Before getting started you will need the following: 

I’m going to cover two different approaches to implement React and JSS in your Sitecore website. 

Code First

This approach is used to create an entire website using JavaScript and JSS. All Sitecore content (templates, placeholders, renderings, pages, etc) are defined within your JS solution, and are deployed to your Sitecore instance. An instance of Node JS then serves this up to client machines.

This would be ideal for small, JavaScript heavy micro-sites (e.g. brochure style sites). This is especially true if the team is more comfortable with developing in React rather than Sitecore.

In this example “JssReactWeb” is a full website, built purely in React:

For a good template for starting your solution, see here for a full example with instructions.

JavaScript Renderings

This approach is used to implement a JSS component as a Rendering within an existing Sitecore MVC website.

This is ideal for existing Sitecore implementations that need a single custom JavaScript component rendered on the page (e.g. a graphically rich search function). Templates and Layouts are created in the traditional manner within Sitecore.

Many of the benefits of the code first approach still apply:

  • Supports testing the components without Sitecore running
  • Can be setup with dummy test data in YML format
  • Supports server-side rendering of JavaScript for improved performance and SEO support
  • Sitecore Command Line Tool works the same way for build and deployment.

There are some caveats:

  • No code first implementation for creating the Sitecore templates/renderings (this must be done manually)
  • Performance may become an issue if you have many different JavaScript renderings on the same page
  • The recommendation is to keep it under two individual renderings

Note that Sitecore are currently calling this mode experimental, so read the documentation before rolling this out to a Production site.

See these following links for full example and instructions. This is a good template for starting your solution with:

Posted by: Patrick Stysiak, Senior Consultant, Enterprise Solutions | 24 June 2019

Tags: CMS, sitecore


Top Rated Posts

Blog archive

Stay up to date with all insights from the Empired blog