Patternfly Seed is an open source build scaffolding utility for web apps. The primary purpose of this project is to give developers a jump start when creating new projects that will use patternfly. A secondary purpose of this project is to serve as a reference for how to configure various aspects of an application that uses patternfly, webpack, react, typescript, etc.

Out of the box you'll get an app layout with chrome (header/sidebar), routing, build pipeline, test suite, and some code quality tools. Basically, all the essentials.

git clone https://github.com/patternfly/patternfly-react-seed # clone the project
cd patternfly-react-seed # navigate into the project directory
npm install # install patternfly-react-seed dependencies
npm run start # start the development server

Install development/build dependencies npm install

Start the development server npm run start:dev

Run a production build npm run build

Run the test suite npm run test

Run the linter npm run lint

Run the code formatter npm run format

Launch a tool to inspect the bundle size npm run bundle-profile:analyze

Start the express server (run a production build first) npm run start

• TypeScript Config
• Webpack Config
• Jest Config
• Editor Config

To use an image asset that's shipped with patternfly core, you'll prefix the paths with "@assets". @assets is an alias for the patternfly assets directory in node_modules.

For example:

import imgSrc from '@assets/images/g_sizing.png';
<img src={imgSrc} alt="Some image" />

You can use a similar technique to import assets from your local app, just prefix the paths with "@app". @app is an alias for the main src/app directory.

import loader from '@app/assets/images/loader.gif';
<img src={loader} alt="Content loading />

Inlining SVG in the app's markup is also possible.

import logo from '@app/assets/images/logo.svg';
<span dangerouslySetInnerHTML={{__html: logo}} />

You can also use SVG when applying background images with CSS. To do this, your SVG's must live under a bgimages directory (this directory name is configurable in webpack.common.js). This is necessary because you may need to use SVG's in several other context (inline images, fonts, icons, etc.) and so we need to be able to differentiate between these usages so the appropriate loader is invoked.

body {
  background: url(./assets/bgimages/img_avatar.svg);
}

• For accessibility compliance, we use react-axe
• To keep our bundle size in check, we use webpack-bundle-analyzer
• To keep our code formatting in check, we use prettier
• To keep our code logic and test coverage in check, we use jest
• To ensure code styles remain consistent, we use eslint