Gary Wenneker's Blog

Sitecore JSS: React Hooks Global State

Fri, 14 Feb 2020 07:21:12 +0000

When developing in Sitecore JSS I am always happy to do that in React. Most of the React components I’ve been building are small ones, rendering the context of that data. That’s not special at all and for this I use the React Function Component. It has no side effects. Where Class Components has state and livecycle methods the Function Component has not. This means the Function Component only renders the markup.

Previously, refs were only supported for Class-based components. With the advent of React Hooks, that’s no longer the case

Common issues with...

SpotiTube: Using GraphQL in Sitecore JSS

Fri, 19 Jul 2019 07:21:12 +0000

Talk data to me!

Working with JSS is a growing thing and more and more sites are built with Sitecore’s headless technology. It allows you to build application based websites with an enormous speed something unknown in the world of “classic” ASP.NET MVC development. This post is about a sample application I build to show how GraphQL can be used in Sitecore Javascript Services.

For this demo I created a Spotify Web front end and attached a GraphQL backend to it. This app will not use any Sitecore items but it rather consumes the...

Sitecore JSS Adal Authentication

Thu, 23 May 2019 07:21:12 +0000

When it comes to providing a login for the visitors of your website a lot needs to be done. With Sitecore JavaScript Services we are now entering a whole new ball game.
This post will focus on implementing Microsoft Azure’s ADAL. I also shared the JSS template which allows you to start with the ADAL connected JSS site immediately.

What is ADAL

The Windows Azure Authentication Library (ADAL) is a library meant to help developers to take advantage of Active Directory for enabling client apps to access protected resources.

Setting up your Azure configuration

...

Sitecore JSS: Umbrella Update 2

Mon, 20 May 2019 07:21:12 +0000

A few weeks ago I released Umbrella for Sitecore JSS, a utility that synchronizes items from your Sitecore JSS website to your local JSS development environment. Behind the scenes I've been working very hard to add new features as you can read below.

Use Umbrella globally

Umbrella is now available from NPM! The CLI can be used globally. Install Umbrella using the command npm link jss-umbrella. There is no reason to add the script locally in your project anymore. Use the same command to update the CLI. For the...

Sitecore JSS: Umbrella

Fri, 03 May 2019 07:21:12 +0000

Would’t it be great if we could sync our Sitecore JSS website to our local JSS dev environment?

You are a hardcore Sitecore developer, or a front end wizard and are starting with Sitecore JSS. At first you might think, I don’t know anything about front end stuff, or as a front end dev, you don’t want to do anything with Sitecore. Then there’s two ways to work with JSS (developer workflows) Code First and Sitecore First. And what about the structure? How is data handled? Feeling desperate yet? You can also get into annoying discussions...

Sitecore: Warp factor nine!

Mon, 22 Apr 2019 07:21:12 +0000

And for the Nth time I went to the servicedesk to reinstall everything on my machine. Why? Too much stuff on it, getting slow, C-drive just notified that my drive was full. Do you recognize it?

So you think your laptop is fast? Then take in account that by default your laptop will be running in this state.

Energy Power Plan that’s tricking you that it’s all ok, but it’s not!

This seams like it means that it streamlines the performance in general. I experienced that a Unicorn sync which normally would run for a maximum of 30 minutes...

Looking back at the Sitecore Hackathon 2019 challenge: DinoCore

Tue, 05 Mar 2019 23:04:12 +0000

While being scared a little if I could handle the whole 24 hours I started this great adventure with Jean-François "Jeff" L'Heureux (Canada) and Wessel 't Hoen (the Netherlands). Before the Hackathon even began we had meetings to think about directions and possible things we wanted to build. But the judges made the contest harder. This year they added additional requirements! :-)

Starting with an idea

And so our ideas were flushed down the drain and we started thinking about something new. We chose the JSS way. Functionality that would change the presentation of our...

Sitecore JSS: Triggering Marketing Events

Sun, 03 Feb 2019 07:21:12 +0000

With Sitecore JSS the development strategy has shifted. It enables frontend developers to participate in Sitecore development teams, whether you are creating a single page application (SPA) or consuming the JSS layout service providing you with the context of the route. User interaction is done on the client side which offers us certain advantages and challenges. One of the advantages we get is that we can trigger marketing events from the frontend with just a few lines of code.

The following steps will show you how to set up your Sitecore and frontend environment and how to trigger an event...

Sitecore JSS: Get Typed!

Tue, 18 Dec 2018 07:21:12 +0000

In this post I will get you setting up typing in place in your JSS application. You might ask what it is for and why you would use it? Because it is great! It gives you type checking, forcing you to use types/interfaces and best of all, you’ll have intellisense!

Because the Sitecore Javascript Services template is in plain Javascript we have to add some extra’s to make the typings work. We can go with two directions: Flow or TypeScript. Because the way JSS builds it’s bundles we must keep the actual js-files for the components.

What I want...

Sitecore JSS: Authentication

Mon, 01 Oct 2018 07:21:12 +0000

Building a website at some point always requires some mechanism for a user to be able to login. And because we are working in a headless enviroment we have to check if we can accomplish this.

JSS Authentication Recipe

Before we can actually log in we must have some some stuff in our JSS project. Most of the time we execute GET-requests and consume the data we receive from the server. Now we have to add user interaction and also post data to the server.

I want to have some state in my app and that means that I...

Sitecore JSS: Using a custom Layout Service configuration

Wed, 26 Sep 2018 07:21:12 +0000

It's easy to change the output of the JSS Layout Service. You can either choose to use the out of the box Content Resolvers or build your own one as I have shown in my post Sitecore JSS: Extending the Layout Service. The outcome is that you need to define a Content Resolver and point it to your assembly and having your rendering making use of it. So far so good. But what if you have multiple renderings? Then you need to change them all to make them use your resolver. This creates the need of a global Layout...

Sitecore JSS: Extending the Layout Service

Wed, 26 Sep 2018 07:21:12 +0000

JSS (JavaScript Services) is Sitecore's answer to the need of having a decoupled CMS. One of the reasons for the popularity of the headless architecture is because you can redesign your CMS without setting up a new implementation of the CMS itself. A second reason is that developers do not need to know anything about the backend system. JSS is highly flexible and out of the box it supports a a lot when it comes to customization. Nevertheless, we sometimes need to extend the reality as we see it ;-)

example output of Sitecore JSS...

Troubleshooting the Sitecore Dynamic Placeholder Glitch

Mon, 10 Sep 2018 07:21:12 +0000

A few weeks ago I was asked to do some generic implementation of ReactJS renderings in Sitecore SXA. The challenges: It needs to work with standard SXA, using dynamic placeholders, using an ORM mapper like Glass but also pass only needed data structures to the components, thus the serialization may not be too bloated. During this journey I found an interesting issue you might get into as well.

So what happened? My placeholders did not show up in my component. One component had one, the other did not. What went wrong?! They used the same codebase in the...

How to work with Git: Left Git or right Git?

Mon, 10 Sep 2018 07:21:12 +0000

I know this post hasn't to do anything with Sitecore but also with Sitecore development we want to make sure our sourcecode is protected in some repository. In my past live I had to use Microsoft's source repository VSS to store my code and collaborate with my fellow colleagues. Even with VSTS this was still the way to go. And then it all changed when VSTS had the option to use it as a Git repository. All open source developers probably will laugh in my face right now but for me it was the first time I actually had fun...

Sitecore JSS: Create your own GraphQL schema

Thu, 06 Sep 2018 07:21:12 +0000

One very great feature is added to the Sitecore JSS module: GraphQL support. It allows you to query an API with a JSON payload. Compared to REST API's GraphQL is more maintainable and more flexible as GraphQL services can be stiched together.

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data.

Building the Sitecore GraphQL SchemaProvider

In this post I will walk through the following steps to guide you setting up a custom GraphQL SchemaProvider from which you can query the enpoint.

Steps to create...

Sitecore JSS: Development Modes

Wed, 29 Aug 2018 07:21:12 +0000

Sitecore JSS is the new way of developing in and with Sitecore. The quickstart is pretty straightforward when it comes to the disconnected mode. This blog also focuses on the Code-First workflow and the Sitecore-First workflow.

Sitecore JSS: modes

When you want to start developing in Sitecore JSS you can choose beween four flavours. For only one of them Sitecore isn't required.

Disconnected mode - As I described before this mode is pretty straightforward. Does not require Sitecore and it's just like developing a plain ReactJS website with webpack. In one of the next posts...

Sitecore JSS: Failed to start Node process

Mon, 27 Aug 2018 07:21:12 +0000

JSS is Sitecore's answer to have the ability to offload your website from sitecore and run the website somewhere else. There are several ways to run the site, disconnected, connected and integrated.

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. You can develop completely disconnected from Sitecore and even get your project started without a Sitecore install.

Running JSS integrated in Sitecore

During my exploration of JSS I also wanted to deploy my app to Sitecore and check if I could open the...

Performance tuning Sitecore: Ludicrous Speed!

Sat, 26 May 2018 07:21:12 +0000

Developing with Sitecore and specifically deployments for me is similar to developing with SharePoint in the old days. You have to deploy a bunch of files to the server and IIS has to spin up again. Depending on the amount of processes, services and other stuff this can take a while. So when we want to debug our code and do a couple of deployments the amount of waiting time stacks up. I easily could open an extra tab in my browser and load up Netflix to watch a new episode of whatever series that's running at the moment.

And...

Amplify your website using AMP in Sitecore

Sun, 25 Mar 2018 14:46:05 +0000

So, the customer wants to have some pages in AMP I heard a colleague say. Amp? What’s that? Never heard of that. I opened op my digital bible Google and started to search.

What is AMP?

AMP or Accelerated Mobile Pages is Google’s CDN where your indexed mobile pages are served to mobile pages

This means that the AMP version of your page gets indexed. When someone with a mobile device searches on Google and clicks on the link rather than going to your website the cached version of that page is served: the AMP page....

Becoming MacGyver using the CSS Swiss Army Knife in Sitecore SXA

Sat, 17 Feb 2018 07:21:12 +0000

Using CSS in the old days

One of the things I started to dislike when working on a project is Bootstrap. Using Bootstrap in a simple site is fine as you can easily use it as a starter and throughout the years it has been very well documented and supported. But it also comes with an extensive list of components and base styling for most HTML elements. And this is where advanced design projects will expect advantages when using Bootstrap as it will style your components and even the ones that you do not want to be styled. So...

Turbo boosting Sitecore SXA Rendering Variants

Sun, 11 Feb 2018 07:21:12 +0000

In my post Tuning Sitecore Experience Accelerator (SXA) with React.Net and Supercharging Sitecore with SXA I have proven that you can do just do about anything in SXA like the greatness of having the ability to use your own design (markup/html) whenever you like withing Sitecore SXA and use them in the Experience Editor Toolbox and drag and drop your components.

Of course some of you might think that there's more to SXA than just components and the toolbox and that's true. But it would be unfair to SXA to just cover all of the functionality in one...

Supercharging Sitecore with SXA

Sun, 21 Jan 2018 07:21:12 +0000

One of the most interesting discussions I had the last couple of weeks is when to use custom build solutions, maybe a boilerplate or Sitecore Experience Accelerator (in short SXA. In my previous post I wrote about the feeling one can have when playing around with SXA, how I could use my own (React) components in SXA, but there is so much more under the hood.

In this post I will zoom in more into the world of SXA and try to convince you that SXA is the way to go.

Want to skip to the conclusion?

...

Tuning Sitecore Experience Accelerator (SXA) with React.Net

Thu, 04 Jan 2018 07:21:12 +0000

Bob's way - tuning SXA This post is my black and white vision of Sitecore's Experience Accelerator and colorized like Bob Ross would do :-)

What to jump straight to my findings? Click here

TL;DR

Since 2001 I have been developing in SharePoint and last year I made the swith to Sitecore. When I started working with Sitecore my first project was with SXA. This was a somewhat awkward experience as I was used to create markup and bind data to it.

Something I heard a while ago:

After the implementation we give...

Installing Sitecore Experience Platform 9.0

Thu, 26 Oct 2017 07:21:12 +0000

SitecoreSym finished last week and now Sitecore Experience Platform 9.0 initial release is availabe. As a full stack developer am always curious about new things so the first thing I did was to download all the files and try to install the thing on a virtual machine. I'm running a Macbook as I abandoned Sharepoint after more than ten years and found myself writing code in all sorts of Javascript frontend frameworks. Therefore I do not needed a Windows machine anymore.

This post will guide you through the installation of a single server installation.

So they're saying...