Step 1. Install

npm install --save-dev @relative-ci/agent

yarn add --dev @relative-ci/agent

Step 2. Configure Webpack

Add RelativeCiAgentWebpackPlugin plugin to your webpack config:

// webpack.config.js
const { RelativeCiAgentWebpackPlugin } = require('@relative-ci/agent');
module.exports = {
  // ... your webpack config
  plugins: [
    // ... other plugins
    new RelativeCiAgentWebpackPlugin()  ]
};

• ExampleWebpack plugin

Nextjs config

// next.config.js
const { RelativeCiAgentWebpackPlugin } = require('@relative-ci/agent');

module.exports = {
  webpack: function (config, options) {
    const { dev, isServer } = options;

    if (!dev && !isServer) {
      config.plugins.push(
        new RelativeCiAgentWebpackPlugin(),
      );
    }

    return config;
  }
};

• ExampleMozart409/next-relative-ci

Gatsby config

// gatsby-node.js
const { RelativeCiAgentWebpackPlugin } = require('@relative-ci/agent');

exports.onCreateWebpackConfig = ({ stage, actions }) => {
  if (stage === 'build-javascript') {
    actions.setWebpackConfig({
      plugins: [
        new RelativeCiAgentWebpackPlugin()
      ]
    });
  }
};

• ExampleGatsby webpack plugin

Create React App

To setup @relative-ci/agent webpack plugin with create-react-app, you need to customize the default webpack config. That can be done by using react-app-rewired which is one of create-react-app's custom config solutions. You will also need customize-cra.

npm install --dev customize-cra react-app-rewired

yarn add customize-cra react-app-rewired --dev

Change your default scripts in package.json to:

/* package.json */
"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

Create a file config-overrides.js at the same level as package.json.

// config-overrides.js
const { override, addWebpackPlugin } = require('customize-cra');
const { RelativeCiAgentWebpackPlugin } = require('@relative-ci/agent');

module.exports = override(
  addWebpackPlugin(new RelativeCiAgentWebpackPlugin()),
);

Plugin options

• enabled - send the stats to RelativeCI (default to env-ci isCi)

• includeCommitMessage - will include git commit message (default true)

• payloadFilepath - save agent payload to disk for debugging

• stats - Webpack stats options, default:

  {
    stats: {
      assets: true,
      entrypoints: true,
      chunks: true,
      modules: true,
    }
  }

• HelpHow to debug @relative-ci/agent webpack plugin

Step 3. Configure Continuous Integration(CI) service

The plugin sends the webpack stats to RelativeCI when enabled option is true. On supported CI services, the option is enabled by default and the agent is going to send the webpack stats automatically during the webpack build task.

If you run multiple build tasks as part of your CI flow, make sure to enable the plugin only for one task.

Add environment variables

RELATIVE_CI_KEY

(Required) Navigate to https://app.relative-ci.com and copy the project specific key from Project -> Settings -> Keys.

RELATIVE_CI_SLUG

(Required for unsupported CI services) Set your Github project slug (eg: webpack/webpack.js.org) if your CI service is not supported (https://github.com/semantic-release/env-ci#supported-ci).