How to I use file based Scriban template development with SXA Creative Exchange?

Question

We're in the process of establishing a new SXA solution. As part of that work we've established the necessary folder structure and procedures to use the SXA CLI to build and upload our theme (later, multiple themes) to our SXA Solution.

We want to use Scriban for most of our Rendering Variants (except the components we plan to use SXA out-of-the-box implementations). How do we set this up, so that our Frontend Developers can use, create, and edit Scriban files and have them deployed to the solution?

Answer 1

You can set this up with Creative Exchange Live. When you export, you will see that any existing scriban template items will be exported to a root folder in your zip file. The default is -/scriban

If you don't want to do a full export, say for example if you are using the SXA CLI to create the theme, just create a folder at the same level as your theme folder, again the default is -/scriban

The location of this is defined in your themes gulp/config.js file:

scriban: {
    path: (function () {
        if (!global.rootPath) {
            return;
        }
        return '../-/scriban/**/*.scriban';
    })(),
    metadataFilePath: (function () {
        if (!global.rootPath) {
            return;
        }
        return '../-/scriban/metadata.json';
    })()
},

The export will create a file in that folder called metadata.json, this file contains the ID of the site where your scriban templates will be uploaded too.

{"siteId":"{B7AE6725-A0EF-4451-9D04-B62B614F3B0F}","database":"master"}

Once you have that setup, you can start creating your scriban files.

The file system works very similar to how Unicorn/Rainbow organizes its files. So you will need folders to match the item tree in Sitecore.

For example, if you have a Promo component and want to create a variant called Teaser your folders would look like:

-
  scriban
    Promo
      Teaser
        TeaserScriban.scriban

if you want to have nested items, you can simply add a folder with the item name. So the above would become:

-
  scriban
    Promo
      Teaser
        TeaserScriban.scriban
        TeaserScriban
          NestedScriban.scriban

etc...

Now when you run your SXA CLI commands to import the theme, it will also upload the scriban items.

There is one CAVEAT to this.

For the scriban items to import successfully, it does seem to require the items to already exist in Sitecore, it will not create the items for you. So I just create blank scriban items first before running any imports. Bit of a pain, hopefully this might be fixed in future versions... hint... hint...