Speed up your CI builds with Airdrop

Published on by

Speed up your CI builds with Airdrop image

I'm on a mission to use NodeJS the least amount possible. Why? Because it slows down people's builds on Chipper CI!

Luckily, Airdrop exists.

Laravel Airdrop is a tool that stores your built static assets. When you do CI runs, Airdrop checks to see if your static assets have changed.

If the assets have not changed, Airdrop downloads them from storage and places in the right place - allowing you to skip building your assets.

If they have changed, then you use Node to build your static assets as usual.

This is great for saving time in CI and deployment.

Here's how to use Airdrop.

Install

Installing Airdrop is easy:

composer require hammerstone/airdrop
 
# Add config/airdrop.php to your project
php artisan airdrop:install

Configuring Airdrop

There's only a few things to configure in Airdrop - and a bunch of them can be left to their defaults.

Triggers

You can tell Airdrop when to decide to re-build static assets.

Triggers are specific to the environment (APP_ENV) - each environment gets its own set of files. This is called the Configuration trigger.

The other trigger is the FileTrigger. This tracks configured files and rebuilds assets if the files have changed.

The FileTrigger will check:

  1. Files in the resources (CSS, JS, etc)
  2. If the Webpack/Vite configuration file changes

I also add the package-lock.json file that NPM produces.

<?php
 
use Hammerstone\Airdrop\Drivers\FilesystemDriver;
use Hammerstone\Airdrop\Drivers\GithubActionsDriver;
use Hammerstone\Airdrop\Triggers\ConfigTrigger;
use Hammerstone\Airdrop\Triggers\FileTrigger;
 
return [
'driver' => env('AIRDROP_DRIVER', 'default'),
'drivers' => [
'default' => [...],
'github' => [...],
],
'triggers' => [
ConfigTrigger::class => [
'env' => env('APP_ENV')
],
FileTrigger::class => [
'include' => [
resource_path(), // default
base_path('webpack.mix.js'), // mix default
base_path('vite.config.js'), // vite default
base_path('package-lock.json'), // my addition here
],
],
],
'outputs' => [...],
];

Drivers

You can decide where Airdrop will store static assets. Usually you just use the FilesystemDriver here, and use Laravel's Storage mechanism to tell Airdrop where to put the files.

The disk setting related to the Laravel “disk” storage used. Using some remote storage, such as s3, is recommended.

The GitHub Actions Driver lets you save files to the GH Actions cache, which is pretty handy!

return [
// The driver you wish to use to stash and restore your files.
'driver' => env('AIRDROP_DRIVER', 'default'),
 
'drivers' => [
'default' => [
// The class responsible for implementing the stash and restore
// logic. Must extend BaseDriver.
'class' => FilesystemDriver::class,
 
// The disk on which to store the built files.
'disk' => env('AIRDROP_REMOTE_DISK', 's3'),
 
// The folder (if any) where you'd like your stashed assets to reside.
'remote_directory' => env('AIRDROP_REMOTE_DIR', 'airdrop'),
 
// A writeable directory on the machine that builds the assets.
// Used to build up the ZIP file before stashing it.
'local_tmp_directory' => env('AIRDROP_LOCAL_TMP_DIR', storage_path('framework')),
 
// The skip file is an empty file that will be created to
// indicate that asset building can be skipped.
'skip_file' => env('AIRDROP_SKIP_FILE', base_path('.airdrop_skip')),
],
],
// ...
];

Outputs

Outputs are the files that Airdrop will store and retrieve for you. The files you “watch” via Triggers don't necessarily need to be the same files you have Airdrop save/store for you!

The defaults for Airdrop are pretty good, but of course you can configure these as needed.

return [
// ...
'outputs' => [
/*
* Files or folders that should be included.
*/
'include' => [
// Mix/Webpack
public_path('mix-manifest.json'),
public_path('css'),
public_path('js'),
 
// Vite
public_path('build/manifest.json'),
public_path('build/assets'),
],
 
// ...
],
];

Note: You likely don't want to commit static assets to your repository when using Airdrop. To avoid that, and to finish configuring Airdrop, add the following to your .gitignore file:

/.airdrop_skip
 
# Mix/Webpack
public/css/*
public/js/**
 
# Vite
public/build/*

Integrating Airdrop

When you build your app Airdrop in CI, or in a deployment script (this works great for Forge quick deploys!), you can run the following:

# Download files, only if needed
php artisan airdrop:download
 
# Airdrop creates .airdrop_skip if
# it downloaded files
if [ ! -f ".airdrop_skip" ]; then
npm ci --no-audit
npm run dev
fi
 
# Upload the files if needed
php artisan airdrop:upload
Chris Fidao photo

Teaching coding and servers at CloudCasts and Servers for Hackers. Co-founder of Chipper CI.

Cube

Laravel Newsletter

Join 40k+ other developers and never miss out on new tips, tutorials, and more.

Laravel Forge logo

Laravel Forge

Easily create and manage your servers and deploy your Laravel applications in seconds.

Laravel Forge
Tinkerwell logo

Tinkerwell

The must-have code runner for Laravel developers. Tinker with AI, autocompletion and instant feedback on local and production environments.

Tinkerwell
Cut PHP Code Review Time & Bugs into Half with CodeRabbit logo

Cut PHP Code Review Time & Bugs into Half with CodeRabbit

CodeRabbit is an AI-powered code review tool that specializes in PHP and Laravel, running PHPStan and offering automated PR analysis, security checks, and custom review features while remaining free for open-source projects.

Cut PHP Code Review Time & Bugs into Half with CodeRabbit
Join the Mastering Laravel community logo

Join the Mastering Laravel community

Connect with experienced developers in a friendly, noise-free environment. Get insights, share ideas, and find support for your coding challenges. Join us today and elevate your Laravel skills!

Join the Mastering Laravel community
Laravel Idea for PhpStorm logo

Laravel Idea for PhpStorm

Ultimate PhpStorm plugin for Laravel developers, delivering lightning-fast code completion, intelligent navigation, and powerful generation tools to supercharge productivity.

Laravel Idea for PhpStorm
Kirschbaum logo

Kirschbaum

Providing innovation and stability to ensure your web application succeeds.

Kirschbaum
Shift logo

Shift

Running an old Laravel version? Instant, automated Laravel upgrades and code modernization to keep your applications fresh.

Shift
Bacancy logo

Bacancy

Supercharge your project with a seasoned Laravel developer with 4-6 years of experience for just $2500/month. Get 160 hours of dedicated expertise & a risk-free 15-day trial. Schedule a call now!

Bacancy
Lucky Media logo

Lucky Media

Get Lucky Now - the ideal choice for Laravel Development, with over a decade of experience!

Lucky Media
Lunar: Laravel E-Commerce logo

Lunar: Laravel E-Commerce

E-Commerce for Laravel. An open-source package that brings the power of modern headless e-commerce functionality to Laravel.

Lunar: Laravel E-Commerce
Rector logo

Rector

Your partner for seamless Laravel upgrades, cutting costs, and accelerating innovation for successful companies

Rector
LaraJobs logo

LaraJobs

The official Laravel job board

LaraJobs
SaaSykit: Laravel SaaS Starter Kit logo

SaaSykit: Laravel SaaS Starter Kit

SaaSykit is a Multi-tenant Laravel SaaS Starter Kit that comes with all features required to run a modern SaaS. Payments, Beautiful Checkout, Admin Panel, User dashboard, Auth, Ready Components, Stats, Blog, Docs and more.

SaaSykit: Laravel SaaS Starter Kit
MongoDB logo

MongoDB

Enhance your PHP applications with the powerful integration of MongoDB and Laravel, empowering developers to build applications with ease and efficiency. Support transactional, search, analytics and mobile use cases while using the familiar Eloquent APIs. Discover how MongoDB's flexible, modern database can transform your Laravel applications.

MongoDB

The latest

View all →
Handling Request Data Presence in Laravel image

Handling Request Data Presence in Laravel

Read article
First Factor One-Time Passwords for Laravel with OTPZ image

First Factor One-Time Passwords for Laravel with OTPZ

Read article
Managing Request Host Information in Laravel image

Managing Request Host Information in Laravel

Read article
Tim Leland: URL Shorteners, browser extensions, and more image

Tim Leland: URL Shorteners, browser extensions, and more

Read article
HTTP Method Verification in Laravel image

HTTP Method Verification in Laravel

Read article
Packistry is a Self-hosted Composer Repository Made with Laravel image

Packistry is a Self-hosted Composer Repository Made with Laravel

Read article