foreman supported 3rd-party node_modules

Usage no npm install needed!

<script type="module">
  import theforemanVendor from 'https://cdn.skypack.dev/@theforeman/vendor';



foreman supported 3rd-party node_modules

Package Version Downloads Status Build Status: Linux PRs Welcome code style: prettier

What you get with this project


npm install --save @theforeman/vendor

Add the ForemanVendorPlugin to your webpack plugins:

// webpack.config.js
const ForemanVendorPlugin = require('@theforeman/vendor');

module.exports = {
  entry: { ... },
  output: { ... },
  module: { ... },
  plugins: [
    new ForemanVendorPlugin({ mode: 'production' }),

ForemanVendorPlugin options

attribute default value description
mode production Can be set to development or production so the plugin will use the correct version of the provided 3rd-parties.


@theforeman/vendor based on patternfly-react. It build the patternfly-react partials into the ./dist/foreman-vendor.bundle.css and provides their variables and mixins sets to reuse.

@import "~@theforeman/vendor/scss/variables";
@import "~@theforeman/vendor/scss/mixins";

Development enviorment

See @theforeman/vendor-dev for development installation.


This project use webpack to produce development and production versions of bundled javascript and css files together with a manifest.json and a webpack-plugin to use by the consumer. To build them into the ./dist folder, run:

# build bundled production, development, webpack-plugin, scss and docs
npm run build
# build bundled production and development
npm run build:bundle
# build bundled  production
npm run build:bundle:prod
# build bundled  development
npm run build:bundle:dev
# build the webpack-plugin
npm run build:plugin
# build the scss files
npm run build:scss
# build docs
npm run build:docs
# build docs analyze html report
npm run build:docs:analyze
# build docs about scss
npm run build:docs:scss

Running npm run build will produce ./dist, ./scss and ./docs folders with the following files:

├── foreman-vendor.bundle-[version]-development-[hash].css
├── foreman-vendor.bundle-[version]-development-[hash].css.gz
├── foreman-vendor.bundle-[version]-development-[hash].css.map
├── foreman-vendor.bundle-[version]-development-[hash].css.map.gz
├── foreman-vendor.bundle-[version]-development-[hash].js
├── foreman-vendor.bundle-[version]-development-[hash].js.gz
├── foreman-vendor.bundle-[version]-development-[hash].js.map
├── foreman-vendor.bundle-[version]-development-[hash].js.map.gz
├── foreman-vendor.bundle-[version]-production-[hash].css
├── foreman-vendor.bundle-[version]-production-[hash].css.gz
├── foreman-vendor.bundle-[version]-production-[hash].css.map
├── foreman-vendor.bundle-[version]-production-[hash].css.map.gz
├── foreman-vendor.bundle-[version]-production-[hash].js
├── foreman-vendor.bundle-[version]-production-[hash].js.gz
├── foreman-vendor.bundle-[version]-production-[hash].js.map
├── foreman-vendor.bundle-[version]-production-[hash].js.map.gz
├── manifest.development.json
├── manifest.development.json.gz
├── manifest.production.json
├── manifest.production.json.gz
└── vendor-webpack-plugin.js

0 directories, 21 files

├── scss
│   ├── mixins.scss
│   └── variables.scss
├── stats.development.html
└── stats.production.html

1 directory, 4 files

├── mixins.scss
└── variables.scss

0 directories, 2 files

Code Linting

This project uses eslint with patternfly-react:recommended rules, to lint your code run:

npm run lint


Please checkout the contributing.md, the roadmap.md and the open issues.