Skip to content

Importing Starterkits

Jump to bottom
Brian Muenzenmeyer edited this page Aug 16, 2016 · 7 revisions

Starterkits are a potent way to spin up a Pattern Lab instance from a baseline set of patterns and assets. An agency could use it for each new client.

Referencing, immutable starterkits that serve as a baseline for many products are on the roadmap, but are not supported at this time.

If you are using Pattern Lab Node 2.X.X, you may use npm to import any starterkit that meets the right criteria.

  • The starterkit must have a package.json file so npm can install it
  • The starterkit must map its directories with the source: {...} paths defined in patternlab-config.json
    • Usually this is:
      • _annotations/
      • _data/
      • _meta/
      • _patterns/
      • css/
      • fonts/
      • images/
      • js/
      • favicon.ico

An example of a starterkit that meets these specs is starterkit-mustache-demo.

Command Line

To import the starterkit, execute the following commands from a prompt:

npm install [starterkit-name]
gulp patternlab:loadstarterkit --kit=[starterkit-name]

where [starterkit-name] is the name of the starterkit.

so... a complete example:

npm install starterkit-mustache-demo
gulp patternlab:loadstarterkit --kit=starterkit-mustache-demo

npm

A starterkit defined in an edition's package.json dependencies will be automatically loaded on npm install. Right now this feature only supported one starterkit. Here is a complete example dependencies object from a package.json file.

  "dependencies": {
    "browser-sync": "^2.11.2",
    "gulp": "gulpjs/gulp#4.0",
    "minimist": "^1.2.0",
    "patternlab-node": "^2.0.0",
    "starterkit-mustache-demo" : "^4.0.0",
    "styleguidekit-assets-default": "^3.0.0",
    "styleguidekit-mustache-default": "^3.0.0"
  },

PSA

LOADING A STARTERKIT WILL OVERWRITE ANY MATCHES INSIDE ./source Users can pass another flag --clean=true to attempt to delete the contents of ./source** prior to load.

  • Sometimes users will run into file permissions issues. It's recommended to run all command prompts as administrator if you can.

patternlab-config.json also defines a starterkitSubDir key which can be used to target a directory inside the starterkit module if need be.

Clone this wiki locally