Step 1. Install

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

copy
yarn add --dev @relative-ci/agent

copy
pnpm add -D @relative-ci/agent

Step 2. Configure Webpack

Add RelativeCiAgentWebpackPlugin plugin to your webpack config:

copy
const { RelativeCiAgentWebpackPlugin } = require('@relative-ci/agent');

module.exports = {
  // ... your webpack config
  plugins: [
    // ... other plugins
    new RelativeCiAgentWebpackPlugin()
  ]
};

• ExampleWebpack plugin

Next.js config

copy
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

copy
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.

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

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

copy
pnpm add -D customize-cra react-app-rewired

Change your default scripts in package.json to:

copy
"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.

copy
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:

  copy
  {
    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).