Configure @relative-ci/agent webpack plugin

Step 1. Install

npm install --save-dev @relative-ci/agent
yarn add --dev @relative-ci/agent
pnpm add -D @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()
]
};

Rspack

Add RelativeCiAgentWebpackPlugin plugin to your Rspack config:

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

Next.js

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

gatsby-node.js
const { RelativeCiAgentWebpackPlugin } = require('@relative-ci/agent');
exports.onCreateWebpackConfig = ({ stage, actions }) => {
if (stage === 'build-javascript') {
actions.setWebpackConfig({
plugins: [
new RelativeCiAgentWebpackPlugin()
]
});
}
};

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 --dev customize-cra react-app-rewired
pnpm add -D customize-cra react-app-rewired

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

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

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:

RELATIVE_CI_KEY - required

Your project RelativeCI API key. To view the corresponding key for your project, navigate to https://app.relative-ci.com and go to the project Settings -> API Keys page.

RELATIVE_CI_ENDPOINT - required for RelativeCI Enterprise Cloud/Server

Set the RelativeCI ingestion URL corresponding to your setup.

More resources:

Monorepo

If you are using a monorepo setup and need to send the build information and the stats for multiple projects, use different API keys for each project.

GitHub Action example

.github/workflow/build.yml
# ...
- name: Project A - build
run: cd project-a && npm build
with:
RELATIVE_CI_KEY: ${{ secrets.RELATIVE_CI_KEY_PROJECT_A }}
- name: Project B - build
run: cd project-b && npm build
env:
RELATIVE_CI_KEY: ${{ secrets.RELATIVE_CI_KEY_PROJECT_B }}




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