diff --git a/docs/getting-started/using-bundlewatch.md b/docs/getting-started/using-bundlewatch.md index c5a5781..b9ba766 100644 --- a/docs/getting-started/using-bundlewatch.md +++ b/docs/getting-started/using-bundlewatch.md @@ -9,7 +9,8 @@ FAIL ./webpack-build/vendor.js: 198.6KB > 100KB (gzip) BundleWatch FAIL ``` -This will give you command line output. If you want BundleWatch to report build status on your pull requests, see below. +You can run this to get command line output. +If you want BundleWatch to report build status on your pull requests, see below on running it in your CI. ## Adding Build Status: BundleWatch can report its status on your GitHub Pull Requests. @@ -18,6 +19,49 @@ BundleWatch can report its status on your GitHub Pull Requests. build status preview +For this to work you will need: +1. An npm script to run `bundlewatch` +2. [Optional] a Bundlewatch configuration in place (you can skip this if you supply the configuration directly in your npm script) +3. Correct CI env variables (see below) +4. Adding a build step that runs that npm script to your CI pipeline + +### Example: `package.json` with configuration and a script +```javascript +{ + "name": "my-web-app", + "scripts": { + ... + "bundlewatch": "bundlewatch", + ... + }, + "bundlewatch": { + "files": [ + { + "path": "dist/*.js", + "maxSize": "100kB" + } + ] + }, + "devDependencies": { + ... + "bundlewatch": "0.3.3", + ... + }, +} + +``` + +### Example: CI flow that includes a bundlewatch step (this is for CircleCI but they are all very similar) +```yaml +jobs: + build-and-test: + steps: + - run: + name: Verify bundle size + command: | + npm run bundlewatch +``` + ## Setup CI Auth Variables Needed by BundleWatch: - `BUNDLEWATCH_GITHUB_TOKEN`