Sitecore JSS + Content Hub = Faster Website

I have been exploring lately a lot about Content Hub, and today I would like to share with you, why you should consider using Content Hub with Sitecore JSS.

Will my life be easy with Content Hub?

Yes

Does Content Hub, have its own CDN?

Yes

Can I make it work with Sitecore JSS and have ever faster web site?

Yes

That is 3 Yes’s for me, so I think I will go ahead proceed with showing you a POC.

In order to get started fast with Sitecore JSS. You can use one of my JSS Starter Kits.

So next we need to make sure that Content Hub is installed.

We are interested in Sitecore Connect™ for Sitecore DAM

https://dev.sitecore.net/Downloads/Sitecore_Plugin_for_Stylelabs_DAM.aspx

Once you install the package you should have the config called Stylelabs.config. Most of the configuration will be done on the Content Hub side.

Once everything is configured we can now go ahead and utilize it. You need to have an instance of Sitecore Content Hub running in production, it is a SaaS offering, so contact your Sitecore rep to get more info.

So load your site in the Experience Editor:

Select the image that you want to replace, and click on the little icon with 3 squares and a plus.

You will get a nice UI, where you will be able to load your assets, you will search and find the image that you want.

Once cool thing that I like a lot about the Content Hub, is that you can select and image and generate multiple versions of the same image, and then insert them anywhere you want, set the expiration date.

Select the image and it will automatically be inserter into your site.

Sitecore JSS and Content Hub

Save it and publish it, and if you have a CDN already for your site, now you can two CDNs, one separate one from Content Hub to serve your images.

Important note I did not use Photoshop to crop the image to a specific size.

As you can see below performance of the Lighthouse score went from 75 to 98.

75 was the score when the images were served by Sitecore.

98 was the score when the images were served from Content Hub CDN.

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.