228

Product support

Visit this product's website for support.

  • Added on Aug 20, 2019
  • Current version: 1.0.1
  • Platform Compatibility
    v3.x use latest
    v2.x use latest
    v1.x use latest
  • Created by
  • Public repository

Categories

Push, sync, clear and serve assets to/from a CDN or use it for including manifest files from webpack or laravel-mix.

Usage

In your theme change asset links to use asset_cdn function.

Example:

<link rel="stylesheet" href="{{ asset_cdn('assets/css/app.css') }}">
<script src="{{ asset_cdn('assets/js/app.js') }}"></script>

Note: If you doesn't want to use CDN you can disable cdn in config and it will automatically fallback to theme path and use files from theme. (This is default configuration)

With manifest integration enabled:

We define file name that is compiled from Webpack or LaravelMix and exists in manifest.json file. Don't forget to enabled manifest integration and define correct manifest.json path in config file.

<link rel="stylesheet" href="{{ asset_cdn('app.css') }}">

Getting assets from cdn that are not in manifest.json file use cdn function with full path to file:

<link rel="stylesheet" href="{{ cdn('assets/css/app.css') }}">

After configuration (configuration steps are below) we can sync theme assets to cdn

Depending on theme run command to sync specific theme. For example to sync theme with name demo we use php artisan cdn:sync demo. If you want to remove old files that are compared with your local copy you can use flag --delete-old

Configuration

1. Configure Filesystem

If is your plan to use CDN, you can use this config. If not you can skip this step. Example is for AWS S3 with Cloudfront.

config/filesystems.php

'asset-cdn' => [
    'driver' => 's3',
    'key'    => env('S3_KEY'),
    'secret' => env('S3_SECRET'),
    'region' => env('S3_REGION'),
    'bucket' => env('S3_BUCKET'),
    'root'   => 'assets/',
],
2. Configure config

Create cdn.php file in config folder to configure cdn plugin, this allows to use different configs for developing or local enviroments.

Don't forget to define root filesystem folder same as assetsFolder best is to use default as assets to match october default theme assets folder.

config/cdn.php

return [

  // CDN integration
  'active' => false,
  'url' => 'https://cdn.mydomain.com/',
  'assetsFolder' => '/assets/',

  // Manifest integration (webpack, laravel mix)
  'useManifest' => false,
  'manifestPath' => '/assets/compiled/manifest.json',

  // Filesystem information that will be used with sync, push, clear commands
  'filesystem' => [
    'disk' => 'asset-cdn',
    'options' => []
  ]

  // Files filter
  'files' => [
    'ignoreDotFiles' => true,
    'ignoreVCS' => true,
    'include' => [
        'paths' => [
            //
        ],
        'files' => [
            //
        ],
        'extensions' => [
            //
        ],
        'patterns' => [
            //
        ],
    ],
    'exclude' => [
      'paths' => [
        //
      ],
      'files' => [
          //
      ],
      'extensions' => [
          //
      ],
      'patterns' => [
          //
      ],
    ],
  ],
];

Optional filesystem options:

Filesystem allows to define custom options. The following example is recommended for AWS S3.

cdn.php > filesystem.options

    'options' => [
       'ACL' => 'public-read',
       'CacheControl' => 'max-age=31536000, public'
    ]

Commands

Sync Assets

Sync all assets but deletes old files that are on CDN.

php artisan cdn:sync {theme} {--delete-old}
  • delete-old option enables automatic deletion of old files that does not exist in local folder

Push Assets

Pushes assets but does not delete old files on CDN.

php artisan cdn:push {theme}

Delete all assets from CDN

Deletes all assets from CDN.

php artisan cdn:clear {theme}

Twig Functions

  • Replace 'path'|theme with asset_cdn('path') (It can read manifest.json file if option useManifest is set to true in config).
  • Replace any asset that is going out of asset theme directory or is not used in manifest with cdn('path').
  • Found the plugin useful on 28 Nov, 2020

    Hi, Nice plugin...good work. Can we use the combine filter? for eg: {{ [ asset1.css, asset2.css, asset3.css ] | theme }}

    All the best,

    Pedro

  • author

    Replied on 29 Nov, 2020

    Hey, thanks! You cant use combine filter because combining files you should use webpack or other precompiler.

  • Found the plugin useful on 19 Mar, 2020

    Is there a solution for this: https://www.mywebsite.com/themes/mytheme/https://www.mywebsite.com/themes/mytheme/assets/css/styles.css? source style.css is in the directory instead of the actual one. Why this happened? In my directory there is no manifest file.json

  • author

    Replied on 19 Mar, 2020

    Hey, not sure why this happens, can you please make issue on github with more information?

1.0.1

First version of Cdn

Aug 19, 2019