Wordpress and Laravel Mix

Developing a Wordpress site or theme can sometimes be a frustrating experience, especially if you also have some experience or more comfortable with modern PHP or JS frameworks. As a modern PHP framework, Laravel has the powerful blade templating engine, a flexible and robust ORM, Laravel Mix and many more out of the box features that make for a great development experience. So, if we want a better development experience for Wordpress, looking for other frameworks for tools and inspirations is a good idea. The Wordpress development team was doing exactly that with their Gutenberg project and incorporating React as a supported JS framework. With Laravel Mix we can use CSS pre-processors, Modern JS and live reload.

Laravel Mix - Theme Setup

🚩Important: I've tested this setup on a Wordpress theme that does not contain a node project (no node_modules, no package.json)! However, I have another setup suggestion bellow. 👇
First, check if you have npm installed:

npm -v

Or:

npm --version

1. run in your theme's root folder:

npm init -y
npm install laravel-mix --save-dev
npm install cross-env --save-dev
cp node_modules/laravel-mix/setup/webpack.mix.js ./

2. Add these scripts to your package.json file:

"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": "npm run development -- --watch",
  "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 --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}

3. edit our webpack.mix.js file:

const mix = require("laravel-mix");
mix.js("resources/js/app.js", "dist/")
mix.sass("resources/scss/app.scss", "dist/");

mix.browserSync({
  proxy: "http://127.0.0.1/",
  files: ["./**/*.php", "./dist/**/*.*"],
});

4. Create a resources/js, resources/scss and dist folders in your theme's root folder.
5. Add app.scss in resources/scss and app.js file in resources/js.
6. Now, let's include the files in our dist folder in functions.php:

function kickass_scripts() {
    wp_enqueue_style( 'style-name', get_template_directory_uri() . '/dist/app.css' );
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/dist/app.js', array(), '1.0.0', true);
}
add_action( 'wp_enqueue_scripts', 'kickass_scripts' );

7. Now, in our theme's root folder, we can run:

npm run watch

You might be prompted to run npm run watch again. That is because Laravel Mix needs to install additional dependencies. And there you have it! Now you can enjoy working with scss (or your css preprocessor of choice), modern js and live reloading!

Laravel Mix - Root Project Setup

Another way of setting up Laravel Mix is in your project's root folder. You can follow all the above steps, but from your project's root. Here is another way to construct your webpack.mix.js file accordingly:

const mix = require("laravel-mix");

const THEME_DIR = "./wp-content/themes/twentytwenty";
const RESOURCES_DIR = `${THEME_DIR}/resources`;
const DIST_DIR = `${THEME_DIR}/dist`;

mix.js(`${RESOURCES_DIR}/js/app.js`, DIST_DIR);
mix.sass(`${RESOURCES_DIR}/scss/app.scss`, DIST_DIR);

mix.browserSync({
  proxy: "http://127.0.0.1/",
  files: [`${THEME_DIR}/**/*.php`, `${THEME_DIR}/dist/**/*.*`],
});

🚩When testing this setup I found that you might need to install this module:

npm i @wordpress/browserslist-config.

Enjoy! ✌