Getting started with Sitecore JSS

I have been working on a mega project using Sitecore JSS, it even got pushed to production since TP4.

Having said, I decided to start blogging about this awesome technology hopefully to give back to the community and to learn more through the process.

So let’s begin.

What is Sitecore JSS ?

Sitecore JSS is a way to develop JavaScript-based frontends with a Sitecore backend.

The official home of JSS is https://jss.sitecore.com, it’s a great resource for getting started I will try not to repeat what is already described greatly over there.

Sitecore JSS, is an extension that works on sitecore 9.0.1 and later, JSS has two parts

1. Server side, installed on Sitecore
2. Client side, can actually be anything (that can work with http)

JSS server side is a normal Sitecore Package with the regular sitecore artifacts (dlls, Views, configs, and of course sitecore items). This is a closed source part and has different versions for each supported Sitecore backend

JSS client side is a mix of node npms and templates for React, Vue and Angular for web experiences, there is also an experimental template for React native for mobile. Not like the server side part, all the client side templates and tools are open-sourced here. https://github.com/Sitecore/jss

I will follow up with more posts to get into each side in much more details.

So now let’s explore what comes out of the box when running the very first set of commands

npm install -g @sitecore-jss/sitecore-jss-cli
jss create my-first-jss-app react
cd my-first-jss-app
jss start

And you have a running jss site and a folder ready to for your customizations as shown in these figures

For this blog post I will give a very brief introduction for the folders/files included in the default react template.

data contains lots of yaml files which are used for two purposes, first to be used as a source of data when running in disconnected mode (no sitecore backend), second are used to build the items that get transferred to sitecore on deploy/importing jss apps (more on this in a later post)

node_modules  any javascript developers knows what’s this

public holds all the public assets e.g. (fav.ico and index.html files)

scripts since everything sitecore is super extensible, this folder has some helper scripts each having a separate role, (will describe each in a later post)

server when deployed to sitecore, the application takes advantage of Server Side Rendering SSR, this folder has the entry point and configuration for server side rendering

sitecore contains some secondary files that are not needed when working disconnected but are very important and define how things should work in sitecore when being deployed.

src this should be the main entry point for all the client side application code that gets to be compiled for the end result.

That’s all of this short fast post.