Configure

Fepper will run perfectly well out-of-the-box with default configurations. For further customization, power-users can edit these files:

Edit conf.yml to suit the needs of your development environment. If using Git, conf.yml will not be version controlled by default.

Edit pref.yml to customize Fepper preferences. If you wish to use the fp syncback, fp frontend-copy, or fp template tasks, you must supply values for the backend.synced_dirs preferences in order for those directories to get processed and copied to the backend.

Edit patternlab-config.json to configure Pattern Lab, the design system behind the Fepper UI.

conf.yml

express_port

The port at which Fepper's webserver listens.

type: number
default: 3000
livereload_port

The port at which LiveReload listens for changes to the file system.

type: number
default: 35729
kill_zombies

If true, this will ensure only one Fepper instance is running. Stale instances lingering into a fresh launch will be killed. However, if you wish to run multiple Fepper instances, you'll need to set this to false.

type: boolean
default: true
app_dir

The relative path to the Fepper NPM.

type: string
default: node_modules/fepper
extend_dir

The relative path to the extensions directory.

type: string
default: extend

pref.yml

backend.backend_dir

The relative path to the backend directory.

type: string
default: backend
backend.synced_dirs.assets_dir

The relative path to where assets (images, videos, etc.) should be copied to in the backend.

type: string
backend.synced_dirs.scripts_dir

The relative path to where scripts (usually JavaScripts) should be copied to in the backend.

type: string
backend.synced_dirs.styles_dir

The relative path to where stylesheets should be copied to in the backend.

type: string
backend.synced_dirs.templates_dir

The relative path to where Fepper should output compiled backend templates.

type: string
backend.synced_dirs.templates_ext

The extension that should be appended to compiled backend template filenames.

type: string
backend.webserved_dirs

An array of relative paths to backend directories to be served by Fepper's webserver.

type: array
templater.retain_mustache

By default, the Templater will not retain untranslated Feplet tags when translating to the backend's template language. However, if the backend's template language happens to be Feplet or Mustache, set this value to true.

type: boolean
default: false
instance_file

Declares the class which defines the Fepper instance for a project. If you wish to customize a subclass that inherits from the default class, put the relative path to that file here.

type: string
default: node_modules/fepper/core/fepper.js
lang

Fepper's human language for end-users. Fepper will translate according to the .json file at source/_ui/i18n identified by this pref.

type: string
default: en

patternlab-config.json

paths

Relative paths to source and public directories. Edits to source files will be built to the public directory and served from there.

type: object
default:
"paths": {
  "source": {
    "root": "source",
    "annotations": "source/_annotations",
    "css": "source/_styles",
    "cssSrc": "source/_styles/src",
    "cssBld": "source/_styles/bld",
    "fonts": "source/_styles/bld/fonts",
    "data": "source/_data",
    "images": "source/_assets",
    "imagesSrc": "source/_assets/src",
    "imagesBld": "source/_assets/bld",
    "js": "source/_scripts",
    "jsSrc": "source/_scripts/src",
    "jsBld": "source/_scripts/bld",
    "meta": "source/_meta",
    "patterns": "source/_patterns",
    "templates": "source/_patterns/03-templates",
    "pages": "source/_patterns/04-pages",
    "scrape": "source/_patterns/98-scrape",
    "static": "source/_static",
    "ui": "source/_ui"
  },
  "public": {
    "root": "public",
    "annotations": "public/annotations",
    "css": "public/_styles",
    "cssBld": "public/_styles/bld",
    "data": "public/data",
    "fonts": "public/_styles/bld/fonts",
    "images": "public/_assets",
    "js": "public/_scripts",
    "patterns": "public/patterns",
    "static": "public/static"
  }
}
cacheBust

Whether or not to append a unique query string to cacheable assets, e.g. JS, CSS. If true, the browser will pick up recent changes and not retrieve from cache.

type: boolean
default: true
cleanPublic

Whether or not to delete the files in public/patterns on each build.

type: boolean
default: true
debug

Whether or not to output all debugging messages in the console.

type: boolean
default: false
defaultPatttern

The pattern that will be displayed on launch.

type: string
default: pages-homepage
defaultShowPatternInfo

Whether or not to launch with the Code Viewer open.

type: boolean
default: false
frontMatterExtension

The file extension for annotation files, syntaxed in a superset of Front Matter, a superset comprising YAML and Markdown.

type: string
default: .md
hashPatterns

Whether or not to hash patterns per build. Setting this to true will improve build performance by skipping unchanged patterns.

type: boolean
default: true
ishControlsHide

Whether or not to hide UI toolbar items.

type: object
default:
"ishControlsHide": {
  "disco": true,
  "find": false,
  "grow": false,
  "random": true,
  "views-all": false,
  "views-annotations": false,
  "views-code": false,
  "views-new": false,
  "tools-all": false,
  "tools-docs": false,
  "tools-shortcuts": false
}
ishMinimum

The minimum viewport width the UI will render.

type: number
default: 240
ishMaximum

The maximum viewport width the UI will render.

type: number
default: 2600
patternExportDirectory

The relative path to the directory that patterns will be exported to if patternExportPatternPartials has items.

type: string
default: pattern_exports
patternExportPatternPartials

Patterns to be exported per build. The exported patterns will include their built partials and their data. They will be snippets of HTML, not full HTML pages.

type: array
default: []
patternExtension

The file extension for patterns. Fepper uses Feplet, a superset of Mustache. While it is debatable whether this is still truly Mustache, the naming convention persists.

type: string
default: .mustache
styleguideExcludes

Sets which patterns will be excluded from navigation and display in the UI. These patterns can still be included as partials in other patterns.

type: array
default: []