Skip to content
A PatternFly 4 seed for React web applications
TypeScript JavaScript HTML CSS
Branch: master
Clone or download
seanforyou23 feat(eslint): add eslint in addition to tslint (#75)
* feat(eslint): add eslint in addition to tslint

integrate eslint with pf recommended rules
update deps
adjust test to be more useful
dark theme for sidenav

* [cleanup] add support for linting js files

be more specific about which rules are disabled
update readme
Latest commit b245fa4 Nov 13, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook feat: add Storybook (#66) Oct 1, 2019
__mocks__ fix(images): ensure base support for image assets Mar 12, 2019
src feat(eslint): add eslint in addition to tslint (#75) Nov 13, 2019
stories feat: add Storybook (#66) Oct 1, 2019
.editorconfig feat(code quality): lint base packages, configuration Nov 28, 2018
.eslintrc feat(eslint): add eslint in addition to tslint (#75) Nov 13, 2019
.gitignore feat: add Storybook (#66) Oct 1, 2019
.prettierignore feat(code quality): lint base packages, configuration Nov 28, 2018
.prettierrc feat(code quality): lint base packages, configuration Nov 28, 2018
LICENSE [issue-1] add base project files Nov 16, 2018
README.md feat(eslint): add eslint in addition to tslint (#75) Nov 13, 2019
jest.config.js chore(paths): register path alias with jest so tests can resolve modu… Apr 2, 2019
package.json feat(eslint): add eslint in addition to tslint (#75) Nov 13, 2019
test-setup.js fix(add tests): add example of using enzyme assertions and jest (#18) Feb 6, 2019
tsconfig.json feat(eslint): add eslint in addition to tslint (#75) Nov 13, 2019
tslint.json feat(eslint): add eslint in addition to tslint (#75) Nov 13, 2019
webpack.common.js feat: add Storybook (#66) Oct 1, 2019
webpack.dev.js Refactor title support (#64) Sep 12, 2019
webpack.prod.js feat(bundle-size): minify js, too (#67) Oct 1, 2019
yarn.lock feat(eslint): add eslint in addition to tslint (#75) Nov 13, 2019

README.md

Patternfly Seed

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.

Out of box dashboard view of patternfly seed

Quick-start

npm install yarn -g # ensure you have yarn on your machine globally
git clone https://github.com/patternfly/patternfly-react-seed # clone the project
cd patternfly-react-seed # navigate into the project directory
yarn # install patternfly-react-seed dependencies
yarn build # build the project
yarn start # start the development server

Development Scripts

Install development/build dependencies yarn

Start the development server yarn start

Run a production build yarn build

Run the test suite yarn test

Run the linter yarn lint

Run the code formatter yarn format

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

Configurations

Raster Image Support

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 />

Vector Image Support

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);
}

Code Quality Tools

  • 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

Linter Supper

Currently, eslint and tslint are both supported. This is temporary. We will be removing support for tslint at some point in the near future, given tslint's roadmap to deprecate itself in favor of a more unified developer experience across TypeScript and JavaScript languages.

You can’t perform that action at this time.