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:
const { RelativeCiAgentWebpackPlugin } = require('@relative-ci/agent');
module.exports = { // ... your webpack config plugins: [ // ... other plugins new RelativeCiAgentWebpackPlugin() ]};
Next.js config
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
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:
"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
.
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-ciisCi
)includeCommitMessage
- will include git commit message (defaulttrue
)payloadFilepath
- save agent payload to disk for debuggingstats
- Webpack stats options, default:{stats: {assets: true,entrypoints: true,chunks: true,modules: true,}}
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.
If you are building your project using GitHub Actions on pull_request
event or if you rely on workflows triggered by forked repos, consider using the Agent GitHub action.
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).