Sitecore Installation in docker container

 

Install the prerequisites

• .NET Core 3.1 SDK (check your installed version with the dotnet --version command)
• .NET Framework 4.8 SDK (see the Microsoft procedure for checking .NET Framework versions)
• Visual Studio 2019
• Docker for Windows (with Windows Containers enabled)
• PowerShell 5.1 (PowerShell 7 is not supported)

Step 1:

ØCreated source folder and point the folder in powershell

ØRun it - > dotnet new -i Sitecore.DevEx.Templates --nuget-source https://sitecore.myget.org/F/sc-packages/api/v3/index.json

ØCheck if you have an Internet Information Server running on port 443:

Get-Process -Id (Get-NetTCPConnection -LocalPort 443).OwningProcess

ØIf you do, you must stop it:

iisreset /stop

ØCheck if you have an Internet Information Server running on port 8984:

Get-Process -Id (Get-NetTCPConnection -LocalPort 8984).OwningProcess

Step 2:

ØCreate new project- instance

dotnet new sitecore.aspnet.gettingstarted -n MySC10Project(this is my instance name)

ØSet certificate path

.\init.ps1 -InitEnv -LicenseXmlPath "<path to your license.xml file>" -AdminPassword "<your Sitecore administrator password>"

ØYou use the provided init.ps1 script to prepare the following items for the Sitecore container environment:

.\up.ps1

Step 3:

Øhttps://cm.mysc10project.localhost/sitecore/client/Applications/Launchpad?sc_lang=en#dateFrom=22-12-2020&dateTo=22-03-2021

Øhttps://id.mysc10project.localhost/ points to the mysc10project_id_1 container with a Sitecore instance hosting Sitecore Identity Server.

Øhttps://cm.mysc10project.localhost/ points to the mysc10project_1 container with a Sitecore instance hosting Content Management, Content Delivery, and Sitecore Layout Service.

Øhttps://www.mysc10project.localhost/ points to the mysc10project_rendering_1 container with the rendering host.

Useful Comments

ØOnce you resume your work after this installation, you can use below comments for create new healthy containers

docker-compose stop

docker-compose down

iisreset /stop

docker-compose up -d

Possible Error

Issue section

ØSo I used this commend to pull the SDK image explicitly.it will arise if your network connection is poor

docker pull mcr.microsoft.com/dotnet/framework/sdk:4.8

SXA Overview

 Hi Sitecore Family

 I am very new to SXA and am currently working on SXA Site. So I learnt & document everything here.

1. SXA Introduction

2. Tenant & Site

3. Adding new carousel using SXA

4. SXA View Mode

5. Partial Designs

6. Rendering Varient

Happy Sitecoring!!!!

Rendering variant

 ØObserve that rendering is the visualization of the content defined in the data source item.

ØSXA introduces an option to alter the appearance of the content without making changes to the rendering of the component by itself or the content.

Ø Additionally, SXA offers Rendering variants that enable editors to use different variations of the original visualization.

What

ØA Rendering variant is defined as an extra layer of configuration on top of the rendering that gives authors the ability to adapt renderings to their needs and to do specific changes to the HTML mark-up without actually making changes to the rendering code or templates.

ØIn the Rendering variant, observe that you can determine which fields from the data source should be displayed and define basic markup and styling for those fields. Also observe that by using different variants, the same rendering can render completely different fields from the data source, change their ordering, or even set separate HTML tags and CSS classes specific to each field.

ØThe default Rendering variant for Promo contains "Promo icon," "Promo text,” which mimic the HTML structure that you are expecting for your item to render in this particular example. Most SXA renderings support Rendering variants.

ØWhen you select any rendering that supports variants, the rendering toolbar is displayed with a variant selector at the bottom. For each of the variants, you can upload a thumbnail that previews the visualization of the variant. 

ØWhen authors want to switch variants, the variants' selector shows those thumbnails, making it easier for authors to decide which variant to use. By default, the first variant in the list is applied to a rendering, and any custom Rendering variant created is added to the list.

Note

ØIt is essential to observe that Map components do not support Rendering variants. However, Map allows selecting Points of Interest to display on the map component.

Øyou can add a thumbnail image for the variant. This image will appear in the variants drop-down box and can help content editors select the best variant for their purpose.

Create and Edit Partial Designs

 

Step 1:

ØClick on the Partial Designs button on the SXA ribbon of the Experience Editor to view the Partial Designs or metadata of the page.

ØBy default, a page has an empty Partial Design and Metadata Partial Design assigned.

ØThe empty Partial Design contains just three blank placeholders. 

ØThe Metadata Partial Design consists of functional renderings, which contain information that is not visible on the page. 

Step 2:

ØClick the new Partial Design button that allows the user to create a Partial Design folder, Partial Design, or Metadata Partial Design. 

ØStore all the Partial Designs in the Presentation folder under the Partial Designs item. 

Step 3:

ØRename the Partial Design to "Header" and click OK.

Step 4:

There are two components in the Header: an image and navigation. For this example, create two columns and divide the width into four-by-eight for the image (logo) and navigation components respectively.

Step 5:

ØSet the container style to a dark background and save the "Header" Partial Design.

Steps for Editing Partial Designs:

It is vital to note that components that originate from Partial Designs can be edited only on the Partial Designs in the Experience Editor and not on the page that is using it. 

To edit a Partial Design from the Experience Editor:

1. Select Partial Designs on the ribbon to edit any Partial Design.

2. Make the necessary changes and save the Partial Design. 

Note that when you make edits to a Partial Design, the changes (which can include creating new pages) are updated accordingly.

SXA View mode on Experience Editor

 

View mode

The View mode button on the SXA ribbon allows you to pick one of the three options:

ØA selected theme (i.e., a branded theme, which your front-end developers are working on)

ØGreyscale (that displays everything in black and white)

ØWireframe mode.

Theme

The theme button allows you to view the current theme and also sets the theme for your visitors.

ØThemes can be created together with the site or can be added at a later point. 

ØTo see the change, we have to save the page after selecting a different theme.

ØThemes are files stored in the Media Library under the Themes folder. 

ØOn expanding the site theme, the separate editing theme and site theme options are visible. You can customize each one according to your needs. 

ØOn the theme item, there is an option to modify the appearance of the placeholders to define whether they will be limited to a fixed size or stretched to the full width of the device. By default, all of the placeholders are fixed.

Selected theme- default

Select - > Experience Accelerator ->View Mode->Selected theme

GrayScale

Select - > Experience Accelerator ->View Mode->GrayScale

Wireframe

Select - > Experience Accelerator ->View Mode->WireFrame

Set the custom theme on this page

Select - > Experience Accelerator ->Theme

SXA Adding Carousal

 

Step 1:

ØCreated the new carousel folder name - Home Carousel

ØCreate the carousel under the new folder

ØI got 2 sliders under the item

Step 2:

ØThen add this item to the Home page presentation details

ØWhile creating the site I got this default component

Step 3:

ØNow, let's explore some of the available options on the Experience Editor, starting with the homepage.

ØFirst, open the homepage in Experience Editor and observe that by default, there are three placeholders: header, main, and footer. 

ØThen, use the gripper on the right-hand side of the page to expand the Toolbox panel. It contains all the installed renderings that you can utilize to build your page.

 adding the component Carousel

Add the footer section

Creating Tenant and site

 

Step 1:

ØA tenant is the holder of the sites, meaning every site that belongs to the tenant will have the tenant’s functionality. By default, all modules are selected in the pop-up wizard, and each of them provides different functionality.

ØI gave the tenant name as SXATenant 

 ØAfter installation, the tenant item will be available in the content tree. You can add a module to a tenant by right-clicking on it, choosing Scripts, and clicking on Add Tenant module.

Ø Following the process as mentioned earlier, you can add modules after installation if you have any custom modules or if you have not selected all modules during installation.

 Step 2:

 

 

ØGive the site name as SXADemo 

 

ØNotice that by default, the hostname is not specified, and it has * in it. If this is the first site you are installing, the * will take the hostname of your Sitecore instance. If you have more sites, you need to provide the hostname or specify the virtual folder.

ØAlready I have a site so mentioned the virtual folder

 

ØIf you already have SXA sites in your Sitecore environment, you would be able to choose an existing Theme. To create a new Theme, check to create a new theme and provide the name for it.

ØYou can always include Basic2 since this theme will provide you with an excellent layout to work on your content while the front-end developers are building the styling for the site.

 Step 3:

 

 ØAdditionally, all your Sitecore websites, both SXA and non-SXA, are available in your content management system and SXA Site Manager. You can access SXA Site Manager via the Desktop option on Sitecore's dashboard. 

ØYou would use SXA Site Manager in cases where you navigate to a site, but instead, you are viewing a different one. In such cases, SXA Site Manager will show you the sites that differ and allow you to order them for resolving any conflicts.

ØNow the new site is automatically updated in my SXA site manager

 

ØThen I tried to open the site, then it’s not loaded because of conflict in SXA site manager

ØThen I moved SXADemo before the main site name LighthouseLifestyle

 

 

ØThen my site opened successfully