Plugins Tips and Tricks
May 01. 2019 · by Helge Sverre

Using Asset Rev to cachebust assets compiled with Laravel Mix in CraftCMS

Cache busting is useful to implement in your project to prevent styling or behaviour issues caused by the fact that your clients might have old code or css cached in their browser, after you've pushed changes to production, which might cause the website to look wrong, or certain JavaScript functionality to not work correctly.

Install the AssetRev plugin:

Install Asset Rev
BASH
# Install it
composer require clubstudioltd/craft-asset-rev

# Enable it
php craft install/plugin assetrev

Create a configuration file for the asset rev plugin.

Note the manifestPath points to the mix-manifest.json file, which with the webpack.mix.js config (below) will be in the public/ folder, and the assetBasePath points to the folder where you put your compiled assets, in the case I will place them in /public/dist

config/assetrev.php
PHP
<?php

use club\assetrev\utilities\strategies\ManifestFileStrategy;

return [
    '*' => [
        'strategies' => [
            'manifest' => ManifestFileStrategy::class,
            'passthrough' => function ($filename, $config) {
                return $filename;
            },
        ],
        'pipeline' => 'manifest',
        'manifestPath' => 'public/mix-manifest.json',
        'assetsBasePath' => '@webroot/dist',
    ],
];

Now update your webpack.mix.js file, the important part to add is the version() method, and to set the public path with setPublicPath() method, note that we place the compiled assets in the public/dist folder.

webpack.mix.js
JAVASCRIPT
let mix = require('laravel-mix');

mix
    .js('src/js/app.js', 'public/dist/app.js')
    .sass('src/sass/app.scss', 'public/dist/app.css')
    .setPublicPath('public')
    .version()
    .sourceMaps()
    .disableNotifications();

Now you can use the rev() twig function in your layout file like so:

templates/_layout.twig
TWIG
<!doctype html>
<html lang="en">
<head>
    <link rel="stylesheet" href="{{ rev("/assets/app.css") }}"/>
</head>
<body>
<h1>Hello world</h1>

<script src="{{ rev("/assets/app.js") }}"></script>
</body>
</html>

Now run the following command to compile your assets:

Compile your assets
BASH
yarn production

Once you've compiled your assets (which will create the app.js and app.css file along with a mix-manifest.json file), which will produce a file like this:

Note: You should put the mix-manifest.json and your compiled assets in the .gitignore file (IF you build the assets on your server, if you compile assets locally and push them to the server, you should not add these files to the .gitignore file).

public/mix-manifest.json
JSON
{
    "/dist/app.js": "/dist/app.js?id=de1e60bb2d9afae4ef43",
    "/dist/app.css": "/dist/app.css?id=602e7d516de26b6021f7"
}

Your website output will now look something like this:

What Craft will output when you visit your website.
HTML
<!doctype html>
<html lang="en">
<head>
    <link rel="stylesheet" href="/dist/app.css?id=77805ab457f3b33d4d9f"/>
</head>
<body>
<h1>Hello world</h1>

<script src="/dist/app.js?id=77805ab457f3b33d4d9f"></script>
</body>
</html>

Every time you compile your assets, the hash/identifier at the end of the filename will change, most browsers will interpret this as "Oh, this file is different from the one I have in my cache, I am going to download this new file and update my cache", which fixes the problem of old styling or code being stuck in a visitor cache, making your website look "broken".

Next: How to use Digital Ocean Spaces to store you assets in Craft 3
Previous: Team Workflow with Project Config in Craft CMS 3
References and links in this article
CSSTricks: Strategies for Cache-Busting CSS AssetRev Plugin