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.

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

#SUGCON LONDON 2019 RECAP

This was my first #SUGCON EU. Even though it was only few days, it was an excellent event. This year SUGCON Europe took place in London, capital of Great Britain. I travelled from Houston, Texas. 9 hour flight with United Airlines, arrived a day before the Conference, took few photos of the city.

London Bridge, SUGCONEU Sitecore
London Bridge

It all started with Registration and Sitecore Certifications Exam.

Sitecore SUGCON EU 2019 LONDON
Sitecore SUGCON EU 2019 LONDON

First day was opened by Mark Frost the CEO of Sitecore, with a #sitecoreSelfie

Mark Frost – Sitecore CEO

Opening Keynote was by Donovan Brown from Microsoft. He talked about DevOps. Showed how easy it is to use Azure Boards, as well as Azure Pipelines and Azure Repos and Azure Artifacts, to get started you can visit azure.com/devops

There were many great Sessions at the #SUGCON, but the ones that caught my attention were the #JSS Sessions.

Anastasiya Flynn

JSS Immersion Session by Sitecore Front End Evangelist Anastasiya Flynn was really interesting. She went into the details about creating an event search page and shared some interesting and popular React Libraries.

She showed how you can debug your Sitecore JSS application in VS Code

GraphQL – Lessons Learned

React Libraries that were shared on this presentation:

Another Interesting Session was by Adam Lamarre. Fun with Sitecore JSS: Exploring GraphQL

Adam Lamarre

He showed a lot of cool demos with GraphQL and Sitecore JSS.

  • Item Query
  • Multiple Queries
  • Activity Log
  • Chat Room

I was really inspired by Activity log and Chat Room

Another session on JSS and Sitecore Commerce was by Pramila Soni & Saurabh Sachdeva

Really cool session was by Jeff L’Heureux – 16 Tools for your Sitecore Tool Belt

He shared 17 tools for your Sitecore faster working experience. You can find all the links on his blog.

Also not to forget to mention SFF Tribute

Of course everyone was waiting for Adam and Kam to get on the stage and show was they had been working on and how they were improving the JSS.

Adam Weber and Kam Figy from Sitecore

What was announced in their session? Sneak peak of JSS 9.2

  • JSS and SXA – Manage JSS apps with SXA
  • JSS support for Sitecore Forms
  • JSS Rendering Host

Now you will be able to create a JSS Tenant and JSS Site.

JSS Integrates with SXA, but retains JSS architecture, if you have been working with JSS, and FE technologies, and you are familiar with SXA the below bulleted list would make sense to you.

  • SXA component library not supported
  • Traditional Experience Editor (no toolbox)
  • Theming/Creative Exchange not supported
  • SXA Layout features won’t work in Disconnected Mode
  • Yes all the awesome features of JSS!

JSS Rendering Host was introduced

Sitecore JSS Rendering Host, you will be able to hear about it much more during the Sitecore Symposium Orlando 2019

Congratulations to all the MVP Award Winners!

Great Sense of Humor from the organizers

Thank you to all the Organizers of the SUGCON Europe 2019 in London, it was a great event.

You can find all the presentations and videos from the conference at the following link

How to Disable PhantomJS on Sitecore CD

If you get a requirement to disable PhantomJS on your Content Delivery environments, this trick will do it.

How PhantomJS is implemented with Sitecore:

Content Testing in Sitecore uses the Phantom JS tool for generation of the screenshot image files. In case you didn’t know, Sitecore has had screenshot generation features for quite some time. We use it to generate icons for items that you’ll be listing in the UI like renderings. These icon generation features are based on the System.Windows.Forms.WebBrowser control built into .net. So why did we not use the existing screenshot features for Content Testing? In early testing we found discrepancies with the WebBrowser control. WebBrowser uses Internet Explorer installed on the server where Sitecore is running. But the specific version that it uses isn’t always the latest. There are registry updates one can make to force the appropriate IE version, but this seemed like a big ask of users. This was one of the reasons we chose to use Phantom JS instead.

All you have to do, is create a patch file that will disable getScreenshotForUrl

Copy the above code into the configuration file and name it whatever you want and it into App_Config\Include\zzz

Reference:

Sitecore HTML Helper Methods – Part 1

Here is my cheat-sheet for all the html helper methods that I use all the time, and there are some that I find every day, and I just get excited about what Sitecore can give us.

Current Item

@Html.Sitecore().CurrentItem

Current Field

@Html.Sitecore().Field("Title")

Field with different source

@Html.Sitecore().Field("Title", Sitecore.Context.Database.GetItem("{858FAD09-070A-45BA-BA29-446940A3EC4F}"));

Create a image with a url that can be edited in Experience Editor

@Html.Sitecore().Field("link", new { text = @Html.Sitecore().Field("Image") })

 Placeholder

 @Html.Sitecore().Placeholder("main")

Image Field with class

@Html.Sitecore().Field("Image", new { @class = "img-responsive" })

Field that will allow you disable the web editing feature in Experience Editor

@Html.Sitecore().Field("Heading", new { DisableWebEdit = true })
This will list the Children of the Current Item you are in.
@foreach (Sitecore.Data.Items.Item item in Html.Sitecore().CurrentItem.GetChildren())
 {
@Html.Sitecore().Field("Heading", item)
@Html.Sitecore().Field("Preview", item)
}
Visitor Identification
@Html.Sitecore().VisitorIdentification()

More stuff coming soon…

How to create a user in Sitecore and give them special access to Sitecore Content

So today, I will demonstrate how to create a user that will have access only to a specific Content Item in Content Editor.

Requirement:

Create a user that will only have access to edit one specific item in Content Editor

Execution Steps:

In this tutorial we will be using  the following Sitecore tools:

  • User Manager
  • Role Manager
  • Security Editor

First lets create a user and name him Author:

user-1

Go to Sitecore LaunchPad and select User Manager. Click New and enter the values, depending on your requirements should look something like this:

user-2

Click Next and Close.

Next Step lets make user “author” member of “sitecore\Author” role.

Select the user and click Edit button on the ribbon.

user-3

Switch to the tab “Member Of” and click “Edit”

user-4

From the list of Roles select “sitecore\Author” and add it and then click OK.

The reason I am using this Role, because this OOTB role created by Sitecore, and it disables a lot of administrative functionality.

user-5

Now lets give this user access to edit only one specific item.

 

Select the user “author” from the list and click “Security Editor” on the ribbon.

user-3

In the next window you will make the following changes.

Make sure that the user “author” is selected. Then Allow to Write to the Item “Configurations” and Deny “FXM” to Read. Everything under Configurations will inherit the permissions.

user-6.PNG

Everything is in effect immediate, there is no Save or Okay buttons. So be careful what you are doing. You can make mistakes very easy.

This is what you should see when you login with Author credentials.

user-7

Sitecore recommended practice is to create roles that have special permissions, and then assign those roles to users. In this example I would not create a Role for the user because I only have a requirement for one user to touch one item, and this will never change.

If you have any question, please do not hesitate to reach out to me, comment here or connect with me on Twitter @tmamedbekov