Adding PatternFly to an existing project

adding-patternfly.md

Adding PatternFly to an existing project

The easiest option is to install and then link directly to the node_modules path.

1. Add dependency for patternfly:

npm install --save patternfly

OR Update list of dependencies in package.json to include:

"patternfly": "^3.23.2",

2. Add dev-dependency for copy-webpack-plugin

npm install --save-dev copy-webpack-plugin

OR Update list of dev-dependencies in package.json to include:

"copy-webpack-plugin": "^3.0.1",

3. Update webpack.config.js so that patternfly files are copied into the build folders (see example):

var CopyWebpackPlugin = require('copy-webpack-plugin');
…
//copy patternfly assets
new CopyWebpackPlugin([
    {
        from: { glob: './node_modules/patternfly/dist/img/*.*'},
        to: './img',
        flatten: true
    },
    {
        from: { glob: './node_modules/patternfly/dist/fonts/*.*'},
        to: './fonts',
        flatten: true
    },
    {
        from: { glob: './node_modules/patternfly/dist/css/*.*'},
        to: './css',
        flatten: true
    }
]),

Destination path should map to where the public files are, and may differ depending on the project file structure

Update links in index.html to include links to the following css files in these destination folders:

<link rel="stylesheet" href="css/patternfly.min.css">
<link rel="stylesheet" href="css/patternfly-additions.min.css">