Skip to content

Explain adding bundlewatch to a CI flow #46

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Explain adding bundlewatch to a CI flow #46

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 45 additions & 1 deletion docs/getting-started/using-bundlewatch.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -18,6 +19,49 @@ BundleWatch can report its status on your GitHub Pull Requests.
<img alt="build status preview" src="https://raw.githubusercontent.com/bundlewatch/bundlewatch.io/master/docs/_assets/build-status-preview.png" width="700px">
</div>

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`

Expand Down