Using Laravel Mix with CakePHP 3

By zhunt / 29th April, 2018

Laravel Mix is a tool for compiling front-end assets. Getting it running in CakePHP is pretty easy.

Here’s how to get it Mix running in CakePHP:

Copy https://github.com/laravel/laravel/blob/master/package.json into your root directory, i.e. cake_project/ (not webroot)
Follow the install instructions over at https://laravel.com/docs/5.6/mix#introduction (basically run npm install from your root folder, if everything goes right, after it runs your’ll notice a folder called node_modules in it)
Once it’s run you’ll have a node_modules folder
Copy https://github.com/laravel/laravel/blob/master/webpack.mix.js into root (cake_project/webpack.mix.js). webpack.mix contains the pipeline of how files are processed.
In your root create directory /resources/assets/js/app.js and /resources/assets/sass/app.sass

In file webpack.mix.js, change the lines:

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

to :

mix.setPublicPath('webroot'); // since not in Laravel, need to help Mix along here
mix.js('resources/assets/js/app.js', 'webroot/js').sass('resources/assets/sass/app.scss', 'webroot/css');

put some test code into app.js and app.sass, just so you’ll see something. Mix has Babel support build-in, so ES6 code will compile right out of the box.
run npm run development, if everything works, you should see a new .css file and a JavaScript file with WebPack wrapping.
in your layout .cpt file, just add near the end of the page:
```
<script type="text/javascript" src="/js/app.js"></script>
```
For production code, run npm run production, this will give your minified code.
Use npm run watch to trigger a re-compile each time you update your files

Your can read the full docs here: https://laravel.com/docs/5.6/mix#introduction

Adding React to Laravel Mix

Adding ReactJs support is easy, as support in built-in. If you’re not familiar with React, there is a fairly good tutorial the site. The steps for adding it to your project are pretty straighforward:

In your template add the anchor point where the react app will render, this would usually be on a template :
```
<div id="root"></div>
```
From your root, run: npm add react react-dom (you might not need to do it, as Mix’s mix.react is meant to take care of installing the React dependencies)

For this example, create a file called app.jsx and put this code in it:

import React, { Component } from 'react';
import ReactDOM from 'react-dom'; // npm install react-dom --save-dev if you get an error
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Joe',
lastName: 'Smith'
};
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
ReactDOM.render(
element,
document.getElementById('root')
);

Update webmax.mix.js with this line replacing the

mix.js('resources/assets/js/app.js'

with

mix.react('resources/assets/js/app.jsx', 'webroot/js');

After running npm run development you you should now have a .js that will render the message on your template. If you want to debug your JavaScript code, add .sourceMaps(); to the end of that statement.

If you’re familiar with the react-starter-kit, basically app.jsx is the equivalent to index.js. You can now go ahead and import react add-ons (e.g. npm i react-select –save). From here you can sart building a React app.

Next Steps

Of course, this is just the start. If you want to pass data from CakePHP into JavaScript, suggest looking at PHP-Vars-To-Js-Transformer , at it’s heart, it’s basically pretty simple: write data into the template as JavaScript variables stored (by default in the global window namespace) like so:

<script>window.MyNameSpace=<?= json_encode(['name' => 'Joe Smith']); ?>;</script>

This means it’s a small step to building all kinds of apps that pull data from Cake’s ORM, pass it down though the view and into a React app. This will be covered in a future blog post.

Resources: