How to setup JavaScript Services (JSS) for Sitecore 9

Sitecore JavaScript Services (JSS) allows frontend developers to use modern UI frameworks (eg. React.js) without loosing access to the whole Sitecore Experience Plattform when implementing UI’s for Sitecore implementations.

I had quite some problems when I first set up the Sitecore JavaScript Services. Often I was stuck in errors, for which I didn’t find a fast solution on Google. That’s why I decided to write this blogpost with a list of all the steps to take to setup an environment to test this promising technology.

Most of these steps are collected out of the offical JSS documentation.

Installation

• Install Sitecore 9.0.1 rev. 171219
• Download the JSS server packages from dev.sitecore.net. Get the following .zip files and then install them with the Sitecore Installation Wizard:
  Sitecore JavaScript Services Tech Preview Server 9.0.1 rev. 180412.zip
  and
  Sitecore JavaScript Services Tech Preview Infrastructure 9.0.1 rev. 180412.zip

Configuration

Open the Web.config in the website root of your sitecore installation and make the following changes.

• add line 7 from the example below
• add line 11 from the example below
• set debug=”true” on line 17 in the example below (only needed if you want to enable the GraphQL GUI)

API Key Creation

• Open Sitecore Backend and switch to core database.
• Go to /sitecore/system/Settings/Services/API Keys in the content tree and create a new API Key

• Fill the field AllowedControllers with *
• Fill the field CORS Origins with *

• Note the Item GUID (for example: {64E97354-DC2A-4505-A3DC-1E42CEC1AF42}) of the API Key Item. This is the API Key for JSS.

Verify JSS is working

Open this url http://{YOUR HOST}/sitecore/api/layout/render/jss?item=/&sc_apikey={YOUR API KEY}. You should get a result similar to this:

Now you are ready — What’s next?

When you get the above response you are done with the setup of JSS and can continue playing around with the examples from the official JSS documentation or you follow my next guide which shows the setup of the GraphQL example and GUI interface.

Here is my guide to setup GraphQL for Sitecore.

Thanks for reading! Please leave some claps and a comment on how the setup did work for you.