Configure
Fepper will run perfectly well out-of-the-box with default configurations. For further customization, power-users can edit these files:
- conf.yml
- pref.yml
- patternlab-config.json
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:numberdefault:
3000
livereload_port
The port at which LiveReload listens for changes to the file system.
type:numberdefault:
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:booleandefault:
true
app_dir
The relative path to the Fepper NPM.
type:stringdefault:
node_modules/fepper
extend_dir
The relative path to the extensions directory.
type:stringdefault:
extend
pref.yml
backend.backend_dir
The relative path to the backend directory.
type:stringdefault:
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:booleandefault:
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:stringdefault:
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.
stringdefault:
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:objectdefault:
"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:booleandefault:
true
cleanPublic
Whether or not to delete the files in public/patterns on each build.
booleandefault:
true
debug
Whether or not to output all debugging messages in the console.
type:booleandefault:
false
defaultPatttern
The pattern that will be displayed on launch.
type:stringdefault:
pages-homepage
defaultShowPatternInfo
Whether or not to launch with the Code Viewer open.
type:booleandefault:
false
frontMatterExtension
The file extension for annotation files, syntaxed in a superset of Front Matter, a superset comprising YAML and Markdown.
type:stringdefault:
.md
hashPatterns
Whether or not to hash patterns per build. Setting this to true will improve build performance by skipping unchanged patterns.
type:booleandefault:
true
ishControlsHide
Whether or not to hide UI toolbar items.
type:objectdefault:
"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:numberdefault:
240
ishMaximum
The maximum viewport width the UI will render.
type:numberdefault:
2600
patternExportDirectory
The relative path to the directory that patterns will be exported to if patternExportPatternPartials has items.
stringdefault:
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:arraydefault:
[]
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:stringdefault:
.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:arraydefault:
[]