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:

About the author

zhunt

Click here to add a comment

Leave a comment: