Add Laravel Mix to 5.3 LTS (and older versions)

If you’re using a version of Laravel that doesn’t support Laravel Mix out of the box like 5.3 LTS, you’ll be unable to take advantage of Laravel’s new webpack-friendly frontend build tool. If you don’t want to upgrade your entire Laravel installation, you can follow the below instructions to easily add the functionality into your current application:

Install NPM + Mix

You’ll want to start by installing NPM (node package manager). Your Laravel installation should have a package.json in the root of the application. If not, you’ll need to create it:

# package.json
{
  "private": true
}

After that, you’ll want to install the mix node package:

npm install laravel-mix

This will install the npm package and the related node requirements (nice and easy).

Update Laravel

You’ll need to update the Laravel app now to support the mix helpers.

The first step in doing this is to configure Laravel to load a custom helpers file. Make the below update to composer.json in the autoload section:

...
// Add inside the autoload: node
"files": [
    "app/helpers.php"
]
...

This tells Laravel we’re going to load a custom helper in app/helpers.php — the custom helper is the mix function:

# app/helpers.php
<?php
use App\Services\Deployment;
use \Illuminate\Support\Str;
use \Illuminate\Support\HtmlString;

if (! function_exists('mix')) {
    /**
     * Get the path to a versioned Mix file.
     *
     * @param  string  $path
     * @param  string  $manifestDirectory
     * @return \Illuminate\Support\HtmlString
     *
     * @throws \Exception
     */
    function mix($path, $manifestDirectory = '')
    {
        static $manifests = [];

        if (! Str::startsWith($path, '/')) {
            $path = "/{$path}";
        }

        if ($manifestDirectory && ! Str::startsWith($manifestDirectory, '/')) {
            $manifestDirectory = "/{$manifestDirectory}";x
        }

        if (file_exists(public_path($manifestDirectory.'/hot'))) {
            return new HtmlString("//localhost:8080{$path}");
        }

        $manifestPath = public_path($manifestDirectory.'/mix-manifest.json');

        if (! isset($manifests[$manifestPath])) {
            if (! file_exists($manifestPath)) {
                throw new Exception('The Mix manifest does not exist.');
            }

            $manifests[$manifestPath] = json_decode(file_get_contents($manifestPath), true);
        }

        $manifest = $manifests[$manifestPath];

        if (\App::environment('local')) {
            foreach($manifest as $key => &$value) {
                $value .= '?key=' . md5(microtime(true));
            }
        }

        if (! isset($manifest[$path])) {
            if (! app('config')->get('app.debug')) {
                return $path;
            }
        }

        return new HtmlString($manifestDirectory.$manifest[$path]);
    }
}

This includes the mix helper into our application.

Version Assets

Now that mix is installed in our application, we need to use it to version our assets. Wherever you include CSS or JS, you’ll want to utilize the new helper. For example, if you include CSS/JS via blade, it would look like this:

<link href="{{ secure_url(mix("/css/frontend.css"))  }}" rel="stylesheet" media="screen">
<script src="{{ secure_url(mix("/js/frontend-app.js")) }} ></script>

Run Mix Commands

Once the above is complete, you’ll need to add the mix commands into your package.json, at the top level of the JSON object:

"scripts": {
	"prod": "NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
	"dev": "node_modules/webpack/bin/webpack.js --watch --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
	"watch": "node_modules/webpack/bin/webpack.js --watch --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
	"awsdev": "node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js"
}

Configure Mixpack

This will allow you to run mix! The only step left at this point is configuring the webpack.mix.js file for your application. You should refer to Laravel’s official help docs for this. Once your mixpack is configured, you’ll be able to run the bash commands we defined above, for example:

npm run dev

> @ dev /home/alan/vhosts/precision.cadence-labs.com
> node_modules/webpack/bin/webpack.js --watch --progress --config=node_modules/laravel-mix/setup/webpack.config.js

 10% building modules 2/2 modules 0 active                                         
Webpack is watching the files…

 95% emitting                                                                           

 DONE  Compiled successfully in 250ms

Conclusion

After the above updates, you should see your files automatically versioned when you run the mix commands!

Alan Barber is the Lead Web Developer at Cadence Labs and a Magento Certified developer.

Need help with Laravel?

We’ve had a lot of experience building new applications in Laravel. If you need help, head over to the Cadence Labs contact page, or email us at [email protected]. We offer affordable rates for our Laravel development services.