patternfly-demo-app

The PatternFly demo app serves as a boiler for building your production app with PatternFly, Node.JS, and Webpack.

Demo

The main demo can be found here. There is a sample login page as well.

Installation

Install webpack globally:

npm install webpack -g

Install project node modules:

npm i

Development

For development with BrowserSync run:

webpack --config build/webpack.config.js
npm start

Production

For production, you will want to compile your webpack bundle.

webpack -p --config build/webpack.config.js

The resulting build will be in the dist folder.

Extending the Demo App

JS

All js references loaded in src/js/main.js will be chunked by webpack and loaded in a single file, dist/main.bundle.js. Feel free to add your own JS scripts and require them in the bundle.

If you would like to add d3.js or c3.js charts to your page, include the charts bundle in dist/charts.bundle.js.

HTML

All HTML documents added to src/html are copied as-is to the dist folder.

CSS/LESS

Less/css is written to a file via the extract-text plugin. You can write any custom less in src/less/custom.less and it will be compiled to dist/custom.css which can be referenced in your HTML.

Note that images and fonts referenced in your custom css are automatically inlined via webpack url-loader.

Webpack dev notes

You will want to copy any html or images that are referenced in html tags to your dist folder via the copy-webpack plugin. An alternative is to source images in your js/jsx templates and html-loader can compress them.

        new CopyWebpackPlugin([
            {
                from: { glob:'./src/html/*.html'},
                to: './',
                flatten: true
            },
            {
                from: { glob: 'node_modules/patternfly/dist/img/*.*'},
                to: './img',
                flatten: true
            }
        ]),

WebpackDevMiddleware / Hot Module Replacement

While developing and making to changes to src files, you should see changes propagate immediately to the browser. Files are also updated in the dist folder via the write-file-plugin.

Note: New files will not be included automatically - you must restart your server with npm start.

Note: you can gitignore webpack incremental updates. These are written to dist/hot. You can read more about this here.

Having trouble with Webpack?

Given it is a new technology, there is certainly room for error. You can sometimes trace more error info with the --display-error-details arg:

webpack -p --config build/webpack.config.js --display-error-details

Also, there is a wonderful collection of detailed examples in the webpack project here.

There are some more helpful debugging tips here.

If you are still having troubles, find us on PatternFly Gitter or ask someone in the Webpack community.