All Projects → Comcast → Patternlab Edition Node Webpack

Comcast / Patternlab Edition Node Webpack

Licence: apache-2.0
The webpack wrapper around patternlab-node core, providing tasks to interact with the core library and move supporting frontend assets.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Patternlab Edition Node Webpack

Awesome Design Systems
💅🏻 ⚒ A collection of awesome design systems
Stars: ✭ 13,308 (+10808.2%)
Mutual labels:  hacktoberfest, design-systems, pattern-library
Fractal
A tool to help you build and document website component libraries and design systems.
Stars: ✭ 2,003 (+1541.8%)
Mutual labels:  design-systems, pattern-library
Design Systems Repo
A collection of Design System examples, resources, tools, articles and videos.
Stars: ✭ 95 (-22.13%)
Mutual labels:  design-systems, pattern-library
Awesome Design Systems
A curated list of bookmarks, resources and articles about design systems focused on developers.
Stars: ✭ 222 (+81.97%)
Mutual labels:  design-systems, pattern-library
Material Ui
MUI (formerly Material-UI) is the React UI library you always wanted. Follow your own design system, or start with Material Design.
Stars: ✭ 73,739 (+60341.8%)
Mutual labels:  hacktoberfest, design-systems
design-systems
A list of famous design systems, design languages and guidelines
Stars: ✭ 403 (+230.33%)
Mutual labels:  design-systems, pattern-library
Prism
Gett's Design System code generator. Use Zeplin Styleguides as your R&D's Single Source of Truth.
Stars: ✭ 308 (+152.46%)
Mutual labels:  hacktoberfest, design-systems
Design System Starter
🚀 The Australian Government Design System - Starter
Stars: ✭ 61 (-50%)
Mutual labels:  design-systems, pattern-library
Nostyle
Design System
Stars: ✭ 101 (-17.21%)
Mutual labels:  design-systems, pattern-library
Ysi Includes
Just the YSI include files, none of the extra stuff.
Stars: ✭ 122 (+0%)
Mutual labels:  hacktoberfest
Rustc codegen gcc
libgccjit AOT codegen for rustc
Stars: ✭ 116 (-4.92%)
Mutual labels:  hacktoberfest
Aura.auth
Provides a unified interface to local and remote authentication systems.
Stars: ✭ 121 (-0.82%)
Mutual labels:  hacktoberfest
Pyorbital
Orbital and astronomy computations in python
Stars: ✭ 119 (-2.46%)
Mutual labels:  hacktoberfest
Gamedev4noobs
Olá, sejam bem-vindos ao repositório _gamedev4noobs_ do Estúdio Vaca Roxa. O propósito desse repositório, além de contribuir para o projeto 4noobs, é ensinar o básico do desenvolvimento de jogos para iniciantes. Apresentando boas práticas e insumos para criar games incríveis.
Stars: ✭ 122 (+0%)
Mutual labels:  hacktoberfest
Eventum
Eventum Issue Tracking System
Stars: ✭ 120 (-1.64%)
Mutual labels:  hacktoberfest
Shell completion
Write shell completion scripts in pure Rust
Stars: ✭ 122 (+0%)
Mutual labels:  hacktoberfest
Csharp Mode
A major-mode for editing C# in emacs
Stars: ✭ 121 (-0.82%)
Mutual labels:  hacktoberfest
Downlords Faf Client
Official client for Forged Alliance Forever
Stars: ✭ 121 (-0.82%)
Mutual labels:  hacktoberfest
Https Localhost
HTTPS server running on localhost
Stars: ✭ 122 (+0%)
Mutual labels:  hacktoberfest
Cluster.dev
Kubernetes-based Dev Environments with GitOps
Stars: ✭ 122 (+0%)
Mutual labels:  hacktoberfest

Apache V2 License

Pattern Lab Node - Webpack Edition

The webpack wrapper around Pattern Lab Node Core providing tasks to interact with the core library and move supporting frontend assets.

Packaged Components

The webpack edition comes with the following components:

  • patternlab-node: GitHub, npm
  • patternengine-node-mustache: GitHub, npm
  • pattern-lab/styleguidekit-assets-default: GitHub
  • pattern-lab/styleguidekit-mustache-default: GitHub

Prerequisites

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.

Quickstart Guide

Note: You must have all of the prerequisites first

  1. Download the .zip or fork this repository, then clone it locally.

    git clone [email protected]:YOURGROUP/patternlab-edition-node-webpack.git

  2. In a terminal window, navigate to the downloaded directory

    cd path/to/patternlab-edition-node-webpack

  3. To populate Patternlab with sample data, install a starter kit, there are many starterkits choose from

    npm install starterkit-mustache-demo

  4. Generate sample files

    npm run patternlab:loadstarterkit --kit=starterkit-mustache-demo

  5. Show Patternlab in a Webbrowser

    npm run patternlab:serve

Installing

npm install

What's Included

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.

Use 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
    npm install
    

Running 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.

Install the Webpack Edition of Pattern Lab Node as a Dependency

Most 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:

Use npm's install command with an argument to install the Webpack Edition into a location of your choosing. In Terminal type:

cd install/location/
npm install edition-node-webpack

This will install the Webpack Edition into a directory called node_modules in install/location/.

Getting Started

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 npm install by adding your starterkit to the package.json file.

You can also work with starterkits using the command line.

Updating Pattern Lab

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.

List all of the available commands

To list all available commands type:

npm run patternlab:help

Generate Pattern Lab

To generate the front-end for Pattern Lab type:

npm run patternlab:build

Watch for changes and re-generate Pattern Lab

To watch for changes, re-generate the front-end, and server it via a BrowserSync server, type:

npm run 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.

Install a StarterKit

To install a specific StarterKit from GitHub type:

npm install [starterkit-name]

npm run patternlab:loadstarterkit --kit=[starterkit-name]

Pattern Lab - Configuration

Unlike the other editions, there were a few options added just for this edition that allow for easier upgrading, and better flexibility.

Custom Webpack Configuration and Merge Options

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 custom configuration and 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.

Setting Webpack Dev Server

You can set several options to configure your dev server. You can also in the CLI pass any option on demand.

    "webpackDevServer": {
        "url": "http://localhost",
        "port": 3000,
        "watchContentBase": true,
        "watchOptions": {
            "aggregateTimeout": 500,
            "ignored": [],
            "info-verbosity": "verbose"
        }
    },

Modifying the compression settings for bundles

You can safely modify the following settings in the the main webpack.babel.config that can change how the bundles get optimized.

Note: in webpack 4, these settings are automatically triggered when mode=production when running the dev server this is not used.

All uglify settings are in the patternlab-config.json:

    "uglify": {
        "sourceMap": false,
        "parallel": true,
        "uglifyOptions": {
            "mangle": false
        }
    },

Namespace

In 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.

This can be changed in thepatternlab-config.json under app:

    "app": {
        "namespace": ""
    }

Licenses

Contributors

@Josh68 Josh Schneider GitHub
@paintedbicycle Paul Wright Website
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].