d

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

15 St Margarets, NY 10033
(+381) 11 123 4567
ouroffice@aware.com

 

KMF

Speed up your CI builds with Airdrop

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:

1composer require hammerstone/airdrop

2 

3# Add config/airdrop.php to your project

4php 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.

1<?php

2 

3use HammerstoneAirdropDriversFilesystemDriver;

4use HammerstoneAirdropDriversGithubActionsDriver;

5use HammerstoneAirdropTriggersConfigTrigger;

6use HammerstoneAirdropTriggersFileTrigger;

7 

8return [

9 'driver' => env('AIRDROP_DRIVER', 'default'),

10 'drivers' => [

11 'default' => [...],

12 'github' => [...],

13 ],

14 'triggers' => [

15 ConfigTrigger::class => [

16 'env' => env('APP_ENV')

17 ],

18 FileTrigger::class => [

19 'include' => [

20 resource_path(), // default

21 base_path('webpack.mix.js'), // mix default

22 base_path('vite.config.js'), // vite default

23 base_path('package-lock.json'), // my addition here

24 ],

25 ],

26 ],

27 'outputs' => [...],

28];

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!

1return [

2 // The driver you wish to use to stash and restore your files.

3 'driver' => env('AIRDROP_DRIVER', 'default'),

4 

5 'drivers' => [

6 'default' => [

7 // The class responsible for implementing the stash and restore

8 // logic. Must extend BaseDriver.

9 'class' => FilesystemDriver::class,

10 

11 // The disk on which to store the built files.

12 'disk' => env('AIRDROP_REMOTE_DISK', 's3'),

13 

14 // The folder (if any) where you'd like your stashed assets to reside.

15 'remote_directory' => env('AIRDROP_REMOTE_DIR', 'airdrop'),

16 

17 // A writeable directory on the machine that builds the assets.

18 // Used to build up the ZIP file before stashing it.

19 'local_tmp_directory' => env('AIRDROP_LOCAL_TMP_DIR', storage_path('framework')),

20 

21 // The skip file is an empty file that will be created to

22 // indicate that asset building can be skipped.

23 'skip_file' => env('AIRDROP_SKIP_FILE', base_path('.airdrop_skip')),

24 ],

25 ],

26 // ...

27];

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.

1return [

2 // ...

3 'outputs' => [

4 /*

5 * Files or folders that should be included.

6 */

7 'include' => [

8 // Mix/Webpack

9 public_path('mix-manifest.json'),

10 public_path('css'),

11 public_path('js'),

12 

13 // Vite

14 public_path('build/manifest.json'),

15 public_path('build/assets'),

16 ],

17 

18 // ...

19 ],

20];

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:

1/.airdrop_skip

2 

3# Mix/Webpack

4public/css/*

5public/js/**

6 

7# Vite

8public/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:

1# Download files, only if needed

2php artisan airdrop:download

3 

4# Airdrop creates .airdrop_skip if

5# it downloaded files

6if [ ! -f ".airdrop_skip" ]; then

7 npm ci --no-audit

8 npm run dev

9fi

10 

11# Upload the files if needed

12php artisan airdrop:upload

Credit: Source link

Previous Next
Close
Test Caption
Test Description goes like this