Builder Pipelines

pipelines in the purple experience builder 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 docid\ yd4dwelaic3jch0qdilbp preconditions have admin access in purple manager for the app that you want to edit in experience builder explanation 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 { "$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/ / "] } } } } minimal { "$schema" "https //builder purplemanager com/api/public/schema/1 0/builder config schema json" } 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 js in the same builder config json, write the pipeline for js like { "$schema" "https //builder purplemanager com/api/public/schema/1 0/builder config schema json", "postprocessing" { "pipelines" { "a valid js pipeline" { "type" "javascript", "input" "default/storefront/assets/scripts/my script js", "output" "default/storefront/assets/scripts/custom server js", "target" \["es2020"], "format" "cjs", "minify" false, "sourcemap" false, "watchfiles" \[ "default/storefront/assets/scripts/ / js" ] } } } }"pipelines" { "scss" { "type" "sass", "input" "default/storefront/assets/library/ styles scss", "output" "default/storefront/assets/custom css", "watchfiles" \[ "default/storefront/assets/library/ / " ] }, "ssr js" { "type" "javascript", "input" "default/storefront/assets/scripts/ssr/custom server js", "output" "default/storefront/assets/scripts/custom server js", "format" "cjs", "minify" true, "sourcemap" false, "watchfiles" \[ "default/storefront/assets/scripts/ssr/ " ] }, "csr js" { "type" "javascript", "input" "default/storefront/assets/scripts/csr/custom js", "output" "default/storefront/assets/scripts/custom js", "format" "cjs", "minify" true, "sourcemap" false, "watchfiles" \[ "default/storefront/assets/scripts/csr/ " ] }, "resolver" { "type" "javascript", "input" "default/storefront/assets/scripts/resolver/resolver js", "output" "default/storefront/assets/scripts/url resolver js", "format" "esm", "minify" true, "sourcemap" false, "watchfiles" \[ "default/storefront/assets/scripts/resolver/ " ] } you must specify type (sass, cjs, esm), input and output paths and the rest will be default to values you see above for the respective keys the output file gets completely overwritten on every run! if your output file, in this case custom server js contains code before you create a pipeline, make sure to copy the contents into the appropriate js files to not lose the code in this case, it could be your input file my script js this way you may write an es2020 standard supportable javascript file with features, for example import/export or operators like ! and ?? you may also split and structure our javascript code into multiple javascript files tip set the minify to true for better performance by having a reduced sized js file watchfiles when specifying watch files , the pipeline automatically re runs if a matching file(s) is/are changed you can specify multiple file globs, following the https //github com/isaacs/minimatch rules (see also https //en wikipedia org/wiki/glob (programming) )