Purple Experience Builder

Experience Builder Pipelines

10min

Purple Experience Builder
﻿
Summary
Pipelines in the Purple Experience Builder can be used to add processing steps for dynamic resources before they are merged or pushed. They can be run manually or triggered automatically in the builder when you change affected files. This allows you to write SCSS and compile it to one CSS file that gets delivered in Purple Apps and Web, increasing developer experience and performance.
For more information about styling see Experience Styling﻿﻿
﻿
Preconditions
Have Admin Access in Purple Manager for the App that you want to edit in Experience Builder
﻿
Explanation
Pipelines and their logs on the bottom right of the Experience Builder Edit view
﻿
Pipelines can be configured in a builder.config.json in the default folder of the dynamic resources in the Purple Experience Builder.
A minimal and some other example configurations:
SCSS example
Minimal
|
{
  "$schema": "https://builder.purplemanager.com/api/public/schema/1.0/builder.config.schema.json",
  "postProcessing": {
    "pipelines": {
      "style1": {
        "type": "sass",
        "input": "default/storefront/assets/styles/index.scss",
        "output": "default/storefront/assets/custom.css",
        "watchFiles": ["default/storefront/assets/styles/**/*"]
      }
    }
  }
}
{
  "$schema": "https://builder.purplemanager.com/api/public/schema/1.0/builder.config.schema.json",
  "postProcessing": {
    "pipelines": {
      "style1": {
        "type": "sass",
        "input": "default/storefront/assets/styles/index.scss",
        "output": "default/storefront/assets/custom.css",
        "watchFiles": ["default/storefront/assets/styles/**/*"]
      }
    }
  }
}
﻿
Each pipeline has an input and output. Additionally, other fields are available to further configure the pipeline, see schema or autocomplete of the editor for more info about available fields.
If an output file is opened in the Experience Builder, it is read-only to prevent accidental changes that would get overwritten anyway if the pipeline runs again.
Pipeline Types
SASS/SCSS
Reference: https://sass-lang.com/﻿
The sass pipeline requires an input file and an output file.
It is recommended to place all SCSS files in a single folder and import all in an index.scss which in turn generates the default/storefront/custom.css.
The output file gets completely overwritten on every run! If your custom.css contains styles before you create a pipeline, make sure to copy the contents into the appropriate SCSS files to not lose these styles.
watchFiles
When specifying watchFiles , the pipeline automatically re-runs if a matching file is changed.
You can specify multiple file globs, following the https://github.com/isaacs/minimatch rules (see also https://en.wikipedia.org/wiki/Glob_(programming))
﻿

Updated 30 Aug 2023

Did this page help you?

Deploy Resources to Multiple Brands

Basic Experience Set-up

Docs powered by

Archbee

TABLE OF CONTENTS