Blog

What is the difference between Sitecore SXA and Sitecore JSS

There has been many questions during the Sitecore Symposium and it seem that people are confused and do not know the difference Sitecore SXA and Sitecore JSS.

So I will try to explain the difference between the two and when would you use either one of those.

First let’s try to define the two:

Sitecore SXA

The Sitecore® Experience Accelerator provides reusable, templated UX layouts and components to help you get up and running quickly.

Sitecore JSS

Sitecore JavaScript Services (JSS) is a complete SDK for JavaScript developers that enables you to build full-fledged solutions using Sitecore and modern JavaScript UI libraries and frameworks.

So Sitecore JSS is an SDK and Sitecore SXA is set of prebuilt components, templates and layouts.

Sitecore SXA will help you easily change page components using drag-and-drop functionality. Reuse pre-built components, templates, and layouts. Help your content teams create, edit, and deploy web content across channels in less time using fewer resources with the intuitive tools included.

Sitecore JSS will give you freedom to build headless sitecore applications, and continue using the Experience Editor and will let you use all of the Marketing Tools that Sitecore Experience Platform has to offer.

How each one of those is render?

Sitecore JSS works with using JavaScript (Node.js)

Sitecore SXA is working with MVC Renderings

So when you should utilize either one of those?

Since I am a big fan of Sitecore JSS I will recommend you to start with Sitecore JSS, and here is why:

  • Sitecore JSS is a completed SDK for JavaScript Developers
  • You can start your development without having Sitecore installed, which means your developers will not tell you that they are busy by installing Sitecore instance, they will start working on the application, which is referred to as Code-first Workflow
  • You would like to run your front end app on Linux, to save some cost
  • You want to decouple, and you want your Marketing Team to keep Sitecore Marketing Tools such as, A/B Testing, Analytics, Personalization etc.
  • You are looking for create a headless application
    • You want to build a PWA
    • You want to build an app for wearable device, IOT device, Kiosk and you want to manage it all from one place, and personalize all your Omni Channels.
    • You can choose between React, Angular, VUE, React Native and Svelte (not officially supported by Sitecore)

If you believe that none of this is any of the interest to you, then here is why you should use SXA:

  • Sitecore SXA is a component that needs to be installed on top of Sitecore
  • Toolbox – You have prebuilt components and layouts that you can reuse

So by now I hope you understand the different between the two, they are not competing against each other, because they are completely different ways of constructing websites.

One of them allows you to use Toolbox with prebuilt components, the other ones allows you to build a front end application that runs on NodeJS.

photo used: https://unsplash.com/@bdchu614

Headless Sitecore Commerce with Sitecore JSS – Part 2

In Part one https://mysitecore.blog/2019/09/27/wooli-headless-commerce-with-sitecore-jss-part-1/ we have covered how to install the Headless Sitecore Commerce Accelerator/StarterKit.

In part 2 I would like to cover how does Sitecore Commerce work with Sitecore JSS.

First let’s cover the communication from Storefront to the Sitecore with the help of the layout service we are able to display all the content as well as the placeholders.

Sitecore Commerce + Sitecore JSS

So static data is coming from the layout service and as you can see on the screenshot above we are able expand our Inspector and see the details.

Next lets go ahead and explore the items that are in the store, when we visit the site the request is being made to the retrieve /shop/Phones

sitecore/api/layout/render/jss?item=%2Fshop%2FPhones&sc_lang=en&sc_apikey={API_Key}
Sitecore Commerce + Sitecore JSS

And as you can see on the screenshot above you can see the route and placeholder information, as well as component names “Product List” and “Product Filters”

Also as you can see on the screenshot below Analytics cookie is present and interaction is being tracked “SC_ANALYTICS_GLOBAL_COOKIE”, so you can personalize your visitor’s experience.

Sitecore Commerce + Sitecore JSS

Also there is another call that is being made /apix/client/commerce/cart/get/ to check if there is anything in the cart, so this is the custom implementation. This is the communication between Storefront and Sitecore Commerce.

Next let’s go ahead and the item to the cart and process the order and see if it appears in the Sitecore Commerce.

Sitecore Commerce + Sitecore JSS

Here is the custom implementation of the add functionality, so you can explore the rest of the CartController in the Github Repo

https://github.com/epam/sitecore-headless-commerce-accelerator/blob/master/src/Feature/Checkout/code/Controllers/CartController.cs

Once we add the item to the Cart, lets visit the cart and see what calls are being made now:

Sitecore Commerce + Sitecore JSS

So we will have Layout Service “jss?item=cart”, that will display our components, and a custom api call “apix/client/commerce/cart/get” that will get what is in the cart.

Next we will checkout, enter the address and credit information and see if the order appears in Commerce.

Order has been submitted now. BTW Credit Card processing is handled by BrainTree

Sitecore Commerce + Sitecore JSS

So we log in into the Business Tools > Orders

Sitecore Commerce Orders

And search for our order “3TLMTCVUCP4DW0S5BOO6GHREX”

Sitecore Commerce + Sitecore JSS

We can see that the journey from Storefront has made it all the way to the Sitecore Commerce.

Sitecore Commerce + Sitecore JSS
Here is high level diagram of how Storefront interacts with Sitecore and Sitecore Commerce

If you have any questions please do not hesitate to reach out to me on twitter and or at the #sitecoreSYM in Orlando.

You can book a 30 minute session with me and Kelly at the Symposium 2019 in Orlando Nov 4th – 8th.

Headless Sitecore Commerce with Sitecore JSS – Part 1

In this blog series I will cover for you how you can create Headless Commerce Solution on the Sitecore Experience Platform by utilizing Sitecore JSS.

WOOLI has been in the EPAM lab since the JSS Technical Preview. So now EPAM is ready to share it with the Sitecore community, and that is simply great.

This is what you need in order to follow my tutorial:

  1. Sitecore Experience Commerce 9.1 (https://dev.sitecore.net/Downloads/Sitecore_Commerce/91/Sitecore_Experience_Commerce_91_Initial_Release.aspx)
  2. Sitecore JSS – 11.1.0 (https://dev.sitecore.net/Downloads/Sitecore_JavaScript_Services/120/Sitecore_JavaScript_Services_1200.aspx)
  3. NodeJS – 10.15.3 (https://nodejs.org/dist/v10.15.3/)
  4. WOOLI – https://github.com/epam/sitecore-headless-commerce-accelerator

First let’s start our Sitecore Instance and make sure that everything is operating and Commerce is loading and our certificates are in place.

Lets make sure that we can load Sitecore Commerce

Lets make sure that we can load Sitecore Content Editor

All Right now, is the fun time, let’s go ahead and install NODEJS and Sitecore JSS. Using choco lets install nodejs

choco install nodejs

What is Choco? It is a package manager for Windows. Here is how to get it.
https://chocolatey.org/docs/installation

Okay so by now we have node installed, let’s go ahead and install Sitecore JSS. If you don’t know how to install Sitecore JSS, here is the link to my other blog.

How to Install Sitecore JSS

So far everything was smooth. Make sure you are installing the JSS version that is compatible with XC 9.1.

And When you are creating an API Key, you need to be in the Master DB.

Now it is time for the easy task to build and deploy WOOLI to the Sitecore.

These are the following operation that you will need to perform in order to continue:

  1. Run npm install in the folder to install all the node_modules
  2. Add Nuget Packages Sources
  3. Restore Nuget Packages
  4. Execture scr/build.ps1

If you don’t do that, this is what you will get:

Make sure you add the appropriate Package Sources as it is highlighted in the repository readme

So once you run the build.ps1, all your code will build and deploy.

Lets Open the Content Editor and we will see Wooli has been deployed to our Sitecore Instance, where Sitecore Commerce is also installed.

Change the Catalog

Don’t forget to Rebuild Indexes

Make sure you have the appropriate bindings set up and load up http://wooli.local/

If you have any questions or problems reach out to me on Twitter or LinkedIn, or you can create an issue in GitHub, that will be the best way to do, you can be helping other as well https://github.com/epam/sitecore-headless-commerce-accelerator/issues

Stay tuned for the next blog about Headless Sitecore Commerce with Sitecore JSS

Sitecore SXA and JSS Datasource Location Fix

So many of you know that until 9.2 with JSS 12, there were some conflicts between SXA and JSS on the same environment, to be more specific they were not compatible.

So if you are using Sitecore 9.0.2 and JSS 11 and SXA 1.8 on the same environment, and you have created a Sitecore JSS site and then you had installed SXA on top of it. And now your content authors have to do extra work in order to add components to the page in the Experience Editor, they get extra steps now.

So your renderings are set up correctly (https://helix.sitecore.net/principles/layout/datasource-settings.html)

When you try to add component to a page, you select a component

and then you get prompted to create a component and give it name

But when you click to create it again pop-ups with a window to select a component and give it a name

Usually when you install something it should not break, but in my case a new pipeline was added.

Here is the compiled list of all the pipelines, that I see in the showConfig.aspx

ScriptedRenderingDataSourceRoots - [Cognifide.PowerShell]
GetDatasourceLocation - [Sitecore.XA.Foundation.LocalDatasources]
AddAdditionalTemplates - [Sitecore.XA.Foundation.LocalDatasources]
AddDatasourceLocations - [Sitecore.XA.Foundation.LocalDatasources]
RestrictFallbackDatasourceLocations - [Sitecore.XA.Foundation.Multisite]
SetFallbackDatasourceLocations - [Sitecore.Kernel]
GetDatasourceTemplate - [Sitecore.Kernel]
GetTemplatesForSelection - [Sitecore.Kernel]
CheckDialogState - [Sitecore.Kernel]
AddPageDataFolder - [Sitecore.XA.Foundation.LocalDatasources]
AddCompositePageDataFolder - [Sitecore.XA.Feature.Composites]
AddCompositePageDataFolder - [Sitecore.XA.Foundation.LocalDatasources]
GetDatasourceTemplate - [Sitecore.XA.Foundation.LocalDatasources]
ExtendGetDatasourceDialogUrl - [Sitecore.XA.Foundation.LocalDatasources]

The one that creates me the problem is this one “GetDatasourceTemplate

For the quick fix all you need to do is remove or disable the following file (SelectRenderingDatasource.xml) – location below

Before you delete anything important note this approach is not recommended as far as you want to use the SXA module itself. It will break SXA functionality.

After you install the SXA module, it overrides the logic for SelectRenderingDatasource in Website\sitecore\shell\override\Applications\Dialogs\SelectRenderingDatasource\SelectRenderingDatasource.xml (calling all other related logic). 

This will let you add the component to the page and then it will prompt you to give it a name

Sitecore JSS Series for Developer: How to deploy your Sitecore JSS app to Netlify with Sitelify (5 of 5)

In this last step, we will go ahead and deploy our web site to the Netlify with the help of Sitelify.

  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

What is Netlify?

Netlify is a service, that allows you to easily deploy and host your modern static websites and it is blazing fast. Deploy your site in 30 seconds.

  • Hosting Free
  • Continuous Deployment from Git
  • Serverless Functions

The first step lets go ahead and set up an account with Netlify, it is FREE, and create an access token.

Netlify Access Token
Save the token you will need later in the tutorial

What is Sitelify?

Sitelify brings your Sitecore sites built using Sitecore JavaScript Services (Sitecore JSS) to Netlify, quickly and easily.

To get more info about Sitelify, please visit the website directly: https://sitelify.io/

You will need to acquire an Access Token in order to deploy the site to the Netlify. Request Access

Official Documentation > https://docs.sitelify.io/docs/getting-started

The first step to do install Sitelify Manager

Sitecore Launchpad with Sitelify Manager

Next, we will open Altola.Sitelify.config that has been added to our App_Config

Altola.Sitelify.config

Please follow the official documentation, https://docs.sitelify.io since this blog post, might not be updated with the latest documentation.

Once you generated the Netlify token and obtained a Sitelify Access Token, you can enter them in the config shows above, save the file, restart the instance.

Sitelify

After creating a new site and naming it JSS Blog on Sitelify, we need to create a Netlify site, where we will be deploying our JSS site.

Sitelify
Click on Create in order to create a Netlify site
Create a Netlify site with Sitelify

Next, we will Deploy the web site to Netlify.

Sitelify Manager
Deploy to Netlify with Sitelify
And literally after few seconds
Preview Sitecore JSS application with Sitelify after deployment
We can already preview the website in our browser.

Now let’s view the website from the Netlfiy.

Netlify Dashboard
As you can see the name of the application is the same, in Sitecore as well as in Netlify dashboard, all of this is possible with Sitelify.

Now you see your site on the web. You can visit either one of the links:

Sitecore JSS application build with React

Congratulations, you have completed your journey with Sitecore JSS!

You have a web site running on Netlify that was built with Sitecore JSS. Share your work and don’t forget to tweet about it, and add hashtag #sitecoreJSS

Sitecore JSS Series for Developer: How to deploy Sitecore JSS app to Sitecore (4 of 5)

If you have been following every step of the way until now, you should have no problem with deploying your site to the Sitecore.

In this tutorial, we will learn how to deploy Sitecore JSS application to Sitecore Experience Platform.

  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

Since I am doing all of my development on macOS I would like to double check that my instance is up, and I am able to open the root folder with my Sitecore instance.

Sitecore Content Editor
jss deploy config config
Sitecore JSS Configs

Now we are ready to deploy our application

jss deploy app -c -d

If by any chance you run into a problem, please go ahead and refer to Anastasiya’s blog for troubleshooting

Sitecore JSS app react in Experience Editor

After a successful deployment, you should see the site load in the Experience Editor, as well as you should have your bundle located in the ‘dist’ folder.

You content tree should look similar to this

Sitecore Content Tree

Let’s go ahead and visit our Sitecore instance

Sitecore JSS App served from Sitecore 9

The reason we are landing on the homepage for this site, when we are visiting the main url for the sitecore, is because of the configs, see below.

<site name="sitecore-jss-blog" inherits="website" hostName="sc9.local" rootPath="/sitecore/content/sitecore-jss-blog" startItem="/home" database="master" patch:source="sitecore-jss-blog.config"/>

Now we are ready to make this site, available on the web for everyone.

In the next tutorial, we will learn, How to deploy your Sitecore JSS app to Netlify with Sitelify.

Sitecore JSS Series for Developer: How to build a functioning Sitecore JSS app (3 of 5)

In the previous tutorial, we were deploying a sample app, and now we will go ahead and start developing our application, and testing it locally before we deploy it to Sitecore again.

In this tutorial, we will learn how to build a functioning application with Sitecore JSS and React.

  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

If you have skipped previous steps, and you would like to dive right into the Sitecore JSS development, have a sample ready, by following the instructions:

Before we begin by diving into the code, I would like to spend some time explaining some of the files are located and how we will be using them. These items were generated during the initial set up of a sample application

Route Layout Definition

In this file, we will be adding placeholders, components, editing field values, etc…

Sitecore JSS Route
yourApplicationName/data/routes/en.yml

Component Definition

This is where part of your component will be stored, where you will be designing your component data structure, setting fields, setting an icon for the component, as well as defining placeholders, that need to be exposed.

Sitecore JSS Component

Component Source

This is where you will be creating your component, designing the look and feel of it.

Sitecore JSS Component

Layout

In Layout.js you will be designing your page layout

Sitecore JSS Layout

Placeholder settings

In placeholders.sitecore.js you will be adding placeholders

Sitecore JSS Placeholder Settings

Register Placeholders in the package.json

If you will be creating any placeholders, you will have to register them in your package.json file.

 "config": {
    "rootPlaceholders": ["jss-1", "jss-2"]
Sitecore JSS Register Placeholders

We will be taking an approach of Disconnected Mode. So we will be creating a website locally first using Sitecore JSS CLI

You might notice that screenshots are different before this line, and it is referencing a “CV” application, it is my other project, everything below this line, will be all related to “sitecore-jss-blog”.

First, we will start with the creation of a sample app, and you can follow instructions in Step 2 on how to get started or follow instructions on https://jss.sitecore.com/docs

Next step we will start creating components and placing them on the page

First Part that we will focus on will be creating a few components using JSS CLI:

jss scaffold BlogHeader
jss scaffold BlogMainContent
jss scaffold BlogFooter
jss scaffold Article

It will automatically generate all the files that are needed for your development.

At this time we can start adding styling and all of the content

Let’s add some fields and set the icon for the BlogHeader Component

Sitecore JSS BlogHeader Component Definition
sitecore/definitions/components/BlogHeader.sitecore.js

Now let’s customize the BlogHeader component

Sitecore JSS BlogHeader Component React Source
src/components/BlogHeader/index.js

Go ahead and add some data to data.yml

Sitecore JSS BlogHeader Component Data
data/routes/en.yml

You might notice that I have modified the default placeholder, you can also do it, by editing the main layout and registering the placeholder

Sitecore JSS Header Placeholder
Please add this block of code into your layout, wherever you wish to have your placeholder.

And don’t forget to register it in your package.json

Sitecore JSS Register Placeholders
package.json

Let’s preview this in our browser

Sitecore JSS Blog

Next, let’s go ahead and add another component into the other placeholder, first let us add the placeholder to our Layout.

Sitecore JSS Placeholders
Layout.js

Now we will go ahead and update the BlogMainContent, definition as well as the source, the component that we created earlier with Sitecore JSS CLI.

Sitecore JSS BlogMainContent Component Definition
Sitecore JSS BlogMainContent Component Source

Lastly, let’s go ahead and add some data.

Sitecore JSS Data.yml

Let’s check out the browser you should see your changes here

Sitecore JSS Blog Local Disconnected

Now you have a functioning page, and you are able to load and modify the content locally. We will dive deeper in routes and Footer in the next series, please follow me and twitter to get the latest updates and you can get the code for free from my GitHub and use it for your own project.

In the next step, we will be learning How to deploy Sitecore JSS app to Sitecore, so we can see utilizing all the functionality of the platform such as Experience Editor and of course utilize Personalization.