Sitecore JSS Series for Developer: How to Connect to Sitecore Instance (2 of 5)

I hope you had a pleasant time in the first tutorial. How to Setup Sitecore JSS.

In this tutorial, we will learn how to Connect our app built with Sitecore JSS to our Sitecore Instance

  1. How to setup Sitecore JSS
  2. How to connect to Sitecore Instance
  3. How to build a functioning Sitecore JSS app
  4. How to deploy Sitecore JSS app to Sitecore
  5. How to deploy to your Sitecore JSS site to Netlify with Sitelify

Now since we have setup our sample application, and created a configuration we can continue.

Let’s go ahead and deploy the configuration file to Sitecore.

jss deploy config
How to Connect to Sitecore Instance
Sitecore JSS deploying configuration
Deployed successfully

Now let’s deploy the app to Sitecore. More information about Sitecore JSS CLI

jss deploy app -c -d
JSS app build artifacts
You should receive a success message at the end

Let’s navigate to Content Editor and view our items in the Content Tree

Sitecore JSS app deployed to Sitecore Content Tree
Since my application is called “cv”, this is what I see in my Content Tree

At this time we should have learned the following:

  1. How to setup Sitecore Instance
  2. How to install Sitecore JSS
  3. How to generate and Deploy Configuration to Sitecore Instance
  4. How to deploy our sample application to Sitecore instance

In the next tutorial, we will start developing our application

If you found this post useful please share it. You can always comment on this post, or reach out to Sitecore Slack, or Twitter, or post a question Sitecore Stack Exchange.

Let’s move on to the next step How to build a functioning website with Sitecore JSS

Sitecore JSS Series for Developer: How to Setup JSS (1 of 5)

In this tutorial, we will take a look at how to set up a Sitecore JSS on our Sitecore instance.

The best way to start setting up JSS is to have a Sitecore instance that is compatible with Sitecore JSS services.

  1. How to setup Sitecore JSS
  2. How to connect to Sitecore Instance
  3. How to build a functioning Sitecore JSS app
  4. How to deploy Sitecore JSS app to Sitecore
  5. How to deploy to your Sitecore JSS site to Netlify with Sitelify

Here is a list of Downloads that you will need for this Tutorial

  • Sitecore 9.0 and Sitecore 9.1 is compatible with JSS 11.0 (release notes)
  • Download Sitecore Experience Platform – (link)
  • Download Sitecore JSS (JavaScript Services) – (link)

I am not going to go into details of setting up Sitecore, there are many videos out there how to set up Sitecore.

Once Sitecore is set up follow the directions on the official Sitecore JSS site on how to set up Server (https://jss.sitecore.com/docs/getting-started/jss-server-install#server-components-installation)

Sitecore 9 How to setup Sitecore JSS
Login to Sitecore, go to Desktop, Select Development Tools > Installation Wizard
Sitecore 9 How to setup Sitecore JSS
Select Already Downloaded package
Sitecore 9 How to setup Sitecore JSS
And Install it.
Sitecore 9 How to setup Sitecore JSS
Next Step as described on the official documentation site is to change binding redirect for Newtonsoft.Json

The last step is to verify if everything is working correctly, let’s get back to Sitecore and create an API key, and test it.

Sitecore > Launchpad > Desktop > Content Editor | Switch to core DB, and navigate to

/sitecore/system/Settings/Services/API Keys/jss-application

and create an API Key

Sitecore 9 How to setup Sitecore JSS: Create an API Key
Make sure you are in CORE db
Sitecore 9 How to setup Sitecore JSS: Validate Layout Service is working
Use this url to test:
https://yourhost/sitecore/api/layout/render/jss?item=/&sc_apikey={ItemID}

Next, we will have to set up our application to communicate with the Sitecore instance.

I imagine that at this time you Sitecore JSS CLI is installed, and a sample app has been created.

Sitecore 9 How to setup Sitecore JSS: JSS Setup
In order to generate scjssconfig.json | you need to run jss setup command (read more here)

Lets now proceed to the next tutorial on How to connect to Sitecore Instance

Sitecore JSS Series for Developer

While working on one of my personal projects, I decided to create a series of JSS Blogs, that will allow you to see and get going with the JSS really fast.

In this blog series, you will learn How to build a website with Sitecore JSS, utilizing React and Sitecore Experience Platform and deploying the site to Netlify using Sitelify.

I know it is a mouthful, but trust me at the end of this tutorial series, you will be able to build site quickly.

What tools and resources am I using:

  1. How to setup Sitecore JSS
  2. How to connect to Sitecore Instance
  3. How to build a functioning web site
  4. How to deploy Sitecore JSS app to Sitecore
  5. How to deploy to your Sitecore JSS site to Netlify with Sitelify

Useful JSS CLI commands:

jss start
jss deploy app -c -d
jss deploy app --acceptCertificate [cert]
jss deploy app -w
jss scaffold

Known Issues

Useful Resources

https://jss.sitecore.com – Official Documentation

Getting Started with JSS
Build your First JSS App

Lets start with How to setup Sitecore JSS