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 project node modules:

npm i

Development

For development with BrowserSync run:

npm start

This will do two things:

1. It will build the static assets in the dist directory. You can just click on the dist/index.html file to browse around.
2. It will automatically open up the running application in your default browser, which is located at localhost:3000.

Production

For production, you will just want to compile your webpack bundle. You'd then have to choose how to run your app (e.g. with Node by running node server/app.js, setting up CI, a process monitor, etc.; serving static assets built in the /dist directory) depending on your needs.

npm run build:prod

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.