Upgrade SXA Themes Using SXA CLI from Sitecore 101 to Sitecore 103

Hello everyone, In this blog we will learn how we can migrate Sitecore npm packages from myget to nuget and also how we can upgrade the SXA CLI Themes from 10.1 to 10.3 version. Recently, I was working on Sitecore 10.3 SXA upgrade project.This was container based application both for local and higher environments. In this project we were using Sitecore SXA CLI 10.1 to push our themese related changes to our Sitecore Instances and we have to upgrade it to 10.3 for the same. We came across two hurdles in that. First of all we have to migrate Sitecore npm package dependecies from https://sitecore.myget.org/f/sc-npm-packages/npm/ to https://www.npmjs.com/package/. The second hurdle was to update the Themes itself.

I will try to provide the approach that we have followed and it has worked for us.

Step 1: We will removed the old sitecore npm package url. In 10.1 we use to set the old url in internal npm configuration. If you want you can manually remove it by navigating to C:/users/{{your.name}}/.npmrc. If there is only single entry then you can just add the below command to your docker environment setup file.

       
       npm config delete @sxa:registry

Step 2:Uninstall the @sxa/CLI@10.1.0

       
       npm uninstall -g @sxa/CLI@10.1.0

Step 3:Install the sxa cli version 10.3. You can find all Sitecore related npm packages Here.Refer below screenshot.

       
       npm install -g @sitecore/sxa-cli@10.3.0

Step 4: Once installed successfully, We will create a new sxa theme. You can find my blog for creating new theme in SXA 10.3 using SXA CLI Here

Step 5:Once the new theme is created, just we need to compare 4 files listed below with old theme files. This is the place were the changes will be there. If there is no change between this files, then you can just replace it. But if there is any, then update you old theme files with the new one by comparing the changes.Refer the below screenshot.

  • config.js : This is present under gulp folder
  • .eslintrc.js : This is present in root folder of theme
  • gulpfile.js : This is present in root folder of theme
  • package.json : This is present in root folder of theme. One important thing while updating this files is to migrate dependent npm third party module used in your website in your updated theme























Step 6: Now once everything is in place, just run npm install as it will add all dependency module for your theme. Once it is finished, you can use SXA watch command where it will watch your changes and push it to Sitecore instance.

Step 7: Test your website.

This will give you some insights about upgrading as well as migrating the themes to Sitecore 10.3 version using SXA CLI. Thanks for ready and Happy learning!!

You can check my other blogs too if interested. Blog Website

Comments

Post a Comment

Popular posts from this blog

Sitecore XM Cloud Form Integration with Azure Function as Webhook

Image
Hello everyone, In this blog, we will see, how Azure Function can be used with Sitecore Forms. Before starting, I would request everyone to read my previous blog on XM Cloud Form as I am not going to go deep with how to create forms in XM Cloud. Creating Azure Function : Will serve as our Webhook Creating and Integrating Form : XM Cloud Form Creating An Azure Function I will not explain how you can create Azure Function with Http Trigger. You can check this youtube link here . Also in reference section, I will provide the link how you can connect and deploy your changes to azure function using Visual Studio. Azure Function Code : Its just a starter code which Azure function by default. Creating XM Cloud Form and Integrating with Azure Function Step 1 : Create a form from Form Editor and once form us published, you can see the below view in preview state. Here you can edit your form too. But it always recommended to use a version of that form as whatever changes is done will ...
Read more

Automate RSS Feed to Sitecore XM Cloud: Logic App, Next.js API & Authoring API Integration

Image
Hello everyone, In this blog, we will see a pratical use case of reading RSS feed and creating the respective items in Sitecore XM Cloud. To accomplish the task, we will use Logic App, an API created in Next JS and lastly calling the Authoring API to execute mutation query for Item Creation in Sitecore. Let's divide the process into 2 parts: Logic App : This will mostly focus on fetching the feed from RSS, performing transformation, storing the result in array of json object and pushing the data to next js api endpoint. Next JS API Development : This will take care of calling the authoring api of XM Cloud instance and performing the create item mutation query on the recieved data from Logic App. Logic App Azure Logic App is a cloud-based service provided by Microsoft Azure that allows you to automate workflows and integrate applications, data, services, and systems without writing complex code. It enables you to create automated workflows visually through...
Read more

Create and Fetch Content From Sitecore Content Hub One using GraphQL and React

Image
Hello everyone, In this blog, we will see overview of Sitecore Content Hub One product its benefits, features etc. This blog will walkthrough below listed points. Overview Features Content Hub One Dashboard Creating Taxonomy Creating Content Type Uploading New Media Creating Content Items From Content Type Getting GraphQL Token Creating Sample React Application To Read the Content from Content Hub One Overview Sitecore Content Hub One is a powerful platform. It is designed to centralize and streamline content creation, management, and distribution across various channels.Focuses on delivering content via APIs, enabling seamless integration with various front-end frameworks.Hosted in the cloud, offering scalability, automatic updates, and reduced infrastructure management.Provides flexible APIs and SDKs for developers to integrate and build custom solutions efficiently. Features Headless Content Management : Allows content to be delivered via APIs to any front-end or platfor...
Read more