How to change Media Library Theme Path(custom theme folder path) in existing FrontEnd code solution

Question

I have requirement to setup theme for new microsite in our sitecore-SXA project so follow below steps do it, and it works fine too.

1. npm config set @sxa:registry https://sitecore.myget.org/F/sc-npm-packages/npm/

2. npm i -g @sxa/CLI

3. sxa register your-site-url

4. sxa new yourThemeName

• In this step it asks various things related to setup new Theme and one of them is to provide path of new theme.
• As it was my Theme setup so not sure that should i give whole path or relative to media library. So i gave full path like /sitecore/content/..../media library/....

5. If Sitecore is installed locally then go to Website\App_Config\Include\z.Feature.Overrides and enable the z.SPE.Sync.Enabler.Gulp.config.disabled file.

6. Go to your workspace folder

cd C:\workspace\haynesboone\yourThemeName npm install

7. Run default task to watch all files, compile, and upload to Sitecore: gulp

   Run watch all to compile all files without uploading to Sitecore: gulp watchAll

Everything works fine and when ran gulp command it compiled file and uploaded minified file in yourThemeName folder, but this folder was created in sitecore under Media Library/Themes/sitecore/content......., that means instead of reading whole path and creating customthemefolder under Themes, it create whole structure again. It is not what i want, so how can i correct the custom theme folder path?

Answer 1

Its solution lies in serverConfig.json. In your front end code go to YourProjectFolder\yourThemeName\gulp location and open "serverConfig.json". Do below steps:

• update serverOptions property, make sure it contains path w.r.t. Themes in CMS, "serverOptions": { "projectPath": "\Themes\FolderContainingTheme", "themePath": "\yourThemeName" }
• Save the file and close the terminal
• Now again open the editor (VS Code in my case) and run the gulp command
• Check your CMS it will create and upload files in Themes/FolderContainingTheme/yourThemeName

There may be some other way to change it but this one worked for me .... :)