Configure @relative-ci/webpack-plugin agent

This page contains the setup guide for the RelativeCI agent v5 beta. Go to RelativeCI agent v4 to read the setup guide for the current stable version.

Step 1. Install

npm install --save-dev @relative-ci/webpack-plugin@v5.0.0-rc.1
yarn add --dev @relative-ci/webpack-plugin@v5.0.0-rc.1
pnpm add -D @relative-ci/webpack-plugin@v5.0.0-rc.1

Step 2. Configure

Webpack

Add RelativeCIAgentPlugin plugin to your webpack config:

webpack.config.mjs
import RelativeCIAgentPlugin from '@relative-ci/webpack-plugin';
export default {
// ... your webpack config
plugins: [
// ... other plugins
new RelativeCIAgentPlugin()
]
};
webpack.config.ts
import RelativeCIAgentPlugin from '@relative-ci/webpack-plugin';
export default {
// ... your webpack config
plugins: [
// ... other plugins
new RelativeCIAgentPlugin()
]
};
webpack.config.js
const RelativeCIAgentPlugin = require('@relative-ci/webpack-plugin');
module.exports = {
// ... your webpack config
plugins: [
// ... other plugins
new RelativeCIAgentPlugin()
]
};

Rspack

Add RelativeCIAgentPlugin plugin to your Rspack config:

rspack.config.mjs
import RelativeCIAgentPlugin from '@relative-ci/webpack-plugin';
export default {
// ... your rspack config
plugins: [
// ... other plugins
new RelativeCIAgentPlugin()
]
};
rspack.config.ts
import RelativeCIAgentPlugin from '@relative-ci/webpack-plugin';
export default {
// ... your rspack config
plugins: [
// ... other plugins
new RelativeCIAgentPlugin()
]
};
rspack.config.js
const RelativeCIAgentPlugin = require('@relative-ci/webpack-plugin');
module.exports = {
// ... your rspack config
plugins: [
// ... other plugins
new RelativeCIAgentPlugin()
]
};

Next.js

Add RelativeCIAgentPlugin plugin to your Next.js config:

next.config.mjs
import RelativeCIAgentPlugin from '@relative-ci/webpack-plugin';
const nextConfig = {
// ... your next.js config
webpack: function (config, options) {
const { dev, isServer } = options;
if (!dev && !isServer) {
config.plugins.push(
new RelativeCIAgentPlugin(),
);
}
// ... your custom Next.js webpack config
return config;
}
};
export default nextConfig;
next.config.ts
import RelativeCIAgentPlugin from '@relative-ci/webpack-plugin';
const nextConfig = {
// ... your next.js config
webpack: function (config, options) {
const { dev, isServer } = options;
if (!dev && !isServer) {
config.plugins.push(
new RelativeCIAgentPlugin(),
);
}
// ... your custom Next.js webpack config
return config;
}
};
export default nextConfig;
next.config.js
const RelativeCIAgentPlugin = require('@relative-ci/webpack-plugin');
module.exports = {
webpack: function (config, options) {
const { dev, isServer } = options;
if (!dev && !isServer) {
config.plugins.push(
new RelativeCIAgentPlugin(),
);
}
return config;
}
};

Gatsby

Add RelativeCIAgentPlugin plugin to your Gatsby config:

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

Create React App

To setup @relative-ci/webpack-plugin 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 RelativeCIAgentPlugin = require('@relative-ci/webpack-plugin');
module.exports = override(
addWebpackPlugin(new RelativeCIAgentPlugin()),
);


Need help to configure @relative-ci/webpack-plugin 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)

  • failOnError - fail build when encountering errors (default: false)

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

  • 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
env:
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 }}

Npm workspaces example

Pass projects RelativeCI key environment variables to the npm workspaces build task:

.github/workflow/build.yml
# ...
- run: npm run build --workspaces
env:
APP_1_RELATIVE_CI_KEY: ${{ secrets.APP_1_RELATIVE_CI_KEY }}
APP_2_RELATIVE_CI_KEY: ${{ secrets.APP_2_RELATIVE_CI_KEY }}

Add project specific RelativeCI key environment variable to the project's build script:

apps/app-1/package.json
{
"name": "app-1",
"scripts": {
"build": "RELATIVE_CI_KEY=$APP_1_RELATIVE_CI_KEY npm run build"
}
}

apps/app-2/package.json
{
"name": "app-2",
"scripts": {
"build": "RELATIVE_CI_KEY=$APP_2_RELATIVE_CI_KEY npm run build"
}
}

Lerna example

Pass projects RelativeCI key environment variables to the lerna build task:

.github/workflow/build.yml
# ...
- run: npx lerna run build
env:
APP_1_RELATIVE_CI_KEY: ${{ secrets.APP_1_RELATIVE_CI_KEY }}
APP_2_RELATIVE_CI_KEY: ${{ secrets.APP_2_RELATIVE_CI_KEY }}

Add project specific RelativeCI key environment variable to the project's build script:

apps/app-1/package.json
{
"name": "app-1",
"scripts": {
"build": "RELATIVE_CI_KEY=$APP_1_RELATIVE_CI_KEY npm run build"
}
}

apps/app-2/package.json
{
"name": "app-2",
"scripts": {
"build": "RELATIVE_CI_KEY=$APP_2_RELATIVE_CI_KEY npm run build"
}
}




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