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

Rspack

Add RelativeCiAgentWebpackPlugin plugin to your Rspack config:

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

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

• ExampleRspack webpack plugin

Next.js

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

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 bundle stats and build information to RelativeCI (default to env-ci isCi)

• includeCommitMessage ( default true) - get current commit message (git log -1 --pretty=%B) and send it to RelativeCI as part of the build informatin

• payloadFilepath - save agent payload to disk for debugging

• stats - Webpack stats options, default:

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

• HelpDebug @relative-ci/agent webpack plugin

Step 3. Configure Continuous Integration(CI) service

The plugin sends the build information and the bundle stats to RelativeCI ingestion service when enabled option is true. When running on supported CI services the option is set by default to true.

If you run multiple build tasks as part of your CI flow, consider to enable the plugin only for one task or setup one RelativeCI project for each build task.

Add environment variables

Follow the CI service guide to add the corresponding secrets and environment variables:

• GitHub Action
• CircleCI
• Vercel
• Netlify
• Jenkins

More resources:

• Build information
• Not supported CI services or non-CI environments