Assets Managment

Premise

Laraloop use standard Laravel way for publishing and customizing assets, by using artisan command vendor:publish for publish assets, and mix to compile SASS and JavaScript code. More details about publishing assets can be found here and for compiling assets with mix here.

There is two separated group of assets, one for admin and one for frontend, each of them have separated webpack.mix.js file in core packages located in packages/laraloop/core/. You will find two file webpack.admin.mix.js and webpack.frontend.mix.js.

1. Compile Assets

First run npm install inside core package:

$ cd packages/laraloop/core
$ npm install

Then you can compile only admin or frontend or both together with single line using custom command which use concurrently.

Compile only admin:

$ npm --section=admin run dev

Compile only frontend:

$ npm --section=frontend run dev

Compile both admin and frontend concurrently:

$ npm run dev-all

When you compile for production you need to do that separately using:

$ npm --section=admin run prod
$ npm --section=frontend run prod

Laraloop use Laravel Mix Merge Manifest which merge your custom mix-manifest.json in public folder of Laravel. This is useful as you new file will be merged with your, but keep attention if you remove or rename some SASS or JavaScript file of Laraloop, since mix-manifest.json is not overriden but merged, and when missing a file will be thrown an error during compilation. This is easy to fix by just deleting mix-manifest.json before compiling assets, it will be recreated.

2. Publish Assets

Compiled files using mix explained above will be moved automatically in public/assets folder, but not all such as images, fonts and some vendor. For publish all assets from packages/laraloop/core/assets to public/assets you can run below artisan command:

$ php artisan vendor:publish --force --tag=laraloop-assets

The option --force will override any existing file already published.

The quick installation with complete Laravel installation and Laraloop packages has already all assets published, for production.

If you want to publish all source assets files on root of Laravel and customize it by merging with your own assets source, then you can publish assets source using command:

$ php artisan vendor:publish --force --tag=laraloop-assets-src

The webpack.admin.mix.js, webpack.frontend.mix.js and package.json are not published, so you can define your own webpack.mix.js as you wish, check files of Laraloop as reference. You would also take into account to update your package.json adding dependencies used by Laraloop.

3. Loading Assets

Laraloop has custom directive for loading CSS and JavaScript globally or for specific pages. It's very easy but yet powerful way to manage which assets are loaded globally or per page. For example each page with a form has own JavaScript like for validations, calendar picker, ajax form, autocomplete, etc. This is loaded only as group of assets in page with form. You can also define your own group of assets. Below are shown a few examples.

Load styles globally for:

@styles(admin)

And for frontend:

@styles(frontend)

NOTE: Don't use any quote like @styles('admin') or @styles("admin")

And for JavaScripts the directive is:

@scripts(frontend)
@scripts(admin)

Then for load a group of styles or scripts use:

@scripts(frontend:form)
@scripts(admin:form)

And for styles:

@styles(frontend:form)
@styles(admin:form)

How it works?

This allow to add or remove any styles or scripts without changing code, but via config of admin or frontend. You will find a config like below used in admin:


    /*
    |--------------------------------------------------------------------------
    | Define which scripts and styles should be loaded in admin.
    |--------------------------------------------------------------------------
    |
    |  You can use:
    |  1) 'assets/js/app.js' => 'mix'   // converted to mix('assets/js/app.js')
    |  2) 'assets/js/admin/app.js'     // converted to asset('assets/js/app.js')
    |  3) or full url to your preferred CDN
    |
    */
    'scripts_global' => [
        'assets/js/manifest.js' => 'mix',
        'assets/js/vendor.js' => 'mix',
        'assets/vendor/pace-progress/pace.min.js',
        'assets/vendor/perfect-scrollbar/perfect-scrollbar.min.js',
        'assets/js/admin.js' => 'mix'
    ],
    'styles_global' => [
        'https://fonts.googleapis.com/css?family=Barlow+Semi+Condensed:500,600|Source+Sans+Pro:400,600&display=swap',
        'assets/vendor/open-iconic/font/css/open-iconic-bootstrap.min.css',
        'assets/vendor/fontawesome/css/all.min.css',
        'assets/css/admin.css' => 'mix',
    ],
    'scripts_datatable' => [
        'assets/vendor/datatable/bundle.js'
    ],
    'styles_datatable' => [
        'assets/vendor/datatable/bundle.css'
    ],
    'styles_form' => [
        'assets/vendor/form/admin.css' => 'mix'
    ],
    'scripts_form' => [
        'assets/vendor/form/admin.js' => 'mix'
    ],

Everything inside 'scripts_global' will be loaded using directive @scripts(admin) while everything inside 'scripts_datatable' can be loaded using @scripts(admin:datatable). Simple right?

Another thing that you can notice is that you can load assets using mix(), asset() or from CDN by adding full URL. When you want to use mix() then simple add as value mix example:

    'scripts_global' => [
        'assets/js/admin.js' => 'mix'
    ],

While for use asset() or CDN just add value, example:

    'styles_global' => [
        'https://fonts.googleapis.com/css?family=Barlow+Semi+Condensed:500,600|Source+Sans+Pro:400,600&display=swap',
        'assets/vendor/open-iconic/font/css/open-iconic-bootstrap.min.css',
    ],

Same concept for scripts and styles.

If you want to define your own group of styles or scripts then just add:

    'styles_mygroup' => [
        'assets/my-style.css',
        'assets/my-mix-style.css' => 'mix',,
        'https://my-cdn.com/my-style.css',
    ],

Then load using:

@styles(frontend:mygroup)

Obviously frontend: or admin: part depend in which config you define styles_mygroup or scripts_mygroup.

Powerful right?

Last thing worth to mention is how to load scripts or styles only in one page, since you don't need to use config for each styles or scripts you load. You can load them as you prefer directly in blade. Laraloop use @stack for append styles and scripts before or after assets defined in config. For example for load scripts and styles use Laravel @push, example:

@push('styles.before')
    // Inline styles or include any style file before global
@endpush
@push('scripts.after')
    // Inline scripts or include any script file after global
@endpush

You can also use @push('styles.after') and @push('scripts.before') but usually the prefered way is to load styles such as custom plugin before for allow override and scripts after global for have access to global JavaScript such as jQuery. But that is not always the case, sometime you want opposite for several reasons.

Last thing, all scripts are loaded using single file located in packages/laraloop/core/resource/views/partials/scripts.blade.php. You have a variable $context for know if is admin or frontend to load conditionally the scripts you want. If you need to customize this, then you can publish this file inside your root resources/views/vendor/loop/partials/scripts.blade.php. All styles are loaded directly in app.blade.php layout, respectively for admin packages/laraloop/admin/resource/views/layouts/app.blade.php or for frontend in packages/laraloop/frontend/resource/views/layouts/app.blade.php.

I hope this doc will help you getting started customize Laraloop, and in case I missed something, sorry for that. Get in touch with me and I will be glad to clearify anything not being covered here.

Happy Coding!