Sitecore JSS - Setup development environment (Disconnected and connected mode) with First App

The entire day i was busy with amazing JSS framework (Client side) of Sitecore. Well, it did not go smoothly i must say. I haven't got the latest license.xml (JSS requires license with JSS supports). So i manage the latest license first. Then i had to install Sitecore 9. It's mandatory to work with JSS (Sitecore 9 onwards). Again Installing Sitecore 9 is not easy i found and took couple of hours to make it successful. Last but not least, i stuck installing JSS server side component. It wasn't successful because of not working the Solr index properly. Then i had to fix that. Finally i see a application (JSS) running successfully both disconnected and connected mode. Let me explain the different mode first:

Disconnected and Connected mode: The terms itself self explanatory. The idea is, Front-end developers can work independently without Sitecore and they can also feed mock data on the component and this way they can work purely disconnected way. When they finish, they can deploy the changes to Sitecore and make their work connected with Sitecore. Then application will use real data (not mock data) instead. JSS has not only different mode supports. It has power to not rely on Sitecore developer to create backend items (Template, Rendering, Item etc). As soon as FE publishes the app, All necessary Sitecore items will be created automatically.

Install JSS: I like to code in "visual studio code". It's an amazing editor. Please install it (its free). Next important thing is to install latest node. You can check anytime to see if you already have it or not.

node -v

It will print the version of your installed node. Finally run the below command to install JSS

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

That's it. Now, JSS has support to use different popular client side framework to work with i.e (angular, react, vue). Lets create our first JSS app

jss create my-first-jss-app react

//since i like to anuglar that's why i used below

jss create my-first-jss-app angular

This will create a angular application named "my-first-jss-app".

JSS start

It will run that application in a browser and we can see the sample application. Now up-to this point, there is no need to have Sitecore in the machine.

I will explain the different modes and how we can create different components and combine them to a single page to achieve complex view later article. Lets see now how to publish the app inside Sitecore.

Install Server side Component: Install Sitecore (Download from dev.sitecore.net) 9.0 or onward. I am using Sitecore 9 update 2 with this example. Install is not straight forward. Please follow my previous article to install here. After that we need to install Sitecore Server side JSS component from here. After that goto "Sitecore Launchpad >> Desktop >> Development tools >> Installation wizard" to install JSS component. Please note, in order to support JSS with sitecore your license must complaints with it therefore you might require a latest license. Please contact Sitecore for this. After having JSS server side component installed, we are ready to deploy the application to Sitecore.

Verify JSS server side successfully install or not: Try opening this in a browser http://your-sitecore-instance/sitecore/api/layout/render/jss?item=/&sc_apikey=TEST. You should receive HTTP Error 400.0 - API key is not valid if it is working correctly.

Create API key: Open Content Editor in core database (adding "&sc_content=core" at the end of the URL while you are already in content editor will switch the database = core). Goto "System >> Settings >> Services >> API Keys" and create a new API key like below

Please note, it's not good practice to use "*" since it will allow all and we never use like that in production. After creating API key, please copy Item ID: "{DD5E8F16-4D8B-49CF-9426-50FCEF943D51}". It is now our key to use in JSS. Let's test again the below URL http://your-sitecore-instance/sitecore/api/layout/render/jss?item=/&sc_apikey={DD5E8F16-4D8B-49CF-9426-50FCEF943D51}. Now it will return JSON which means it works perfectly. We are ok to go with JSS application deployment with Sitecore

Now lets deploy our first app to sitecore. There are couple of steps involving with this:

Step 1. Configure your app's site and host name

Standard application template already has "sitecore\config\<appname>.config" file. Lets open this one and change the hostname and make sure it is accessible. In order to do this, we need to first add a host entry and then open Sitecore Application (IIS) >> Bindings and add this new host there. My case i used like below:

<site patch:before="site[@name='website']"inherits="website"name="my-first-jss-app-ang"hostName="local.angular"rootPath="/sitecore/content/my-first-jss-app-ang"startItem="/home"database="master" />

Please note, "local.angular" already defined in my host and iis bindings.

Step 2: Setup connection information

Run below command

jss setup

It will prompt you for the below informations:

>> Path of your sitecore website

>> Host name

>> API Key

>> Deployment secret (you can make it empty). Please allow all the inputs and proceed.

Step 3: Config deployment

After completing step 2, we already have a config file created. We need to deploy this config file first. We can run the below command to deploy the config file to Sitecore

jss deploy config

Step 4: App Deployment

Now we can start deploying the application by running the below command:

jss deploy app -c -d

Hope it will successfully deploy the app and now we are ready to test our application in Sitecore. In my environment i can test using "http://local.angular". Lets open content editor and see what's changes are there:

Now we can open experience editor as well and can change the content accordingly.

From the above image, We can also notice that it has created automatically the templates and the data definition as described in the app. I will explain that part in the later article.

In conclusion we can see how easy and convenient it is to work with JSS. Those who are familiar with react or Vue framework can also develop their way.

Arif