Synopsis¶

You need to customize "route" in Mojolicious::Plugin::AssetPack to accomplish this:

  $app->asset->route->to(base_url => "http://cdn.example.com/my-assets/");

Caveat¶

Many recent browsers blocks mixed content, meaning if your HTML is served over HTTPS, then you can't serve the assets over HTTP. One way to fix this is by using "//" instead of a scheme specific URL. Example:

  base_url => "//cdn.example.com/my-assets/"

This will tell the browser to use the same scheme for fetching assets, as it did fetching the web page.

See also¶

<https://developers.google.com/speed/docs/best-practices/request#ServeFromCookielessDomain>.

Sass¶

Sass files can also be generated dynamically. Here is an example Sass file:

  @import "http://local/sass/dynamic";
  $color: red !default;
  body { color: $color; }

Normally, the @import statement would be left untouched, but AssetPack will (in the special case where the host is "local") inline the result from that resource. This allow $color to be set from the application and override the default $color in the file above. Example:

  get "/sass/_dynamic" => [format => "scss"], sub {
    my $c = shift;
    $c->render(text => "\$color: black;\n");
  };

Note that this feature is EXPERIMENTAL and not compatible with standard Sass rules.

Bootstrap¶

The SASS version of <http://getbootstrap.com> can easily be included by defining it in the assetspack.def file:

  $ cat - > assets/assetpack.def
  ! app.css
  < https://github.com/twbs/bootstrap-sass/raw/master/assets/stylesheets/_bootstrap.scss

After that, you might want to customize bootstrap. This can then be done by changing "assetpack.def" to:

  ! app.css
  << https://github.com/twbs/bootstrap-sass/raw/master/assets/stylesheets/_bootstrap.scss
  < sass/main.scss

"assets/sass/main.scss" should then have a modified version of <https://github.com/twbs/bootstrap-sass/raw/master/assets/stylesheets/_bootstrap.scss>:

  @import "variables.scss";
  @import "../cache/github.com/twbs/bootstrap-sass/raw/master/assets/stylesheets/bootstrap/mixins";
  @import "../cache/github.com/twbs/bootstrap-sass/raw/master/assets/stylesheets/bootstrap/normalize";
  @import "../cache/github.com/twbs/bootstrap-sass/raw/master/assets/stylesheets/bootstrap/print";
  ...

The file "_variables.scss" should also be copied to "assets/sass".

(Note that the rest of the example file above is truncated)

Font awesome¶

<https://fortawesome.github.io/Font-Awesome/> can be included with the snippet below:

  $app->asset->process(
    "app.css" => (
      "https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css",
    )
  );

See also Mojolicious::Plugin::AssetPack::Pipe::Fetch for information about automatically fetching related font files.

Google fonts¶

<https://www.google.com/fonts> can be included with this snippet:

  $app->asset->process(
    "app.css" => (
      "https://fonts.googleapis.com/css?family=Roboto:400,700",
      "your-app.css",
    )
  );

JavaScript polyfills¶

<https://github.com/Modernizr/Modernizr> contains a list of many shims which can be included. Here is just one example:

  $app->asset->process(
    "app.js" => (
      "http://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.3.0/es5-shim.js",
      "http://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.3.0/es5-sham.js",
      "your-app.js",
    )
  );

jQuery¶

<http://jquery.com> can easily be included by referring to a CDN:

  $app->asset->process(
    "app.js" => (
      "http://code.jquery.com/jquery-1.12.0.js",
      "your-app.js",
    )
  );

Materialize CSS¶

<http://materializecss.com/> can be included by defining it in the assetspack.def file. Mojolicious::Plugin::AssetPack::Pipe::Sass will also discover all the "@import" files and download those recusively as well.

  $ cat - > assets/assetpack.def
  ! app.css
  < https://raw.githubusercontent.com/Dogfalo/materialize/master/sass/materialize.scss
  < https://fonts.googleapis.com/icon?family=Material+Icons

After that, you might want to customize Materialize. This can then be done by changing "assetpack.def" to:

  ! app.css
  << https://raw.githubusercontent.com/Dogfalo/materialize/master/sass/materialize.scss
  < https://fonts.googleapis.com/icon?family=Material+Icons
  < sass/main.scss

"assets/sass/main.scss" should then have a modified version of <https://raw.githubusercontent.com/Dogfalo/materialize/master/sass/materialize.scss>:

  @charset "UTF-8";
  @import "../cache/raw.githubusercontent.com/Dogfalo/materialize/master/sass/components/prefixer";
  @import "../cache/raw.githubusercontent.com/Dogfalo/materialize/master/sass/components/mixins";
  @import "../cache/raw.githubusercontent.com/Dogfalo/materialize/master/sass/components/color";
  @import "variables.scss";
  ...

The file "_variables.scss" should also be copied to "assets/sass".

(Note that the rest of the example file above is truncated)