CONTRIBUTING_DEV.md

Developing the Red Hat Design System

Prerequisites

To develop components or design system documentation, you must first install some required software, namely node.js. We use nvm to ensure a uniform development environment.

Install Node

Fedora/RHEL users should install nvm for bash directly from GitHub

curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash

Mac users should Install homebrew, then use that to install nvm:

brew install nvm

Clone the Repository

Then change directory to it:

git clone git@github.com:redhat-ux/red-hat-design-system
cd red-hat-design-system

Install Dependencies

Install the right node version using nvm, then install the node_modules dependencies:

nvm use
npm ci

Generate an Element

RHDS uses tools and libraries from @patternfly/patternfly-elements. Use the PatternFly Elements generator to scaffold an element:

npm init @patternfly/element

Run the Dev Server

Run the dev server to develop components. Your changes will automatically refresh the browser window:

npm start

This starts a local dev server at http://localhost:8000 and the 11ty dev server for the docs site at http://localhost:8080

To run only the components dev server, first run the build, then run the dev server:

npm run build
npx wds --open --watch

To run only the docs dev server, first run the build, then 11ty

npm run build
npx eleventy --serve --incremental