Using Laravel Mix out of the Framework

I’ve been playing around with Laravel 5 for some time now and with it started using Laravel Mix. For anyone that doesn’t know its frontend build tool that wraps Webpack.

Like with Symfony Encore you can use these build tools in and out of the framework. This article will show you how to set it up.

Setup package.json

First we need to create our package.json. Run the following command to create a skeleton package.json file:

This will create something like:

Now we need to add our dependencies (I’ve omitted the scripts part for now):

Now we can install them. I’m using NPM but feel free to use Yarn:

or

Once thats done we can fill in the scripts section. This has been taken from the one that comes with a Laravel 5 install:

Add Resources

We’re going to need some resources to compile. Create a directory called resources in the same directory as the package.json file.

Within that directory created the following folders and files:

js/app.js

sass/app.sass

Create Mix Config

Now that we’re all setup we can create our webpack mix config. Create a new file called webpack.mix.js in the same directory as the package.json file.

This differs slightly from the one you get in a Laravel install. We have to set the public path is ours. When using Laravel Mix in a Laravel application it detects this and sets it for you. If you don’t set it you will find your mix-manifest.json gets created in the root directory rather than in the public directory.

Run Laravel Mix

Now we have everything setup we can now run the build command:

Which should result in the following output

Summary

With quite little setup you can get Laravel Mix running outside the Laravel framework quickly and easily.

PHP and JavaScript hacker. Symfony and Laravel tinkerer. Creator of TomahawkPHP

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store