Code a la Mode banner

Sitecore JavaScript Services (JSS) Sandbox

I am a Sitecore and JavaScript developer who is currently learning the Sitecore JavaScript Services (JSS) SDK. My goal is to build a small sandbox site where I can explore JSS features and try out the API. I want to take typical challenges that developers encounter on projects and explore how they are handled in the JSS world.

A log of my progress and what’s coming up ahead is outlined below.

Quick Start

My plan was to start out in disconnected mode, and then switch over to connected mode once I had the data modeling and presentation figured out, since I think this is the most likely workflow for JavaScript developers. So, I started by creating a new JSS React app by following the steps in the Quick Start | Sitecore JSS Documentation guide.

Customizing scaffolding of components

I continued forward in the documentation, and Build your first JSS component | Sitecore JSS Documentation taught me to use the jss scaffold command to generate new components. I was interested in learning how this command worked so that I could customize the component template to my style. This customization was straighforward to achieve, see the following post for details.

JSS - Customizing Scaffolding of Components

Mastering the manifest API

Building a Sitecore site requires designing components, routes, and custom route types based on the site’s content and UX requirements. In a traditional MVC implementation, this data modeling is done by creating items in the Sitecore tree. But in a JSS implementation, when using a disconnected, code-first workflow, this data modeling is done by passing data to JavaScript functions via the manifest API. The following post is a deep dive into understanding the manifest API.

JSS - Manifest API Demystified

Creating page types and displaying page-level fields

This post shows how I used the manifest API to create a custom route type, and how I built a component for rendering and editing route-level content.

JSS - Creating Custom Routes and Displaying Route-Level Fields in Components

Going connected

Similar to disconnected mode, connected development mode also runs your JSS app on a local server. The difference is that in disconnected mode the app is hydrated with content from yaml/json files, but in connected mode the app is hydrated with content from Sitecore.

To run connected mode, I needed to deploy my app to Sitecore, which did not go smoothly. This post covers the errors I experienced and how I solved them.

JSS - Troubleshooting Errors of Going Connected

Externalizing reusable JSS components into a library

Component reuse is an important subject for developers. As I was building structural grid components for my JSS app, I thought, “all projects need grid components, so is it possible to package these up for reuse?” So I set out to create a POC of the idea. This post shares how I published JSS components as an npm package that can be imported into other JSS projects.

JSS - How to Publish JSS Components as NPM Packages

Yassss, the fun stuff is next

  • Trying out GraphQL
  • Component/animation libraries
  • Adding a theme

More coming soon!