Skip to content

Importing Starterkits

Brian Muenzenmeyer edited this page Jun 20, 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.

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.

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.