Getting Started with Sitecore JSS
Home

Getting Started with Sitecore JSS

Author: Ayoush Kohli | Categories: Design & Ux, Sitecore CMS, Personalization

With Sitecore JSS (JavaScript Services) introduced to developers over a year ago, I am sure you have had the chance to explore this feature and derive the most from it. If you haven’t yet explored it, here’s what you need to know to get started. Through this blog, I wish to highlight the simplest steps you can take to build a JSS project – your first JSS project. But, before we move to the steps, here’s an overview of this Sitecore feature.

JavaScript Services: An overview

JSS is a complete SDK (software development kit) that enables developers to build full-fledged solutions using Sitecore and modern JavaScript UI libraries and frameworks (React.js and Angular). You can develop applications by being completely disconnected from Sitecore and get started without even having Sitecore installed on your system. Sitecore is used as a Headless CMS that provides item presentation details as JSON. It offers end-end support for the Sitecore Experience Platform, including Experience Editor, Personalization, MV Testing and Tracking/Analytics.

Sitecore JavaScript Services
Image source: Google

The image above describes the Sitecore headless environment along with the new features included in Sitecore 9.

To elucidate this further, you can build your JSS project using either of the two ways: Code-first or Sitecore-first.

In the Code-first method,

  • Front-end Developers (FED) are disengaged from Sitecore. Sitecore structures are defined using the in-code component descriptors (manifest) and route data.

  • The Import process is used to generate Sitecore IA (including templates and rendering).

  • This method is particularly handy in building smaller projects, front-end led projects and micro-apps within a bigger website.

In the Sitecore-first method,

  • Developers create Sitecore IA instead of the Import process.

  • Developers provide the spec/contract to base the components and data on. FED remains disengaged from Sitecore in this method too.

  • Concurrent work is possible; you’d need to define the Contract right in the beginning.

  • This method is preferred for complex projects and by FEDs who do not have Sitecore expertise. It is also followed by organizations that want complete control over Sitecore IA.

Irrespective of the method you follow, the interesting part of building a JSS project is the flexibility and ease you enjoy while building apps – while being completely disconnected from Sitecore. In this, you build the app first and move it to Sitecore later. This also leaves scope for Sitecore to improvise on allowing the building of applications with JSS. Applications are passed on to Sitecore using JSS code-first services via the Command Line.

What is Headless Content Management?

For the starters, Headless is an architecture that follows the decoupled architecture system. This system allows the different components to remain completely autonomous and unaware of one another – this process is called physical decoupling in which the three components – Content Management, Content Delivery and Content Presentation are separated from one another.

headless content management
Image source: Google

Although the elements remain separated, the Headless architecture enables structural variations between the source and the target. Technically, in this system, a buffer is used to separate the program’s memory access from the execution functions.

Finally, before you start your JSS project ensure you have the following:

  • Sitecore XP 9.0 (Update-1 highly recommended)

  • Node JS Version 6.9 or higher

  • Npm version 5.7 or higher

Ensure that you have enabled the Layout Service. Layout Service is a presentation layer via API (JSON). It allows personalization, mv texting, tracking and capturing analytics. It is included in JSS and SXA.

Sitecore

The image above depicts a view of the Content Editor.

The site is ready and we should now be able to proceed towards JSS installation.

Let’s install Sitecore JSS

Download and introduce the accompanying two JSS server packages in Sitecore (using the package installer) from below:

https://dev.sitecore.net/Downloads/Sitecore_JavaScript_Services/90_Tech_Preview/Sitecore_JavaScript_Services_90_Tech_Preview_3.aspx

JSS project

Configuration

<add verb=“*“ path=“sitecorejss_media.ashx“ 

type=“Sitecore.JavaScriptServices.Media.MediaRequestHandler, 

Sitecore.JavaScriptServices.Media“

 name=“Sitecore.JavaScriptServices.Media.MediaRequestHandler“ />

<add name=”Sitecore.JavaScriptServices.Ship.ShipFilter” 

type=”Sitecore.JavaScriptServices.Ship.ShipFilter, Sitecore.JavaScriptServices.Ship” />

API Key

Make an API Key and note its Item ID; you’d need it while setting up the example application.

  • Log onto Sitecore and open the Desktop application.

  • Use the database core.

  • Open up the Content Editor and navigate to “/sitecore/system/Settings/Services/API Keys” and insert a new API key item.

  • Although you can give any name to the item, using the application name is recommended.

  • Specify * as value in AllowedControllers (displayed in the screenshot below)
physical decoupling

Record the Item ID of the API key – you’d require it in the Resulting stage.

Check that everything is working fine by visiting the link below

http://your-sitecore-instance/sitecore/api/layout/render/jss?item=/&sc_apikey={YOUR_API_KEY}.

This will produce the JSON result.

Download & test a Demo app

Check out the steps to build a simple React demo using JSS as shown below:

  • Pull the JSS Demo source files from https://github.com/Sitecore/jss/tree/master/samples/basic-sample-react

  • Go to IIS and add a ‘jssbasicapp’ as a new binding in IIS

  • Edit your host file (C:\Windows\System32\drivers\etc\hosts) and add the following: 127.0.0.1 JssBasicApp (To change the name of the app and other settings, you may change it to: jss-basic-app.config)

  • Access the Command Line option and locate the folder where your basic react sample is downloaded.

  • Next, Run: npm install, followed by Run: npm run setup, followed by Run: npm run deploy-config

Entering the above should display a prompt on your screen:

“Would you like to configure connection settings to a Sitecore instance?”

Answer by entering “Yes”.

Type in the name of your website’s folder and the host for your installed Sitecore instance.

If you encounter an issue, check if you have the required permissions to allow the script to run and/or copy files to your Sitecore instance.

  • Finally, enter Run: npm run start

Deploying the app to Sitecore

We are now ready to deploy the app to Sitecore and use real-time data.

Run: npm run deploy-codefirst

It will run on your local host.

Check its functioning by accessing your Sitecore instance. Open Content Editor and go to: /sitecore/content/JSSBasicApp. You should see something similar to the screenshot below:

install Sitecore JSS

To view the working in a real-life scenario, open \samples\basic-sample-react\src\app\components\Welcome.js from the folder where you installed the demo.

Any content that you’ll now add to the page will reflect on your site. To check, open Command Line and enter Run: npm run deploy-codefirst. Your localhost should reflect the changes.

That completes the process and your first JSS project!