Compile Your Assets On The Fly Using GitHub Actions

General 1 min read

Table of Content


    When we build an application, We need to compile assets to make our website faster, and we ride off unnecessary CSS or JavaScript code.

    As we spoke in previous article on how to deal with GitHub Actions and PHP-CS-Fixer. Today we will talk about how to compile assets on the fly using GitHub Actions as well.

    GitHub Action, Compile Assets Using NPM Update


    You need the basics of GitHub & Background on how NPM CLI works.

    Configure GitHub Actions

    In order to add NPM compile file configuration to your GitHub action project repository, you need to create in your project codebase two folders

    cd /path/to/your/project
    # And Then run this
    mkdir -p .github/workflows

    With this command we created 2 folders, one called .github and the second one is workflows to let GitHub know that the files lives in the directory workflows is for GitHub Action

    Creating YAML File

    Inside workflows folder, create a YAML file and call it build-assets.yml and put this inside it

    name: Build Assets
        branches: [ main ]
        branches: [ main ]
        runs-on: ubuntu-latest
          - name: Checkout
            uses: actions/[email protected]
          - name: Setup Node.js
            uses: actions/[email protected]
              node-version: '14'
              check-latest: true
          - name: Install NPM dependencies
            run: npm install
          - name: Compile assets for production
            run: npm run production


    If you want to compile your assets only in specific branch, let's say you want to run this only in the main or master branch and not in dev branch do the following

    Instead of this

    on: [push]

    Do This

        branches: [ main ]
        branches: [ main ]

    We Tell GitHub Actions to compile your assets only when we push changes or accepting a pull_request, otherwise skip this step.


    Today We Learned about GitHub Actions and compile assets and how to use them in your application to help you automate your workflow and be more productive and focus on your code rather than fixing coding standards such as removing unused CSS or minify your styles file.

    That's it for today and hope you learned something useful, and if you have any question put them in the comment section, and I'll very be happy to answer them.

    Related Tags

    About the Author

    Oussama's Profile Picture
    Full Stack Web Developer

    I'm a full stack web developer and telecommunications engineer who love to share knowledge and build stuff online!


    Join Our Newsletter

    Subscribe to Our Newsletter and never miss our offers, latest news, Articles, etc.

    Our news letter sent once a week, every tuesday.