{"id":14976442,"url":"https://github.com/comcast/patternlab-edition-node-webpack","last_synced_at":"2025-04-07T14:12:05.317Z","repository":{"id":26089610,"uuid":"106558155","full_name":"Comcast/patternlab-edition-node-webpack","owner":"Comcast","description":"The webpack wrapper around patternlab-node core, providing tasks to interact with the core library and move supporting frontend assets.","archived":false,"fork":false,"pushed_at":"2022-12-29T05:39:09.000Z","size":1867,"stargazers_count":127,"open_issues_count":27,"forks_count":95,"subscribers_count":19,"default_branch":"master","last_synced_at":"2025-04-07T14:11:34.566Z","etag":null,"topics":["design-systems","hacktoberfest","nodejs","pattern-lab","pattern-library","webpack3"],"latest_commit_sha":null,"homepage":"https://comcast.github.io/patternlab-edition-node-webpack/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Comcast.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-10-11T13:30:58.000Z","updated_at":"2025-01-26T14:41:02.000Z","dependencies_parsed_at":"2023-01-14T04:01:00.555Z","dependency_job_id":null,"html_url":"https://github.com/Comcast/patternlab-edition-node-webpack","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Comcast%2Fpatternlab-edition-node-webpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Comcast%2Fpatternlab-edition-node-webpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Comcast%2Fpatternlab-edition-node-webpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Comcast%2Fpatternlab-edition-node-webpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Comcast","download_url":"https://codeload.github.com/Comcast/patternlab-edition-node-webpack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247666014,"owners_count":20975788,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["design-systems","hacktoberfest","nodejs","pattern-lab","pattern-library","webpack3"],"created_at":"2024-09-24T13:53:53.624Z","updated_at":"2025-04-07T14:12:05.284Z","avatar_url":"https://github.com/Comcast.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Apache V2 License](http://img.shields.io/badge/license-Apache%20V2-blue.svg)](https://github.com/Comcast/patternlab-edition-node-webpack/blob/master/LICENSE)\n\n# Pattern Lab Node - Webpack Edition\n\nThe webpack wrapper around [Pattern Lab Node Core](https://github.com/pattern-lab/patternlab-node) providing tasks to interact with the core library and move supporting frontend assets.\n\n## Packaged Components\n\nThe webpack edition comes with the following components:\n\n-   `patternlab-node`: [GitHub](https://github.com/pattern-lab/patternlab-node), [npm](https://www.npmjs.com/package/patternlab-node)\n-   `patternengine-node-mustache`: [GitHub](https://github.com/pattern-lab/patternengine-node-mustache), [npm](https://www.npmjs.com/package/patternengine-node-mustache)\n-   `pattern-lab/styleguidekit-assets-default`: [GitHub](https://github.com/pattern-lab/styleguidekit-assets-default)\n-   `pattern-lab/styleguidekit-mustache-default`: [GitHub](https://github.com/pattern-lab/styleguidekit-mustache-default)\n\n## Prerequisites\n\nThe Pattern Lab Node - webpack edition uses [Node](https://nodejs.org/en/) for core processing, [npm](https://www.npmjs.com/) to manage project dependencies, and [webpack.io](https://webpack.github.io/) to run tasks and interface with the core library. Node version 4 or higher suffices. You can follow the directions for [installing Node](https://nodejs.org/en/download/) on the Node website if you haven't done so already. Installation of Node will include npm.\n\n## Quickstart Guide\n\n_Note: You must have all of the prerequisites first_\n\n1.  Download the `.zip` or fork this repository, then clone it locally.\n    \u003e `git clone git@github.com:YOURGROUP/patternlab-edition-node-webpack.git`\n1.  In a terminal window, navigate to the downloaded directory\n    \u003e `cd path/to/patternlab-edition-node-webpack`\n1.  To populate Patternlab with sample data, install a starter kit, there are many [starterkits](https://github.com/pattern-lab?utf8=%E2%9C%93\u0026q=starterkit\u0026type=\u0026language=) choose from\n    \u003e `npm install starterkit-mustache-demo`\n1.  Generate sample files\n    \u003e `npm run patternlab:loadstarterkit --kit=starterkit-mustache-demo`\n1.  Show Patternlab in a Webbrowser\n    \u003e `npm run patternlab:serve`\n\n## Installing\n\n`npm install`\n\n### What's Included\n\nThe pre-built project comes with the [Base Starterkit for Mustache](https://github.com/pattern-lab/starterkit-mustache-base) installed by default.\n\n**Please note:** Pattern Lab Node uses [npm](https://www.npmjs.com/) to manage project dependencies. To upgrade the webpack edition or to install plug-ins you'll need to be familiar with npm.\n\n### Use npm\n\n`npm` is a dependency management and package system which can pull in all of the webpack editions's dependencies for you. To accomplish this:\n\n-   download or `git clone` this repository to an install location.\n\n-   run the following\n\n    ```\n    cd install/location\n    npm install\n    ```\n\nRunning `npm install` from a directory containing a `package.json` file will download all dependencies defined within. The `package-lock.json` file is automatically managaged everytime you add/remove/upgrade a dependency.\n\n#### Install the Webpack Edition of Pattern Lab Node as a Dependency\n\nMost people want to run Pattern Lab Node standalone and not as a dependency. If you wish to install as a dependency you can do the following:\n\nUse npm's `install` command with an argument to install the Webpack Edition into a location of your choosing. In Terminal type:\n\n    cd install/location/\n    npm install edition-node-webpack\n\nThis will install the Webpack Edition into a directory called `node_modules` in `install/location/`.\n\n## Getting Started\n\nThe Pattern Lab Node - Webpack Edition ships with a [base experience](https://github.com/pattern-lab/starterkit-mustache-base) 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](https://github.com/pattern-lab/starterkit-mustache-demo) like the one on [demo.patternlab.io](http://demo.patternlab.io), you can do so automatically at time of `npm install` by adding your starterkit to the `package.json` file.\n\nYou can also [work with starterkits using the command line](https://github.com/pattern-lab/patternlab-node/wiki/Importing-Starterkits).\n\n## Updating Pattern Lab\n\nTo update Pattern Lab please refer to each component's GitHub repository, and the [master instructions for core](https://github.com/pattern-lab/patternlab-node/wiki/Upgrading). The components are listed at the top of the README.\n\n### List all of the available commands\n\nTo list all available commands type:\n\n    npm run patternlab:help\n\n### Generate Pattern Lab\n\nTo generate the front-end for Pattern Lab type:\n\n    npm run patternlab:build\n\n### Watch for changes and re-generate Pattern Lab\n\nTo watch for changes, re-generate the front-end, and server it via a BrowserSync server, type:\n\n    npm run patternlab:serve\n\nWebpack dev server should open [http://localhost:3000](http://localhost:3000) in your browser, both host and port are configurable in the `patternlab-config.json` file.\n\n### Install a StarterKit\n\nTo install a specific StarterKit from GitHub type:\n\n    npm install [starterkit-name]\n\n    npm run patternlab:loadstarterkit --kit=[starterkit-name]\n\n### Pattern Lab - Configuration\n\nUnlike the other editions, there were a few options added just for this edition that allow for easier upgrading, and better flexibility.\n\n#### Custom Webpack Configuration and Merge Options\n\nIn 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 custom configuration and merge are described [here.](https://github.com/Comcast/patternlab-edition-node-webpack/blob/master/source/_app/readme.md)\n\nYou can change how it merges by changing this object in `patternlab-config.json`:\n\n```javascript\n    \"webpackMerge\": {\n        \"entry\": \"replace\"\n    },\n```\nBy 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.](https://www.npmjs.com/package/webpack-merge#mergesmartstrategy-key-prependappendreplaceconfiguration--configuration)\n\n#### Setting Webpack Dev Server\n\nYou can set several options to configure your dev server. You can also in the CLI pass any option on demand.\n\n```javascript\n    \"webpackDevServer\": {\n        \"url\": \"http://localhost\",\n        \"port\": 3000,\n        \"watchContentBase\": true,\n        \"watchOptions\": {\n            \"aggregateTimeout\": 500,\n            \"ignored\": [],\n            \"info-verbosity\": \"verbose\"\n        }\n    },\n```\n#### Modifying the compression settings for bundles\n\nYou can safely modify the following settings in the the main `webpack.babel.config` that can change how the bundles get optimized.\n\n_Note: in webpack 4, these settings are automatically triggered when `mode=production` when running the dev server this is not used._\n\nAll uglify settings are in the `patternlab-config.json`:\n\n```javascript\n    \"uglify\": {\n        \"sourceMap\": false,\n        \"parallel\": true,\n        \"uglifyOptions\": {\n            \"mangle\": false\n        }\n    },\n```\n#### Namespace\nIn some cases you may want to add a namespace to your JS or CSS/SCSS files. You can now add a global `NAMESPACE` which can be read by any JS module. The sample of .scss includes how to use it in a `.SCSS` file.\n\nThis can be changed in the`patternlab-config.json` under `app`:\n\n```javascript\n    \"app\": {\n        \"namespace\": \"\"\n    }\n```\n### Licenses\n* [babel-cli](https://github.com/babel/babel/blob/master/LICENSE) - MIT\n* [babel-core](https://github.com/babel/babel/blob/master/LICENSE) - MIT\n* [babel-polyfill](https://github.com/babel/babel-loader/blob/master/LICENSE) -MIT\n* [babel-loader](https://github.com/babel/babel-loader/blob/master/LICENSE) -MIT\n* [babel-preset-env](https://github.com/babel/babel/blob/master/LICENSE) - MIT\n* [babel-register](https://github.com/babel/babel-loader/blob/master/LICENSE) -MIT\n* [copy-webpack-plugin](https://github.com/webpack-contrib/copy-webpack-plugin/blob/master/LICENSE) - MIT\n* [event-hooks-webpack-plugin](https://github.com/cascornelissen/event-hooks-webpack-plugin/blob/master/LICENSE.md) - MIT\n* [globby](https://github.com/sindresorhus/globby/blob/master/license) - MIT\n* [patternlab-node](https://github.com/pattern-lab/patternlab-node/blob/master/LICENSE) - MIT\n* [styleguidekit-assets-default](https://github.com/pattern-lab/styleguidekit-assets-default/blob/master/LICENSE) - MIT\n* [styleguidekit-mustache-default](https://github.com/pattern-lab/styleguidekit-mustache-default/blob/master/LICENSE) - MIT\n* [uglifyjs-webpack-plugin](https://github.com/webpack-contrib/uglifyjs-webpack-plugin/blob/master/LICENSE) - MIT\n* [webpack](https://github.com/webpack/webpack/blob/master/LICENSE) - MIT\n* [webpack-config-utils](https://github.com/kentcdodds/webpack-config-utils/blob/master/LICENSE) - MIT\n* [webpack-dev-server](https://github.com/webpack/webpack-dev-server/blob/master/LICENSE) - MIT\n* [webpack-merge](https://github.com/survivejs/webpack-merge/blob/master/LICENSE) - MIT\n\n### Contributors\n\n| | | |\n----------- | :-------------- | :-- |\n| ![@Josh68](https://avatars2.githubusercontent.com/u/771447?s=75\u0026v=4)| **Josh Schneider** | [GitHub](https://github.com/Josh68)\n| ![@paintedbicycle](https://avatars3.githubusercontent.com/u/371114?s=75\u0026v=4)| **Paul Wright** | [Website](https://paintedbicycle.com)\n````\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcomcast%2Fpatternlab-edition-node-webpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcomcast%2Fpatternlab-edition-node-webpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcomcast%2Fpatternlab-edition-node-webpack/lists"}