Provides helpers functions for CakePHP to use Laravel Mix.

Overview

AssetMix plugin for CakePHP

Latest Stable Version Total Downloads License CakePHP Tests PHPStan Check Coding Style Check

Provides integration with your CakePHP application & Laravel Mix.

This branch works with CakePHP 4.0+, see version map for more details.

Installation

  1. Install the AssetMix plugin with composer:

    Via composer:

    composer require ishanvyas22/asset-mix
  2. Load plugin using below command:

    bin/cake plugin load AssetMix
  3. Generate basic Javascript, CSS & Sass scaffolding:

    bin/cake asset_mix generate

    Note: Above command will generate scaffolding for vue, but you can generate Bootstrap/jQuery, React or Inertia scaffolding too.

  4. Install frontend dependencies

    npm install

    or

    yarn install
  5. Compile your assets

    • For development:
    npm run dev
    • To watch changes:
    npm run watch
    • For production:
    npm run prod
  6. Load AssetMix helper from the plugin into your AppView.php file:

    $this->loadHelper('AssetMix.AssetMix');

Usage

After compiling your assets(js, css) with laravel mix, it creates a mix-manifest.json file into your webroot directory which contains information to map the files.

  • To generate script tag for compiled javascript file(s):
echo $this->AssetMix->script('app');

Above code will render:

<script src="/js/app.js" defer="defer"></script>

As you can see it works same as HtmlHelper. There is not need to provide full path or even file extension.

  • To generate style tag for compiled css file(s):
echo $this->AssetMix->css('main');

Output:

<link rel="stylesheet" href="/css/main.css">

If versioning is enabled, output will look something like below:

<link rel="stylesheet" href="/css/main.css?id=9c4259d5465e35535a2a">

Generate command

The generate command is used to generate starter code for your Javascript application to get you started developing your frontend.

Get help:

bin/cake asset_mix -h

Generate default scaffolding (with vue):

bin/cake asset_mix generate

Above command will generate:

  • package.json
  • webpack.mix.js
  • assets/
    • css/
    • js/
    • sass/

assets/ directory is where you will store your js, css files which will compile down into your respective webroot/ directory.

Custom directory name:

bin/cake asset_mix generate --dir=resources

You can also use custom directory name instead of default assets directory, above command will create resources directory where you can put your js, css, etc asset files.

Don't want to use Vue.js? Don't worry this plugin doesn't dictate on which Javascript library you should use. This plugin provides ability to quickly generate scaffolding for Vue as well as Bootstrap, and React.

Generate basic Bootstrap/jQuery scaffolding:

bin/cake asset_mix generate bootstrap

Generate React scaffolding:

bin/cake asset_mix generate react

Generate scaffolding for Inertia.js:

# for vue
bin/cake asset_mix generate inertia-vue

# or for react
bin/cake asset_mix generate inertia-react

Generate React scaffolding inside resources directory:

bin/cake asset_mix generate react --dir=resources

Version map

AssetMix version Branch CakePHP version PHP minimum version
1.x master >=4.0.0 >=7.2
0.x cake3 >=3.5.0 >=5.6

❤️ Support The Development

Do you like this project? Support it by donating:

Buy Me A Coffee

or Paypal me

Changelog

Please see CHANGELOG for more information about recent changes.

Reference

To see this plugin into action you can refer to this project, which will provide more insight.

License

The MIT License (MIT). Please see License File for more information.

Comments
  • Deprecation warnings

    Deprecation warnings

    Describe the bug Hi, i'm new with react and laravel mix. I'm trying to create an app when I get two deprecation warnings:

    Router::plugin() is deprecated, use the non-static method RouterBuilder::plugin() instead. - /Applications/MAMP/htdocs/cakereact/vendor/ishanvyas22/asset-mix/config/routes.php, line: 11 You can disable all deprecation warnings by setting Error.errorLevel to E_ALL & ~E_USER_DEPRECATED, or add vendor/ishanvyas22/asset-mix/config/routes.php to Error.ignoredDeprecationPaths in your config/app.php to mute deprecations from only this file. [CORE/src/Core/functions.php, line 322]

    Router::scope() is deprecated, use the non-static method RouterBuilder::scope() instead. - /Applications/MAMP/htdocs/cakereact/vendor/cakephp/cakephp/src/Routing/Router.php, line: 912 You can disable all deprecation warnings by setting Error.errorLevel to E_ALL & ~E_USER_DEPRECATED, or add vendor/cakephp/cakephp/src/Routing/Router.php to Error.ignoredDeprecationPaths in your config/app.php to mute deprecations from only this file. [CORE/src/Core/functions.php, line 322]

    cake4 
    opened by marianodonal 6
  • Upgrade Laravel Mix version to 6.x

    Upgrade Laravel Mix version to 6.x

    As describe in issue https://github.com/ishanvyas22/asset-mix/issues/30#issuecomment-878441912, it seems like there's security vulnerabilities in current packages versions which causes Laravel Mix version to bump up to 6.x.

    To prevent this issue from happening it would be wise to upgrade the Laravel Mix version along with other dependencies.

    cake4 Hacktoberfest 
    opened by ishanvyas22 4
  • Scaffolding inertia-react doesn't work

    Scaffolding inertia-react doesn't work

    Describe the bug I'm using cakephp-inertiajs:

    bin/cake asset_mix generate inertia-react
    

    Output:

    Error: "inertia-react" is not a valid value for preset. Please use one of "bootstrap, vue, react, inertia-vue"
    

    To Reproduce Steps to reproduce the behavior:

    1. Install and load the plugin (I did through cakephp-inertiajs)
    2. Run bin/cake asset_mix generate inertia-react

    Expected behavior Scaffolded inertia-react app in assets directory.

    Screenshots Screen Shot 2021-03-18 at 1 29 57 PM

    Not sure if this is related to cakephp-inertiajs (asset-mix not upgraded maybe), I didn't make a check yet.

    bug 
    opened by cherifGsoul 4
  • How to pass Configure variables from PHP --> JS

    How to pass Configure variables from PHP --> JS

    Hi, is there a way to pass my configuration variables from PHP to JS? For example: application logo, email, url, etc Where should we store SPA configurations? (Like in .env files)

    Thanks Massimo

    question 
    opened by impronta48 3
  • Changes the $helpers access modifier

    Changes the $helpers access modifier

    The $helpers array should be public and not protected, as per the CakePHP's official docs: https://book.cakephp.org/3/en/views/helpers.html#including-other-helpers

    opened by Andream98 2
  • Fixes script tag when defer = false

    Fixes script tag when defer = false

    When $this->AssetMix->script('app', ['defer' => false]) is called, the output script tag still contains the defer="defer" option. I fixed it by changing the way that the default options are merged.

    bug cake4 
    opened by hevertonfreitas 2
  • Unable to find assets with external cssBaseUrl and jsBaseUrl

    Unable to find assets with external cssBaseUrl and jsBaseUrl

    Description

    My assets are hosted on a CDN in production. According to the Cake Book the App.cssBaseUrl and App.jsBaseUrl should be the URL and path to the CDN. When I set App.jsBaseUrl to https://example.com/js/ I get the following error when trying to execute $this->AssetMix->script('app');:

    Unable to locate AssetMix file: /https://example.com/js/app.js.
    

    Steps To Reproduce

    1. Add the following lines to app_local.php. Combine the App array if one already exists.
      'App' => [
          'cssBaseUrl' => 'https://example.com/css/',`
          'jsBaseUrl' => 'https://example.com/js/',
      ]
      
    2. Compile javascript and CSS assets.
      mix.js('resources/js/app.js', 'webroot/js')
          .sass('resources/sass/main.scss', 'webroot/css');
      
    3. Add $this->AssetMix->js('app'); to a template file.

    Expected behavior

    The CSS file should load from https://example.com/css/main.css and the javascript should load from https://example.com/js/app.js.

    Tests

    I wrote these tests in case they would be useful.

    /**
     * Test `css()` function returns proper url
     *
     * @return void
     */
    public function testStyleTagWithExternalBaseUrl()
    {
        Configure::write('App.cssBaseUrl', 'https://example.com/css/');
    
        $this->_copyWithoutVersion();
    
        $result = $this->AssetMix->css('main');
    
        $this->assertStringContainsString('https://example.com/css/main.css', $result);
    }
    
    /**
     * Test `script()` function returns proper url
     *
     * @return void
     */
    public function testScriptTagWithExternalBaseUrl()
    {
        Configure::write('App.jsBaseUrl', 'https://example.com/js/');
    
        $this->_copyWithoutVersion();
    
        $result = $this->AssetMix->script('app');
    
        $this->assertStringContainsString('https://example.com/js/app.js', $result);
    }
    
    enhancement good first issue 
    opened by amayer-hc 1
  • Update bootstrap version to 5

    Update bootstrap version to 5

    Since there is no special bootstrap 4 functionality present (as far as I have seen) in this plugin I would guess it wouldn't be a problem to update the default generated package.json and stubs to use bootstrap 5 instead of 4.

    enhancement 
    opened by LordSimal 1
  • Using several apps

    Using several apps

    Hi, in my project I've got several apps which are loaded into normal pages ie: Pages/map.php -> will load map.js

    Is there a way to compile different apps instead of only app.js

    Thanks Massimo

    opened by impronta48 1
  • ERROR in multi ./assets/js/app.js ./assets/sass/app.sass Module not found: Error: Can't resolve

    ERROR in multi ./assets/js/app.js ./assets/sass/app.sass Module not found: Error: Can't resolve

    For custom directories (other than assets), webpack.mix.js file's content generates invalid result on npm run dev command.

    Current webpack.mix.js file content:

    const mix = require('laravel-mix');
    
    mix.setPublicPath('./webroot')
      .js('assets/js/app.js', 'webroot/js')
      .sass('assets/sass/app.sass', 'webroot/css')
      .version();
    

    It should be:

    const mix = require('laravel-mix');
    
    mix.setPublicPath('./webroot')
      .js('resources/js/app.js', 'webroot/js')
      .sass('resources/sass/app.sass', 'webroot/css')
      .version();
    

    Or whatever user has entered while generating custom directories

    bug cake3 cake4 
    opened by ishanvyas22 0
  • Additional information for server-side setup: must disable Cake asset timestamping

    Additional information for server-side setup: must disable Cake asset timestamping

    Is your feature request related to a problem? Please describe. Yes, a problem I had while setting up this library on a Cake3 application. With asset timestamping (Asset.timestamp => true or 'force' in app.php) enabled, AssetMix will fail to find the manifest. This is because Cake appends a timestamp to the end of the asset URL which means the "path" is not found in the mix manifest.

    I'm new to this plugin and to mix/manifests in general, so I apologize if my terminology is inaccurate.

    Describe the solution you'd like Either update the docs to indicate that this setting should be turned off OR find a way for the manifest loader to ignore the timestamp in the query string when loading the asset file.

    Describe alternatives you've considered N/A

    Additional context Screen Shot 2022-04-29 at 10 30 35

    bug good first issue cake4 Hacktoberfest 
    opened by jrbakooba 5
Releases(0.6.5)
  • 0.6.5(Aug 13, 2022)

    What's Changed

    • Changes the $helpers access modifier by @Andream98 in https://github.com/ishanvyas22/asset-mix/pull/32
    • Strip querystring from asset path so mix manifest key matches filename by @jrbakooba in https://github.com/ishanvyas22/asset-mix/pull/40

    New Contributors

    • @jrbakooba made their first contribution in https://github.com/ishanvyas22/asset-mix/pull/40

    Full Changelog: https://github.com/ishanvyas22/asset-mix/compare/0.6.4...0.6.5

    Source code(tar.gz)
    Source code(zip)
  • 1.4.0(Jan 21, 2022)

    What's Changed

    Fixed

    • Unable to find assets with external cssBaseUrl and jsBaseUrl. Thanks to @amayer-hc (https://github.com/ishanvyas22/asset-mix/pull/36)

    Updated

    • Laravel mix to v6. Thanks to @glennforrest (https://github.com/ishanvyas22/asset-mix/pull/33)
    • CakePHP dependency to 4.3, in order to remove deprecation warnings in routes.php file. Thanks to @Andream98 (https://github.com/ishanvyas22/asset-mix/pull/37)

    New Contributors

    • @glennforrest made their first contribution in https://github.com/ishanvyas22/asset-mix/pull/33
    • @amayer-hc made their first contribution in https://github.com/ishanvyas22/asset-mix/pull/36

    Full Changelog: https://github.com/ishanvyas22/asset-mix/compare/1.3.1...1.4.0

    Source code(tar.gz)
    Source code(zip)
  • 1.3.1(Jul 11, 2021)

  • 1.3.0(Mar 20, 2021)

    Added

    • New template for react-inertia scaffolding. Thanks to @markstory (#23)

    Fixed

    • script() method was including defer attribute even when setting 'defer' => false. Thanks to @hevertonfreitas (#24)
    Source code(tar.gz)
    Source code(zip)
  • 1.2.0(Nov 22, 2020)

  • 0.6.4(Nov 22, 2020)

  • 1.1.2(Nov 15, 2020)

  • 0.6.3(Nov 15, 2020)

  • 1.1.1(Oct 29, 2020)

  • 0.6.2(Aug 30, 2020)

  • 0.6.1(Aug 23, 2020)

  • 0.6.0(Aug 22, 2020)

    Added

    • Added inertia-vue scaffolding (#20)
    • Added check script alias in composer.json file to run all the checks together (03fe3fe)

    Changed

    • Changed js indent size from 2 to 4 in .editorconfig file (3f2432f)
    • Changed vue indent size from 2 to 4 in .editorconfig file (3aa86be)
    Source code(tar.gz)
    Source code(zip)
  • 0.5.1(Aug 7, 2020)

    Added

    • Add "Support the development" section in README.md

    Changed

    • Change installation version to ^0.5 from ^0.4 in README.md
    • Move 0.x version up in version map table in README.md
    Source code(tar.gz)
    Source code(zip)
  • 0.5.0(Aug 7, 2020)

  • 1.1.0(Aug 2, 2020)

  • 0.4.3(Jul 26, 2020)

  • 1.0.2(Jul 25, 2020)

  • 1.0.1(Jul 23, 2020)

  • 1.0.0(Jul 23, 2020)

  • 0.4.2(Jul 23, 2020)

  • 0.4.1(Jul 23, 2020)

    Added

    • Add phpstan dependency (#10)
    • Add CHANGLOG.md file (#9)

    Fixed

    • Errors from phpstan (#10)

    Changed

    • Remove check for PHP 7.0 in travis ci (#10)
    • Add check for PHP 7.3 in travis ci (#10)
    • Optimize travis checks by removing unit test command for each build (#10)
    • Rename CHANGLOG.md to CHANGELOG-0.x.md file (1248653)
    • Ignore tool specific and OS generated files from git (2eb7671)
    Source code(tar.gz)
    Source code(zip)
  • 0.4.0(Jan 26, 2020)

  • 0.3.2(Nov 9, 2019)

  • 0.3.1(Nov 1, 2019)

    • Tests to check <style> tag with and without versioning enabled
    • Tests to check <script> tag with and without versioning enabled
    • Public path change to WWW_ROOT constant
    Source code(tar.gz)
    Source code(zip)
  • 0.3.0(Oct 31, 2019)

    • Plugin name, namespace changed to AssetMix from Mix
    • Enhancement: <script> tag will now have the defer attribute by default
    • Enhancement: env() function used instead of $_SERVER global variable
    • Enhancement: functions.php loaded directly from composer instead of bootstrap file
    Source code(tar.gz)
    Source code(zip)
  • 0.2.0(Oct 28, 2019)

  • 0.1.0(Oct 26, 2019)

    • Helper function css() to call build css files from mix-manifest.json file.
    • Helper function script() to call build js files from mix-manifest.json file.
    • Supports versioning through version() function in webpack.mix.js file.
    Source code(tar.gz)
    Source code(zip)
Owner
Ishan Vyas
PHP Developer | @cakephp Evangelist | @laravel | @vuejs | OSS enthusiast
Ishan Vyas
:cake: Less parser plugin for CakePHP

Less parser plugin for CakePHP 3.X This plugin has a helper to help you parsing .less files in CakePHP 3.0 applications. By default, the helper will p

Òscar Casajuana 17 Jan 1, 2022
CakePHP Minify HTML Plugin

MinifyHtml CakePHP 4, HTML Minify Plugin Installation To install via Composer, use the command below, it will automatically detect the latest version

Cees-Jan Kiewiet 19 Dec 28, 2021
[READ-ONLY] Collection library in CakePHP. This repo is a split of the main code that can be found in https://github.com/cakephp/cakephp

CakePHP Collection Library The collection classes provide a set of tools to manipulate arrays or Traversable objects. If you have ever used underscore

CakePHP 85 Nov 28, 2022
[READ-ONLY] The event dispatcher library for CakePHP. This repo is a split of the main code that can be found in https://github.com/cakephp/cakephp

CakePHP Event Library This library emulates several aspects of how events are triggered and managed in popular JavaScript libraries such as jQuery: An

CakePHP 21 Oct 6, 2022
[READ-ONLY] Validation library from CakePHP. This repo is a split of the main code that can be found in https://github.com/cakephp/cakephp

CakePHP Validation Library The validation library in CakePHP provides features to build validators that can validate arbitrary arrays of data with eas

CakePHP 39 Oct 11, 2022
[READ-ONLY] CakePHP Utility classes such as Inflector, Text, Hash, Security and Xml. This repo is a split of the main code that can be found in https://github.com/cakephp/cakephp

CakePHP Utility Classes This library provides a range of utility classes that are used throughout the CakePHP framework What's in the toolbox? Hash A

CakePHP 112 Feb 15, 2022
[READ-ONLY] Easy to use Caching library with support for multiple caching backends. This repo is a split of the main code that can be found in https://github.com/cakephp/cakephp

CakePHP Caching Library The Cache library provides a Cache service locator for interfacing with multiple caching backends using a simple to use interf

CakePHP 49 Sep 28, 2022
Collection of agnostic PHP Functions and helpers with zero dependencies to use as foundation in packages and other project

Collection of agnostic PHP Functions and helpers This package provides a lot of very usefull agnostic helpers to use as foundation in packages and oth

padosoft 54 Sep 21, 2022
[READ-ONLY] A flexible, lightweight and powerful Object-Relational Mapper for PHP, implemented using the DataMapper pattern. This repo is a split of the main code that can be found in https://github.com/cakephp/cakephp

CakePHP ORM The CakePHP ORM provides a powerful and flexible way to work with relational databases. Using a datamapper pattern the ORM allows you to m

CakePHP 146 Sep 28, 2022
Cakephp-book allows you to search in the official CakePHP documentation directly from the console.

CakeDC/Book plugin for CakePHP cakephp-book allows you to search in the official CakePHP documentation directly from the console. Requirements CakePHP

Cake Development Corporation 3 Apr 13, 2022
A sample CakePHP api application using CakeDC/cakephp-api and swoole as server

CakePHP Application Skeleton composer create-project --prefer-dist cakephp/app Added sample data using https://github.com/annexare/Countries Created m

Marcelo Rocha 3 Jul 28, 2022
Simple MySQL library for PHP 5.4+ includes Query Builder, PDO Native functions, Helper functions for quick use.

Simple MySQL library for PHP 5.4+ includes Query Builder, PDO Native functions, Helper functions for quick use.

Kodols 9 Dec 22, 2022
High scalable boilerplate for Laravel - Vue using laravel-mix.

Why use this ? This boilerplate make developer easier to make monolith Laravel project which integrated with Vue.js and vue-router as default front-en

Carvel Saputra Martaloho 5 Sep 21, 2022
A minimal boilerplate theme for WordPress using TailwindCSS, with PostCSS and Laravel Mix.

A minimal boilerplate theme for WordPress using TailwindCSS, with PostCSS and Laravel Mix.

Pixel Devs 74 Nov 25, 2022
Laravel-Mix helper for projects with complex & multi assets.

Laravel-Mix helper for projects with complex & multi assets. ?? Getting started Since mix introduced in laravel 5.4 it is recommended to use this pack

Fandogh 27 Oct 4, 2022
live chat with laravel and react mix

About Laravel Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experie

Bayzid Aman 4 Oct 21, 2022
Helper class for working with Laravel Mix in WordPress themes and plugins.

Hybrid\Mix Hybrid Mix is a class for working with Lavarel Mix. It adds helper methods for quickly grabbing asset files cached in the mix-manifest.json

Theme Hybrid 9 Jun 2, 2022
Provides TemplateView and TwoStepView using PHP as the templating language, with support for partials, sections, and helpers.

Aura View This package provides an implementation of the TemplateView and TwoStepView patterns using PHP itself as the templating language. It support

Aura for PHP 83 Jan 3, 2023
SEO Helper is a package that provides tools and helpers for SEO (Search Engine Optimization).

SEO Helper By ARCANEDEV© SEO Helper is a package that provides tools and helpers for SEO (Search Engine Optimization). Feel free to check out the rele

ARCANEDEV 301 Nov 25, 2022
Provides TemplateView and TwoStepView using PHP as the templating language, with support for partials, sections, and helpers.

Aura View This package provides an implementation of the TemplateView and TwoStepView patterns using PHP itself as the templating language. It support

Aura for PHP 83 Jan 3, 2023