RelativeCI

In-depth bundle analysis and monitoring

Setup @relative-ci/cli

This page contains the setup guide for the RelativeCI agent v5. Go to RelativeCI agent v4 to follow the setup guide for the previous version.

Migrate from v4 to v5

Step 1. Install

npm install --save-dev @relative-ci/cli
yarn add --dev @relative-ci/cli
pnpm add -D @relative-ci/cli

Step 2. Output webpack stats JSON file

Follow the steps on Output webpack stats JSON file guide.

Step 3. Configure @relative-ci/cli

relative-ci.config.mjs
/**
 * @type {import('@relative-ci/cli').Config}
 */
export default {
  // Read commit message from the git logs, GitHub Action event data or GitHub API
  includeCommitMessage: true,
  // Save agent payload to disk for debugging
  // @example './relative-ci-payload.json',
  payloadFilepath: undefined,
  webpack: {
    // Path to Webpack stats JSON file
    stats: './webpack-stats.json'
  }
};
relative-ci.config.ts
import { type Config } from '@relative-ci/cli';


export default {
  // Read commit message from the git logs, GitHub Action event data or GitHub API
  includeCommitMessage: true,
  // Save agent payload to disk for debugging
  // @example './relative-ci-payload.json',
  payloadFilepath: undefined,
  webpack: {
    // Path to Webpack stats JSON file
    stats: './webpack-stats.json'
  }
} satisfies Config;
relative-ci.config.cjs
/**
 * @type {import('@relative-ci/cli').Config}
 */
module.exports = {
  // Read commit message from the git logs, GitHub Action event data or GitHub API
  includeCommitMessage: true,
  // Save agent payload to disk for debugging
  // @example './relative-ci-payload.json',
  payloadFilepath: undefined,
  webpack: {
    // Path to Webpack stats JSON file
    stats: './webpack-stats.json'
  }
};

Step 4. Configure Continuous Integration(CI) service

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

Run agent CLI on CI

Add a CI job to run @relative-ci/cli after the build job.

View config examples for:

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 and stat files for each project.

.github/workflow/build.yml
# ...


    - name: Project A - build
      run: cd project-a && npm run build --json webpack-stats.json


    - name: Project A - send build information and bundle stats to RelativeCI
      run: cd project-a && npx relative-ci
      env:
        RELATIVE_CI_KEY: ${{ secrets.RELATIVE_CI_KEY_PROJECT_A }}


    - name: Project B - build
      run: cd project-b && npm run build --json webpack-stats.json


    - name: Project B - send build information and bundle stats to RelativeCI
      run: cd project-b && npx relative-ci
      env:
        RELATIVE_CI_KEY: ${{ secrets.RELATIVE_CI_KEY_PROJECT_B }}


Setup done

View your RelativeCI projects

Configure your project:

GitHub Commit Status reviewGitHub Check ReportGitHub Pull Request CommentSlack NotificationInvite team members

Guides:

Webpack config for better monitoringnpm duplicate dependenciesAnalyze and compare bundle changes locally


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

Identify and fix bundle regressions before shipping to production

Get started for freeGet in touch