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: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.
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.
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.
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:
[]