What is JSS and how do I get started with building a JSS app?

Question

I'm not 100% sure what JSS is and I want to experiment with some sample JSS apps and build a JSS app of my own.

Answer 1

What is JSS?

• JSS is an SDK - allows developers to build websites using JS frameworks (React, Angular, React Native & Vue)
• Sitecore is used as a Headless CMS - to provide the Sitecore item’s presentation details as JSON.
• It has Full support for the Sitecore Experience Platform - Experience Editor, Personalization, MV testing & Tracking / Analytics (via server-side rendering).
• Apps can be built entirely disconnected from Sitecore - then deployed to Sitecore later (Sitecore install not required)
• You can build your apps Code-first or Sitecore first depending on your requirements and experience.

Architecture

Integration & Data Flow

Release Process

• It is developed by Team X at Sitecore outside of the usual Sitecore release schedules.
• JSS Is currently in Tech Preview (v9)
• JSS Version 10 will be released with Sitecore with the release of Sitecore 9.1 and this will be the General Release so will be officially supported by Sitecore.

Pre-requisites

Ensure you have the following pre-requisites installed:

• Sitecore 9.x (with a Consumption based licence with JSS included)

• Node JS version 6.9 or above

• NPM version 5.7 or above or yarn

Installing JSS

• Download and install two jss server packages in sitecore:

  1) JSS Server Package https://dev.sitecore.net/~/media/AEB22B31C5F84BA2902B12E897F1316E.ashx

  2) Infrastructure Package https://dev.sitecore.net/~/media/E23F0D52EB1544228D89E57A6D7E0233.ashx (optional but needed to deploy your App to Sitecore)

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

• Apply this to the web.config at the bottom of the system.webServer/handlers section:

  <add verb="*" path="sitecorejss_media.ashx" type="Sitecore.JavaScriptServices.Media.MediaRequestHandler, Sitecore.JavaScriptServices.Media" name="Sitecore.JavaScriptServices.Media.MediaRequestHandler" />

• Apply this to the web.config inside the system.webServer/modules section:

  <add name="Sitecore.JavaScriptServices.Ship.ShipFilter" type="Sitecore.JavaScriptServices.Ship.ShipFilter, Sitecore.JavaScriptServices.Ship" />

• Add an API Key in the Core Database here :/sitecore/system/Settings/Services/API Keys

• Verify everything is working ok by going to: http://sitecore-host/sitecore/api/layout/render/jss?item=/&sc_apikey={YOUR_API_KEY}

There is more info on this here: https://jss.sitecore.net/#/setup/jss-server-install?id=jss-server-install

Running A Sample JSS App

This example is for the React Example App.

1. Add a new binding for ‘JssBasicAppReactWeb’ under sitecore in iis & your hosts file

2. Using command prompt run:

   npm install -g @sitecore-jss/sitecore-jss-cli

3. Choose a jss application template (we will use basic-sample-react)

4. Using command prompt run:

   jss create my-first-jss-app basic-sample-react jss start

5. Test the static site on: http://localhost:3001

6. Using command prompt run:

   jss setup - then follow setup steps

   jss deploy config Jss deploy package

7. Test the connected site on: http://JssBasicAppReactWeb

There is more info on this here: https://jss.sitecore.net/#/setup/quick-start-dev

Sample Template Apps

The sample apps can be found on Github here: https://github.com/Sitecore/jss

More Resources

• https://jss.sitecore.net - the official docs

• https://www.youtube.com/watch?v=qC5q0Z2GLAk&t=529s - a video of me talking about what JSS is, how it works and a demo of the install process etc (from the Sitecore Sessions organised by Woodrow Mercer)

• https://www.youtube.com/watch?v=vW57a02oHZ0 - a video I created taking you through the install process

• http://www.flux-digital.com/blog/getting-started-sitecore-jss/ - a blog post I wrote on Jss. The commands are for Tech Preview 1 so see above for the new commands for TP4. I will write a follow up for this soon.