Integration with module bundlers

This tutorial will help you integrate Flexmonster Pivot with any module bundler.

Prerequisites

• Node.js

Bundling Flexmonster assets

When using a bundler, you need to properly bundle Flexmonster's assets (e.g., styles, fonts, and icons). Some bundlers, like Vite, do it automatically, but usually, you need to configure the following:

• CSS file processing.
• Fonts handling (.woff, .woff2, .eot, .ttf, .otf, .svg files). Ensure that files with the fonts are present in the node_modules/flexmonster/theme/assets/ folder.

For example, when working with webpack, you need to specify the following rules:

const path = require('path');

module.exports = {
  mode: 'development',
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
        type: "asset/inline"
      }
    ]
  }
};

Note that the configs will differ depending on the bundler you are using.

If you encounter any errors, see troubleshooting.

Example

Our sample webpack project shows how webpack must be configured to properly bundle Flexmonster’s assets. Follow the steps below to get the project:

Step 1. To get our sample webpack project, download it as ZIP or clone it with the following commands:

git clone https://github.com/flexmonster/pivot-webpack
cd pivot-webpack 

Step 2. Install the npm dependencies described in package.json:

npm install

Step 3. Run the sample project from the console:

npm start

The application can be shut down manually with Ctrl + C (Control + C on macOS).

The bundler rules are specified in the webpack.config.js file. Check them out.

Troubleshooting

Console error: Unexpected "case" when using Vite 5 or 6

The error message indicates a bug in the Vite transpiler, which fails while attempting to transpile case statements within Flexmonster's code. Read more on Vite GitHub.

To fix the error, use an older version of rollup:

Step 1. Add the following to your project’s package.json file:

"overrides": {
  "rollup": "4.29.2"
}

Step 2. Run npm install to apply the changes.

What’s next?

You may be interested in the following articles:

• Connect to your data source
• Configure Flexmonster
• Update Flexmonster
• Customize Flexmonster