The current setting for webpack custom configuration and merge are described here. In this edition, it's important to make the configuration for webpack something very easy to update, and very easy to modify. Custom Webpack Configuration and Merge Options Unlike the other editions, there were a few options added just for this edition that allow for easier upgrading, and better flexibility.
To install a specific StarterKit from GitHub type: npm install Webpack dev server should open in your browser, both host and port are configurable in the patternlab-config.json file. To watch for changes, re-generate the front-end, and server it via a BrowserSync server, type: npm run patternlab:serve Watch for changes and re-generate Pattern Lab To generate the front-end for Pattern Lab type: npm run patternlab:build To list all available commands type: npm run patternlab:help The components are listed at the top of the README.
To update Pattern Lab please refer to each component's GitHub repository, and the master instructions for core.
You can also work with starterkits using the command line. But if you want to get rolling with a starterkit of your own, or use the demo starterkit like the one on, you can do so automatically at time of npm install by adding your starterkit to the package.json file. The Pattern Lab Node - Webpack Edition ships with a base experience which serves as clean place to start from scratch with Pattern Lab. This will install the Webpack Edition into a directory called node_modules in install/location/. Use npm's install command with an argument to install the Webpack Edition into a location of your choosing. If you wish to install as a dependency you can do the following: Most people want to run Pattern Lab Node standalone and not as a dependency. Install the Webpack Edition of Pattern Lab Node as a Dependency
The package-lock.json file is automatically managaged everytime you add/remove/upgrade a dependency. Running npm install from a directory containing a package.json file will download all dependencies defined within. To accomplish this:Äownload or git clone this repository to an install location. Npm is a dependency management and package system which can pull in all of the webpack editions's dependencies for you.
To upgrade the webpack edition or to install plug-ins you'll need to be familiar with npm. Please note: Pattern Lab Node uses npm to manage project dependencies. The pre-built project comes with the Base Starterkit for Mustache installed by default. Npm run patternlab:loadstarterkit -kit=starterkit-mustache-demo To populate Patternlab with sample data, install a starter kit, there are many starterkits choose from.In a terminal window, navigate to the downloaded directoryĬd path/to/patternlab-edition-node-webpack.
zip or fork this repository, then clone it locally. Note: You must have all of the prerequisites first You can follow the directions for installing Node on the Node website if you haven't done so already. 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. pattern-lab/styleguidekit-mustache-default: GitHub.pattern-lab/styleguidekit-assets-default: GitHub.patternengine-node-mustache: GitHub, npm.The webpack edition comes with the following components: The webpack wrapper around Pattern Lab Node Core providing tasks to interact with the core library and move supporting frontend assets.