The webpack wrapper around Pattern Lab Node Core providing tasks to interact with the core library and move supporting frontend assets.
yarn install
ornpm install
yarn start
ornpm run start
The webpack edition comes with the following components:
patternlab-node
: GitHub, npmpatternengine-node-mustache
: GitHub, npmpattern-lab/styleguidekit-assets-default
: GitHubpattern-lab/styleguidekit-mustache-default
: GitHub
The Pattern Lab Node - webpack edition uses Node for core processing, npm to manage project dependencies, and webpack.io to run tasks and interface with the core library. Node version 4 or higher suffices. You can follow the directions for installing Node on the Node website if you haven't done so already. Installation of Node will include npm. Also includes yarn package manager which makes things a bit easier to manage.
There's two options for installing this version:
yarn install
(Preferred)npm install
The pre-built project comes with the Base Starterkit for Mustache installed by default.
Please note: Pattern Lab Node uses npm to manage project dependencies. To upgrade the webpack edition or to install plug-ins you'll need to be familiar with npm.
npm
is a dependency management and package system which can pull in all of the webpack editions's dependencies for you. To accomplish this:
-
download or
git clone
this repository to an install location. -
run the following
cd install/location yarn install
Running yarn install
or npm install
from a directory containing a package.json
file will download all dependencies defined within. The yarn.lock
file is automatically managaged everytime you add/remove/upgrade a dependency. Currently yarn
is faster than npm
so it's the preferred method of running scripts.
The Pattern Lab Node - Webpack Edition ships with a base experience which serves as clean place to start from scratch with Pattern Lab. But if you want to get rolling with a starterkit of your own, or use the demo starterkit like the one on demo.patternlab.io, you can do so automatically at time of yarn install
by adding your starterkit to the package.json
file.
You can also work with starterkits using the command line.
To update Pattern Lab please refer to each component's GitHub repository, and the master instructions for core. The components are listed at the top of the README.
To list all available commands type:
yarn patternlab:help
To generate the front-end for Pattern Lab type:
yarn patternlab:build
To watch for changes, re-generate the front-end, and server it via a BrowserSync server, type:
yarn patternlab:serve
Webpack dev server should open http://localhost:3000 in your browser, both host and port are configurable in the patternlab-config.json
file.
To install a specific StarterKit from GitHub type:
yarn add [starterkit-vendor/starterkit-name]
yarn patternlab:loadstarterkit --kit=[starterkit-name]
Unlike the other editions, there were a few options added just for this edition that allow for easier upgrading, and better flexibility.
You can set the url and port number in the configuration for
"server": {
"url": "http://localhost",
"port": 3000
},
In this edition, it's important to make the configuration for webpack something very easy to update, and very easy to modify. The current setting for webpack merge are described here.
You can change how it merges by changing this object in patternlab-config.json
:
"webpackMerge": {
"entry":"replace"
},
By default merge does a append
if that option works for you only set which webpack configuration you want to change. The merge setting is: smartStrategy
which is documented over on this page.
- babel-core - MIT
- babel-loader -MIT,
- babel-preset-es2015 - MIT
- copy-webpack-plugin - MIT
- event-hooks-webpack-plugin - MIT
- globby - MIT
- patternlab-node - MIT
- styleguidekit-assets-default - MIT
- styleguidekit-mustache-default - MIT
- webpack - MIT
- webpack-config-utils - MIT
- webpack-dev-server - MIT
- webpack-merge - MIT
Contributor | Special Thanks |
---|---|
"A huge thank you to a incredible developer Rodrigo Gualberto for all of his hard work, dedication, and support from the start of project." |