Noting Found

View all related articles

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

    1cd /path/to/your/project
    3# And Then run this
    4mkdir -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

    1name: Build Assets
    4 push:
    5 branches: [ main ]
    6 pull_request:
    7 branches: [ main ]
    10 build:
    11 runs-on: ubuntu-latest
    13 steps:
    15 - name: Checkout
    17 uses: actions/checkout@v2
    19 - name: Setup Node.js
    21 uses: actions/setup-node@v2-beta
    23 with:
    25 node-version: '14'
    27 check-latest: true
    29 - name: Install NPM dependencies
    31 run: npm install
    33 - name: Compile assets for production
    35 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

    1on: [push]

    Do This

    2 push:
    3 branches: [ main ]
    4 pull_request:
    5 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 | Technical Writer

    Oussama is an experienced full-stack web developer with a strong focus on Laravel. He's passionate about crafting web applications with Filament and the TALL Stack. With 8+ years of experience, and he's a dedicated open-source contributor.


    Join our newsletter

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

    We care about the protection of your data. Read our Privacy Policy.