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() ]
};
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()
]
});
}
}
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
or
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-ciisCi
)includeCommitMessage
- will include git commit message (defaulttrue
)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!