If you are learning AZ-303, and changes are you will encounter the same error when following the Exercise – Create an NVA and virtual machines (unit 5-7) by the time i’m writing this document (11/07/2021).

I have reported this issue with the Exercise, but it might not be fixed anytime soon.  so just in case you need help with completing your Exercise. I tried to document the issue in Exercise, and the solution how you can resolve them.

What’s the issue

The requirement is to create vnent with 3 subnets

• 10.0.0.0/24
• 10.0.1.0/24
• 10.0.2.0/24

in Unit 5 of 7 , it provides the code as below for creating the 1st VM in subnet dmzsubnet.  The problem with the below command is it doesn’t specify the subnet address prefix, therefor by default, it will be 10.0.0.24.  You won’t yet get any error at this stage, as it’s the first subnet. Although it’s already not matching the design.

You will then get an error when you are following the Exercise along the way in Unit 6 of 7 with below code.  you can’t create subnet with conflict address.

What’s the Solution

Adding  “--subnet-address-prefix” when you create VMs. There are more optional parameters for creating VM you can find here.

here is the example code you can use

az vm create \
     --resource-group learn-4bd2e66c-7759-446c-9a49-071b27237a7f \
     --name public \
     --vnet-name vnet \
     --subnet publicsubnet \
     --image UbuntuLTS \
     --admin-username azureuser \
     --no-wait \
     --custom-data cloud-init.txt \
     --subnet-address-prefix 10.0.2.0/24 \
     --admin-password <changeme123>

Sitecore introduced new installation tool (SIA) for installing vanilla package. As part of this post, I will install the Sitecore new release 9.3 with SIA step by step.

Step 1: download 9.3 package

download Sitecore 9.3 from here https://dev.sitecore.net/Downloads/Sitecore_Experience_Platform/93/Sitecore_Experience_Platform_93_Initial_Release.aspx

Step 2:  place Sitecore licence under the root installation folder

i.e. C:\Installation\Sitecore 9.3.0 rev. 003498 (Setup XP0 Developer Workstation rev. 1.1.0-r105)

Step 3:  Update SIA installation configuration(setup.exe.config)

• SQL Server name
• SQL Server username/Password
• SOLR URL
• SOLR root
• Solr Serverice
• Solr Port

Please note the out-of-box configuration doesn’t not support zookeeper. if you are using Solr could with zookeeper, you will need to configure your own.

Step 4:  Install Sitecore

• Install prerequisites

• Install Solr

I have multiple versions of Sitecore instances, so I changed the default port to 8986

• Install Sitecore and database

Once it completed, you should see the success message.

More and more organizations are moving into Headless and Microservice architecture space.  When talking about Headless, what’s the first thing on top of your head?  Yes, that’s right! Single page application (SPA).  The most popular front-end frameworks for a SPA are ReactJS, Angular and Vue etc.  Sitecore saw the trends and introduced JSS when Sitecore 9 is released.  In this article , I’m going to show you how to leverage JSS to build you organization components library that can be reused crossing all projects.

What’s 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.  Use your favourite JavaScript framework. Here is the JSS official documentation, if you want to know more.

Get Started

In order to build a JSS component library that can be reused by other teams, you will need to create npm module. If you don’t know what’s npm module, please read the official document here.

The sample component I’m going to build contains an Image, title and description as shown below

Create component library

Here is the code example of the sample component1.

The component1inherits from JSS components Text, Image, RichText.

To make it simple here, I didn’t customize the styling. In my next JSS post will show you how to create theme.

Once you complete the component1, you can publish into npm.

Follow the below steps for publishing the npm module

• create package.json in which you will need to add devDependencies and peerDependencies.
• installing babel and config the babel.config.js

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react

• Last is to include dist folder

"files": [
    "dist/*"
],

Now, you library is ready to be used for your projects.

Next step I’m going to show you how to use the library in the project.

Using the component library

Install the library you just created in your project with the below commend.

npm i qbe-jss-library

Once it is installed, the component can be used either in a page directly or be used to create a custom variation.  Lets say you want to add a <h2> on top of the sample component1component. 

Noticed instead of importing JSS library. I’m importing the custom library i.e. qbe-jss-library, and passing the value to the component1 .

Done! 

run mpn start

As you can see here,  the custom library can be easily imported into project and reused by different team. The benefits are obvious

• High Reusability
• High maintainability
• High Consistency

Hope you enjoyed reading my article. Please feel free to leave your message, if you have any questions.

Recently I’ve been working on Azure AD B2C SSO. The business requirement is to improve the user experience by personalizing the UI based on user roles.  Personalization will be easily implement in Sitecore with virtual user roles.

One of the challenge with the above user journey we had was that the roles are not included in the claims by default with Azure B2C basic policy. 

So I had a discussion with the team (Simon and Ivan), and come up with two potential solutions:

- Using Azure Identity Experience Framework (custom policy) to include roles

- Using Microsoft Graph API for retrieving user roles

Based on the discussion, I did the POC for option 2.  So, I’m going to walk you through how to I achieved.

Terminologies

Before diving into details, here are the terminologies that will be used in the below article:

Azure AD B2C

Azure Active Directory (Azure AD) B2C is a cloud identity management service that enables your applications to authenticate your customers. This white-label service is customizable, scalable, and reliable, and can be used on iOS, Android, and .NET, or any other platform

OpenID Connector

OpenID Connect is a simple identity layer built on top of the OAuth 2.0 protocol. OAuth 2.0 defines mechanisms to obtain and use access tokens to access protected resources, but they do not define standard methods to provide identity information. OpenID Connect implements authentication as an extension to the OAuth 2.0 authorization process. It provides information about the end user in the form of an id_token that verifies the identity of the user and provides basic profile information about the user.

Microsoft Graph API

Microsoft Graph is a RESTful web API that enables you to access Microsoft Cloud service resources. After you register your app and get authentication tokens for a user or service, you can make requests to the Microsoft Graph API.

Solution (options 2)

As mentioned above, option 2 is to make a call with MS Graph API for retrieving group membership information. So we updated the user follow by introducing step 7 and step 8 (shown in the below diagram.)

In order to make a call to MS Graph API, you will have to create an app Azure and assign essential access permission to the app.

Register application  in B2C tenant

Here is the steps for creating an app in Azure:

1. Sign in to the Azure portal using either a work or school account or a personal Microsoft account.

2. If your account gives you access to more than one tenant, select your account in the top right corner, and set your portal session to the Azure AD tenant that you want.

3. In the left-hand navigation pane, select the Azure Active Directoryservice, and then select App registrations > New registration.

4. Once you created, click on “certificates & secrets” for creating client secret which you will be used in your code.

5. Last step is to assign permissions

• In the Required permissions menu, click on Windows Azure Active Directory.
• In the Enable Access menu, select the Read and write directory data permission from Application Permissions and click Save.
• Finally, back in the Required permissions menu, click on the Grant Permissionsbutton.

Build Application

Add the below configuration to your app

Make HTTP request and add roles into claim

Display Roles

I create a few groups in Azure and assigned them to my profile. After login, I can see which groups have been assigned to me.

Sitecore Virtual User

Since the user are not stored in Sitecore, we will need to create a virtual user for assigning these roles.

Headless CMS enabled architect to  separate the content from the display layer or the front-end user experience. It is rising in popularity in the development world.  This model allows breakthrough user experience by giving developers the great flexibility to innovate, as well as empowering architects to design the most scalable, decoupled solution.  So, as a developer, are you ready for taking the challenge? 

If not, skill up yourself and get ready!  In this article, I’m going to explain some of the essential/popular technologies and tools for you.

NPM/Yarn

NPM stands for Node Package Manager. If you are a .net backend developer, it’s similar to Nuget package which keeps track of all the packages and their versions. It allows the developers to easily update/remove them from the solution. Yarn is similar to NPM but with high performance. Yarn install packages in parallel. 

Babel

Bable is a JavaScript transpiler that converts new JS code into old ones i.e. convert ES6 code into ES5, which allows developers to use latest JS specifications without worrying about the browser’s compatibility

Webpack

Webpack is used to compile JavaScript modules, used for managing assets, styles, and compilation. it supports Sass, postCSS, UglifyJs etc.

ES6

JavaScript ES6 brings new syntax and new awesome features to make your code more modern and more readable. It allows you to write less code and do more. Learn more ES6 from here http://es6-features.org/

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.

JSS is comprised of a series of APIs and services. At a fundamental level JSS extends Sitecore's dynamic, component-based layout model to the frontend. Whereas in a traditional JS application each route tends to host known components, in a JSS app a route's components and their data are defined dynamically by Sitecore (or disconnected data when in disconnected mode).

Driving layout dynamically enables JSS apps to support content editor driven layouts and support data-driven personalization and multivariate testing - all the power of Sitecore with all the flexibility of a headless deployment model.