• Stars
    star
    127
  • Rank 282,790 (Top 6 %)
  • Language
    JavaScript
  • License
    Apache License 2.0
  • Created about 7 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

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

More Repositories

1

FreeFlow

A layout engine for Android that decouples layouts from the View containers that manage scrolling and view recycling. FreeFlow makes it really easy to create custom layouts and beautiful transition animations as data and layouts change
Java
2,397
star
2

rulio

Rulio
Go
336
star
3

gots

MPEG Transport Stream handling in Go
Go
306
star
4

sirius

A distributed system library for managing application reference data
Scala
298
star
5

cmb

This project is no longer actively supported. It is made available as read-only. A highly available, horizontally scalable queuing and notification service compatible with AWS SQS and SNS
Java
278
star
6

jrugged

A Java libary of robustness design patterns
Java
266
star
7

ip4s

Defines immutable, safe data structures for describing IP addresses, multicast joins, socket addresses and similar IP & network related data types
Scala
224
star
8

mamba

Mamba is a Swift iOS, tvOS and macOS framework to parse, validate and write HTTP Live Streaming (HLS) data.
Swift
178
star
9

kube-yarn

Running YARN on Kubernetes with PetSet controller.
Makefile
166
star
10

k8sh

A simple, easily extensible shell for navigating your kubernetes clusters
Shell
155
star
11

gaad

GAAD (Go Advanced Audio Decoder)
Go
126
star
12

sheens

Message Machines
Go
119
star
13

eel

A simple proxy service to forward JSON events and transform or filter them along the way.
Go
105
star
14

Speed-testJS

JavaScript
94
star
15

traffic_control

Traffic Control CDN
92
star
16

Surf-N-Perf

Micro-library for gathering web page performance data
JavaScript
90
star
17

pulsar-client-go

A Go client library for Apache Pulsar
Go
78
star
18

graphvinci

A better schema visualizer for GraphQL APIs
JavaScript
74
star
19

MirrorTool-for-Kafka-Connect

A Kafka Source connector for Kafka Connect
Java
72
star
20

php-legal-licenses

A utility to help generate a file containing information about dependencies including the full license text.
PHP
70
star
21

caption-inspector

Caption Inspector is a reference decoder for Closed Captions (CEA-608 and CEA-708).
C
69
star
22

money

Dapper Style Distributed Tracing Instrumentation Libraries
Scala
67
star
23

compass-csslint

Easily integrate CSS Lint into your projects that use the Compass CSS Framework
Ruby
65
star
24

snowdrift

App to perform testing and validation of firewall rules
Shell
63
star
25

dialyzex

A Mix task for type-checking your Elixir project with dialyzer
Elixir
61
star
26

ssh-to

Easily manage dozens or hundreds of machines via SSH
Shell
58
star
27

ansible-sdkman

An Ansible role that installs, configures, and manages SDKMAN
Python
58
star
28

Bynar

Server remediation as a service
Rust
57
star
29

xGitGuard

AI based Secrets Detection Python Framework
Python
54
star
30

Canticle

Go
50
star
31

scte35-js

A SCTE 35 Parser for JavaScript
HTML
47
star
32

go-leaderelection

GoLea is a Go library that provides the capability for a set of distributed processes to compete for leadership for a shared resource.
Go
45
star
33

Comcast.github.io-archive

The main Open Source portal for Comcast
HTML
38
star
34

scte35-go

Golang implementation of ANSI/SCTE-35
Go
36
star
35

sitemapper-for-js

Generate XML sitemaps for JS Websites (Supports Angular, React)
JavaScript
35
star
36

zucchini

Run your cucumber-jvm tests in parallel across all your devices
Java
34
star
37

Oscar

OSCAR - OpenSource Cablemodem file AssembleR - DOCSIS, PacketCable, DPoE Configuration Editor and API Framework
Java
33
star
38

hlsparserj

Java
32
star
39

weasel

Lightweight license checker.
Go
32
star
40

Infinite-File-Curtailer

Curtail is a utility program that reads stdin and writes to a file bound by size.
C
32
star
41

DahDit

Custom Views for drawing Dotted and Dashed Lines without jumping through hoops.
Kotlin
27
star
42

resourceprovider2

Resource Management API Generator for Android
Kotlin
22
star
43

python-batch-runner

A tiny framework for building batch applications as a collection of tasks in a workflow.
Python
22
star
44

Buildenv-Tool

Go
21
star
45

blueprint

Blueprint is a compact framework for constructing mvp architecture within a scrollable, multi-view-type list UI. It uses the Android RecyclerView library, and currently only supports LinearLayouts
Kotlin
21
star
46

comcast.github.io

The main Open Source portal for Comcast
JavaScript
20
star
47

ProjectGuardRail

AI/ML applications have unique security threats. Project GuardRail is a set of security and privacy requirements that AI/ML applications should meet during their design phase that serve as guardrails against these threats. These requirements help scope the threats such applications must be protected against.
20
star
48

resourceprovider-utils

Samples and Test Utilities Library for the ResourceProvider API Generator Gradle Plugin for Android.
Java
19
star
49

xCOMPASS

This repository hosts a persona based privacy threat modeling solution called Models of Applied Privacy or MAP.
17
star
50

compass-csscss

Easily integrate csscss into your projects that use the Compass CSS Framework
Ruby
16
star
51

go-edgegrid

A Golang Akamai API client and Akamai OPEN EdgeGrid Authentication scheme authentication handler.
Go
16
star
52

cea-extractor

Parsing and display logic for CEA-608 caption data in fragmented MP4 files.
TypeScript
16
star
53

all-digital

Comcast All Digital CSS
SCSS
15
star
54

littlesheens

A Sheens implementation that has a small footprint
C
15
star
55

rdk-on-raspberrypi

Documentation for running RDK profiles ( Video, broadband, Camera ) on Raspberrypi boards
15
star
56

terraform-provider-akamai

An Akamai GTM Terraform provider
Go
14
star
57

Xooie

Important note: this project is no longer actively maintained. Xfinity Xooie - Modular, Modifiable, Responsive, Accessible
JavaScript
14
star
58

Superior-Cache-ANalyzer

A tool for inspecting the contents of Apache Traffic Server caches
Python
14
star
59

ActorServiceRegistry

Scala
14
star
60

connvitals-monitor

A persistent monitor and aggregator of network statistics
Python
13
star
61

RestfulHttpsProxy

Go
13
star
62

Priority-Operation-Processing

A workflow orchestration system where the workflow is scheduled as a unit giving resource priority once selected. Priority queuing and customizable scheduling algorithms. Customer aware for multi-tenant. A JSON DAG based blueprint defines the execution flow. Executes operations within a workflow by spinning up on-demand Kubernetes Pods (dynamic resource allocation)
Java
13
star
63

connvitals

A network analysis and statistics aggregation tool
Python
13
star
64

xml-selector

A jQuery-like interface for working with XML using CSS-style selectors
JavaScript
12
star
65

prombox

Prombox creates a sandbox environment for editing and testing Prometheus configuration on the fly
JavaScript
12
star
66

svn-to-github

Comprehensive Tool for Converting SVN to Git in Bulk
Shell
12
star
67

watchmen-ping-nightmare

A plugin for watchmen that uses nightmare and an electron browser to monitor websites
JavaScript
12
star
68

tsb

A Transitive Source Builder for managing builds across multiple repositories
Go
11
star
69

scte224structs

Utilities for modeling SCTE-224 data in Go
Go
11
star
70

cf-recycle-plugin

Cloud Foundry cli plugin for rolling restart of application instances
Go
10
star
71

redirector

Java
10
star
72

discovery

The Comcast discovery services for the open source community
Java
10
star
73

fishymetrics

Redfish API Prometheus Exporter for monitoring large scale server deployments
Go
10
star
74

libcertifier

With small, space optimized, 90KB libCertifier(), IoT devices (cameras, toasters, sensors โ€ฆ.) can now request and receive unique, compact (650 bytes) digital certificates (x509 v3 compliant).
C
10
star
75

compare-ini-files

Compare an arbitrary number of .ini files based on logical sections and key/value pairs.
PHP
9
star
76

flume2storm

This project is no longer actively maintained. The Flume2Storm repository contains the source code, documentation (wiki) and issue tracking system
Java
9
star
77

cts-mpx

Ruby
8
star
78

ansible-role-pypi

An ansible role for configuring a pypi-server on a systemd centos system.
Python
8
star
79

akamai-slack-reporter

A Slack slash command integration for querying your team's Akamai configuration
JavaScript
8
star
80

rapid-ip-checker

A GPU accelerated tool to compare large lists of IPv4/IPv6 addresses.
Python
8
star
81

css_lint_ruby

Nicholas C. Zakas and Nicole Sullivan's CSS Lint made available as a Ruby gem.
Ruby
8
star
82

akamai-gtm

A CLI to Akamai GTM
Go
8
star
83

DNS-over-HTTPs-translator

Go
7
star
84

tlsrpt_processor

Simple python script to process TLSRPT reports
Python
7
star
85

libstorage

rust storage server helper utilities
Rust
7
star
86

EasyConnect

Reference Development Kit that will help partners and vendors implement EasyConnect in their devices.
Java
7
star
87

dmc-sim

ns3 simulator code for Distributed Monotonic Clocks
C++
7
star
88

jovo-plugin-resume

๐Ÿ”ˆ A plugin for resuming conversations in the Open Source Voice Layer, Jovo (https://www.jovo.tech)
TypeScript
7
star
89

Porrtal

This project was created to help developers. You can use the platform to build web applications. The project supports both React and Angular development.
TypeScript
7
star
90

cf-zdd-plugin

Go
7
star
91

vesper_legacy

Secure Telephone Identity Management in Session Initiation Protocol
Go
7
star
92

SyntaViz

A visualization interface for analyzing a (very large) corpus of natural-language queries.
Python
7
star
93

hypergard

A JavaScript client for HAL APIs with support for forms
JavaScript
7
star
94

ctex

A Mix task and helpers for running common_test suites
Elixir
7
star
95

plax

A test automation engine for messaging systems
Go
7
star
96

Ravel

Go
7
star
97

pipeclamp

Java
6
star
98

rally-rest-toolkit

Client API library for interacting with the Rally REST API
Go
6
star
99

rdkcryptoapi

Contains Cryptographic APIs used in the RDK Software Stack
C
6
star
100

polaris

Vanilla Web Components for global Header, Footer & Toast notifications for XFINITY Websites
JavaScript
6
star