Giter VIP home page Giter VIP logo

bundlewatch-gh-action's Introduction

Bundlewatch GitHub Action

This GitHub action allows you to easily run bundlewatch in your repository.

For the full configuration please have a look at the action.yml file.

How to use:

  1. Add bundlewatch configuration in your package.json. Refer to this doc for a more complete explanation.

    {
      "name": "my-package",
      "bundlewatch": {
        "trackBranches": [
          "master"
        ],
        "files": [
          {
            "path": "./packages/react-isomorphic-data/dist/esm/index.js",
            "maxSize": "4.5 KB"
          }
        ]
      }
    }

    An example of a real-world project using this can be seen here

  2. Get a BUNDLEWATCH_GITHUB_TOKEN by following this step

  3. Set the token as a secret in your GitHub repository

    image

  4. Set up a workflow.yml for your tracked branch. For example, if you are tracking the bundlesize of master branch, you should create a workflow whenever a push to master happens like so:

    name: "Bundlewatch GitHub Action - on Tracked Branches Push"
    
    on:
      push:
        branches:
          - master
    
    jobs:
      bundlewatch:
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v2
          - uses: Borales/[email protected]
          - run: yarn install
          - uses: jackyef/bundlewatch-gh-action@master
            with:
              build-script: yarn build:minify
              bundlewatch-github-token: ${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }}

    You would probably want to change the build-script to whatever script you want to run to produce your output bundle.

    Note: build-script is actually optional, just in case your workflow does not need build step and you are measuring the size of already committed files

    Note 2: It is recommended to use a specific version of this action instead of @master. For example: - uses: jackyef/[email protected]. This is because some commits that aren't ready to be released yet might make it into master branch.

  5. To add statuses on pull requests, you can add another workflow for pull requests synchronize and opened events as following:

    name: "Bundlewatch GitHub Action"
    
    on:
      pull_request:
        types: [synchronize, opened]
    
    jobs:
      bundlewatch:
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v2
          - uses: Borales/[email protected]
          - run: yarn install
          - uses: jackyef/bundlewatch-gh-action@master
            with:
              build-script: yarn build:minify
              bundlewatch-github-token: ${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }}
  6. If you are using an external config file, you can pass the file path to bundlewatch-config parameter

    name: "Bundlewatch GitHub Action"
    
    on:
      pull_request:
        types: [synchronize, opened]
    
    jobs:
      bundlewatch:
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v2
          - uses: Borales/[email protected]
          - run: yarn install
          - uses: jackyef/bundlewatch-gh-action@master
            with:
              build-script: yarn build:minify
              bundlewatch-github-token: ${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }}
              bundlewatch-config: .bundlewatch.config.js

Feedback

Feel free to open issues for feature requests. If you want to contribute, feel free to open a pull request as well!

Credits

This GitHub action will not be possible without the work done at bundlewatch. Go there and give them a star! โญ

bundlewatch-gh-action's People

Contributors

dependabot[bot] avatar jackyef avatar jakepartusch avatar mkai avatar vinassefranche avatar xhmikosr avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

bundlewatch-gh-action's Issues

bundlewatch is installed every time

It seems bundlewatch isn't used from package.json but instead from npx which:

  1. means it's not the version specified in package.json
  2. it's installed on every run

I'm not super familiar with making actions myself, but there must be some better way :)

EDIT: my first point was wrong; the yarn.lock version is the same, but still see my next comment.
EDIT2: it seems there is a package-lock.json and a yarn.lock file.

Usage in nested folder

Hello,
I'm using v0.2.0

My App structure is like this :
Locally bundlewatch works well.

repo-name/ 
   - package-json // unrelated package.json
   - front/ 
       - package.json // package.json containing my bundlewatch config

My action is like this :

name: Node.js CI

on:
  push:
    branches: [ mainBranch ]
  pull_request:
    branches: [ mainBranch ]

defaults:
  run:
    working-directory: ./front # note the working directory here

jobs:
  bundlewatch:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout
      uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v2
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'yarn'
    - name: Yarn install
      run: yarn install # yarn install happens in the correct directory ./front
    - name: Yarn build
      run: yarn build
    - uses: jackyef/[email protected]
      with:
        bundlewatch-github-token: ${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }}

When running I get this and no other output :
image

If I try to put a dummy config in the root package.json bundlewatch reads the config from the root package.json and it works
With a more complete output.

Your action seems to ignore the working-directory property, could you check ?

Best

Tag and update tags on each release

It's a common practice in actions to use the same tag for minor/patch versions so that the consumers of the action don't need to update manually.

I'm unsure how this is handled automatically, but there must be some way.

For example actions/setup-node@v2.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.