Bare bones Sitecore JSS react application

In the last post of getting started with Sitecore JSS, I  worte a brief introduction on what is actually Sitecore JSS, decribed the server and client components and finally showed how to run the out of box react template. I also described briefly what comes with the default template in terms of folder but didn’t get into details of that.

In this post, I will build the simplest ever jss application without using the default template, and deploying it to Sitecore with the bare minimum, this will help to understand all the moving parts under the hood.

I will start of from facebook’s create react app template (which is also used as a base for the default jss react template, it’s kind of a standard for bootstrapping react apps nowadays).

Let’s create the app, if you don’t already have create-react-app cli installed, follow the instructions here.

npx create-react-app bare-bones-jss-app

This creates most of the work for us, now we have a react based application wired with some default settings, to see what you hae dne go into the folder and npm start, you will end up with localhost:3000, and the beautiful react nuclear logo spinning in place.

Our steps to accomplish are task is as follows:

1. Add the application/site configuration
2. Add the applicaition items and artifacts
3. Move the build folder (packaged project) to Sitecore root.

1- Adding a site configuration for Sitecore JSS

For Sitecore to recognize any site within it’s implementation, it needs to registered and configured appropriately.

From the default template /sitecore/config/app.config you will notice this description in the file

<!--
JSS Sitecore Configuration Patch File
This configuration file registers the JSS site with Sitecore,
and configures the Layout Service to work with it. 
Config patches need to be deployed to the Sitecore server.

Normally `jss deploy config` can do this for local development. 
To manually deploy, or to deploy via CI, this file can be placed in 
the `App_Config/Include` folder, or a subfolder of it, 
within the Sitecore site.
-->

So that’s what we are going to do, we will build it first then manually deploy it in the App_Config/Include folder. For the JSS sites/apps the minimum requirement is to have a configuration node for both a site and an application as follows:

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/" 
                xmlns:set="http://www.sitecore.net/xmlconfig/set/" 
                xmlns:role="http://www.sitecore.net/xmlconfig/role/">
  <sitecore>
    <sites>
      <site patch:before="site[@name='website']"
            inherits="website"
            name="bare-bones-jss-app"
            hostName="bare-bones.dev.local"
            rootPath="/sitecore/content/bare bones"
            startItem="/home"
            database="master" />
    </sites>
    <javaScriptServices>
      <apps>
        <app name="bare-bones-jss-app"
             sitecorePath="/sitecore/content/bare bones"
             useLanguageSpecificLayout="true"
             inherits="defaults"
        />
      </apps>
    </javaScriptServices>
  </sitecore>
</configuration>

Second step is to add the minimum artifacts to operate a Sitecore JSS site, which are basically :

1. An App
2. A route
3. A Layout

All JSS item templates are added into your instance after installing the JSS server update package, the highlighted portion are the out of the box templates, they are all placed under Foundation folder, to adhere to the Helix recommendation.

Now create your items, as shown

After adding your 3 items, make sure to attach the Layout to the route.

Third and Final step is to build and copy the output bundle of the create react app to the sitecore instance folder, by default jss apps live under root/dist/ which is configurable as most of the things in Sitecore.

Before building and copying, we just need to add Server Side Rendering support, since it is used by default in integrated mode and to add components in experience editor requires the server to return rendered HTML for it to find the component in.

Since it’s not the scope of this post to discuss SSR, I will not detail what was done/skipped, I just added a minimalistic server.js along with it’s webpack config, the full source code of this post is available here to examine and explore different files.

Finally, after stitching all the parts, the result is charming, we have a minimal JSS app with LayoutService enabled, and runs in the Experience Editor.

In later posts, I will try to build up bits and pieces until I achieve the default template, so I can learn along the way.

.