Migrating Sitecore SXA themes from MyGet to NPMJS / Blogs / Perficient


Sitecore recently announced they are moving away from MyGet and to NPMJS for its package provider. After November 2023 the MyGet public feeds will be unavailable and any SXA themes and publishing pipelines should be updated before that time.

Sitecore was unable to retain the @sxa prefix with this move and as a result, the best option for us was to bump the versions of our themes to 10.3 from the new feed (Note: this was a Sitecore 9.3 instance – the v10 themes are compatible). This change will affect three existing packages with the new prefix.

@sitecore/sxa-cli
@sitecore/sxa-celt
@sitecore/sxa-theme

There are three main steps to accomplish this.

  • Remove the NPM configuration that points to the MyGet registry
  • Uninstall/reinstall Sitecore’s SXA CLI tool
  • Update four files in the theme from the package repository

1. Remove MyGet from the local NPM registry

The old version of the theme required us to set an internal configuration to point to MyGet. For our first step, we’ll need to clear out that entry from the local machine’s NPM registry.

Navigate to C:/users/{{your.name}}/.npmrc and remove the entry that points to MyGet. You can have additional entries if needed but make sure the MyGet entry has been removed.


2. Remove and reinstall the SXA CLI

For the next step, if you already have the SXA CLI installed you should uninstall/reinstall from the new repository with the new version. Every theme will use the CLI so installing globally is recommended.

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

This only needs to be done once on your machine, not per theme if you have more than one. If the uninstall command doesn’t work, you can manually delete the old @sxa version from disk by going to C:/Users/{{your.name}}/AppData/Roaming/npm and deleting the related files. Then go to node_modules and delete the package.

You can confirm you’re on the correct version by opening the PowerShell script here and verifying you see @sitecore/sxa-cli vs @sxa/sxa-cli in the global NPM files.


3. Update SXA theme configuration files from new NPM repository

Lastly, we need to update a few files from the new NPM feed into the theme. Navigate to the new repository for Sitecore themes and open your theme in VS Code.

In your theme, update the contents of these four files with the new versions from the repository. My example theme here did not include any additional dependencies in the package.json so I was able to replace the entire contents of the file. If you are importing additional dependencies, you’ll want to merge manually so as not to inadvertently remove something you need. YMMV.

Now, run npm install from the terminal. After the packages finish installing, try running the watch or build command from the CLI.

sxa watch All
sxa build All

If everything was successful, you will be prompted to login to from the terminal. With the watcher started, the CLI will deploy your theme to the CMS via Creative Exchange. The standard SXA development process will be the same as the previous version of the theme. Source maps are now included by default in the config.js file.

When updating from an older version (9.x) of the theme, Sitecore doesn’t recommend using the generic Gulp tasks with the newer versions of the theme. Instead, use the SXA CLI commands. By moving away from the generic gulp tasks, you can use a newer version of Node as well. The gulp tasks relied on Node version 14.xx but the SXA tasks can run on newer versions of Node.

The full list of commands is available here: https://www.npmjs.com/package/@sitecore/sxa-theme/v/10.3.0

NOTE: if your site uses a CI pipeline that installs the SXA CLI for theme deployments (probably via PowerShell) then this should be updated as well before November 2023.  Remove the NPM command that sets the configuration to MyGet and simply install the CLI from @sitecore/sxa-cli instead.

 





Source link

Social media & sharing icons powered by UltimatelySocial
error

Enjoy Our Website? Please share :) Thank you!