Webpack Config setup

Here we give a suggestion for configuring your Webpack config file to work with Patternfly assets and js libraries. Note that this specific setup is merely a suggestion and you may deviate as you see fit in order to satisfy your requirements.

We assume webpack is set up and your project is created.

Install Patternfly

Install patternfly library:

npm install patternfly --save
# For executing files in global context
npm install --save-dev script-loader

Entry/Output

In your webpack config entries, if you do not have an entry file for javascript libraries it is recommended you create one, for example if you would like to add a patternfly entry point alongside your app entry (e.g.index.jsx), you could do something like:

  entry: {
    'main': './app/javascript/main',
    'app': './app/javascript/index.jsx'
  },

You can use the output config to produce 2 bundled output files, for example:

  output: {
    path: path.join(__dirname, '/app/backend/static/build'),
    publicPath: './',
    filename: '[name].js',
  },

The path is where you want your bundled files to be stored, the filename syntax'[name].js'is required, and lets webpack know to use the name of the entry points resulting in 2 bundled files: main.js, app.js in the path directory. (Note that your html file will need to import both these scripts) .

JS Dependencies

In your main.js (or equivalent file, i.e. the file where you are storing your js library imports), import the following, you may need to edit the paths to the node_modules depending on your project structure:

//Patternfly JS Dependencies Entry
import 'script-loader!../../node_modules/patternfly/node_modules/jquery/dist/jquery.min';

//Bootstrap JS
import '../../node_modules/patternfly/node_modules/bootstrap/dist/js/bootstrap.min';

//Patternfly JS
import '../../node_modules/patternfly/dist/js/patternfly.min.js';

The 'script-loader!...'indicates that a script will be executing in global context.

In your webpack config add the following to notify webpack of this:

  externals: {
      "jquery": "jQuery",
  },

CSS, Fonts, Images

To use the css/font/img files use the CopyWebpackPlugin to move them from the node-modules:

var CopyWebpackPlugin = require('copy-webpack-plugin');

Then add the following under plugins:

plugins: [
    // 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
      },
      {
        from: { glob: './node_modules/react-bootstrap-table/css/*.*'},
        to: './css',
        flatten: true
      }
    ]),
  ],

To make jquery available throughout your app without having to use require or import statements you can use the ProvidePlugin:

    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jquery': 'jquery',
      'window.jQuery': 'jquery',
    }),

you may need to edit the paths to the node_modules depending on your project structure:

C3/D3 Charts

If you would like to use c3/d3 charts, add the following lines in your app entry file:

//C3, D3 Charting Libraries
import 'script-loader!../../node_modules/patternfly/node_modules/c3/c3.min';
import 'script-loader!../../node_modules/patternfly/node_modules/d3/d3.min';

You may need to edit the paths to the node_modules depending on your project structure: