website logo
➡️ purplepublish.com
Overview
Support
Setup
Editorial
Experience
Growth
Developers
Navigate through spaces
⌘K
Purple Experience
Views
Widget Component
Generic Widget
Structure of Dynamic resources
experience.config
Configure recurring texts in the messages.json
Purple Experience Builder
Using the Purple Experience Builder
Update your Purple Experience Version
Edit 'dynamic resources' from Purple Manager
Edit 'dynamic resources' in Experience Builder
Deploy Resources to Multiple Brands
Experience Builder Pipelines
Basic Experience Set-up
App onboarding configuration
Configure SEO attributes
Configure Error Pages
Configure the Side Menu in the Purple Experience
Configure a login page in Experience Builder
App menu configuration in Dynamic Resources
Configure the feedback email in the app with Experience Builder
Configure a coupon code page in Experience Builder
Configure a custom domain
Branding of your Experience
Experience Styling
Change the brand logo in the HTML Experience with Experience Builder
Configure brand colours in the HTML Experience with Experience Builder
Deposit a font in the HTML Experience with Experience Builder
Configure legal information pages in Experience Builder
Builder Pipelines Architecture Info
Simple static ads in Experience
Traffective ads in Experience
Action URLs and Deep linking
List of Action URLs
Deep linking
Migration
Docs powered by
Archbee
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 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/**/*"]
      }
    }
  }
}


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?
PREVIOUS
Deploy Resources to Multiple Brands
NEXT
Basic Experience Set-up
Docs powered by
Archbee
TABLE OF CONTENTS
Summary
Preconditions
Explanation
Pipeline Types
SASS/SCSS
watchFiles
Docs powered by
Archbee
ImprintPrivacy Policy
© Sprylab Technologies GmbH 2023