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 here.
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.
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 straightforward to achieve, see the following post for details.
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-firstworkflow, 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.
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
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.
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.