Configure agent webpack plugin

Step 1. 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;
  }
};

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()),
);

Need help configuring @relative-ci/agent for another framework?Contact us via email, Twitter, or Github!

Plugin options

enabled - send the stats to RelativeCI (default to env-ci isCi)
includeCommitMessage - will include git commit message (default true)

stats - Webpack stats options, default:

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

Debugging

To inspect @relative-ci/agent activity, set DEBUG=relative-ci:agent environment variable and run your build command:

$ DEBUG=relative-ci:agent npm run build

relative-ci:agent Config {
  config: {
    includeCommitMessage: true,
    webpack: { stats: './artifacts/webpack.json' }
  },
  filepath: '/repo/relativeci.config.js'
} +0ms

relative-ci:agent env-ci params {
  branch: 'master',
  build: 122,
  buildUrl: '#',
  commit: '2e201aa',
  isCi: true,
  pr: undefined,
  prBranch: undefined,
  slug: 'organization/project'
} +111ms

Step 2. Configure Continuous Integration(CI) service

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/pvdlg/env-ci#supported-ci).

Need help?Contact us via email, Twitter, or Github!

Start monitoring your bundle