The PatternFly Element Generator
Use the PatternFly Element generator to start the scaffolding process. From the root directory of the PatternFly Elements repository, run the following command.
npm run new
The generator will ask you a series of questions to set up your project.
Your element name:
- Your element’s name should be lowercase and needs to contain at least one hyphen. For rules on naming custom elements, refer to the W3C Custom Elements Working Draft.
- Red Hat prefixes elements with
pfe-for global components and then namespaces web property specific ones like
cp-for the Customer Portal. However, prefix your elements with whatever fits your project.
- As an example, we’ll create
- Add your name
- NOTE: we will update the generator in the future to include an email address and GitHub profile.
Do you want to use Sass with this element? (Yes or No)
If yes to question #3, Do you want to use existing Sass dependencies? (pfe-sass or No thanks. I’ll provide my own later)
- pfe-sass includes the pfe-sass node module with all of the mixins and variables used in PatternFly Elements .
After answering the questions, you’ll see something like this:
Once that’s done, switch directories to the element you just created. We’ll cd into the pfe-cool-element directory.
Open your code editor to view the structure of the element. It’s important to note the
/test directories and the pfe-cool-element.js and pfe-cool-element.compiled.js files. The
/src directory is reserved for development and you can write tests in
/test directory. Finally, the
/demo directory lets you preview your element locally using the pfe-cool-element.js and pfe-cool-element.umd.js files.
Move to Step 2: Develop (Structure)