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:

npm init -y

This will create something like:

{
  "name": "laravel-mix-so",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

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

{
  "name": "laravel-mix-so",
  "version": "1.0.0",
  "private": true,
  "scripts": {
  },
  "devDependencies": {
    "axios": "^0.16.2",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^5.0.1",
    "jquery": "^3.1.1",
    "laravel-mix": "^1.0",
    "lodash": "^4.17.4",
    "vue": "^2.4.1",
    "webpack-manifest-plugin": "^1.1.2"
  }
}

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

npm install

or

yarn install

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

{
  "name": "laravel-mix-so",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.16.2",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^5.0.1",
    "jquery": "^3.1.1",
    "laravel-mix": "^1.0",
    "lodash": "^4.17.4",
    "vue": "^2.4.1",
    "webpack-manifest-plugin": "^1.1.2"
  }
}

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

const name = 'Tom';

sass/app.sass

body {
 background-color: #333333;
}

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.

let mix = require('laravel-mix');


mix.setPublicPath('public')
   .js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
;

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:

npm run dev

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.