We can manage assets via the command line.

Precompile

This command is useful for deployment purposes.

  1. $ bundle exec hanami assets precompile

The first step it precompiles and copies all the assets from all the applications and third party gems under public/assets/ directory.

Then it compress all the javascripts and stylesheets, in order to save browsers bandwidth.

As last thing, it generates a copy of each asset, by appending its checksum to the file name. This trick makes assets cacheable by browsers.

It generates a fingeprint manifest that lists all the assets and their checksum counterpart.

  1. $ cat public/assets.json
  2. {
  3.   # ...
  4.   "/assets/application.css":"/assets/application-9ab4d1f57027f0d40738ab8ab70aba86.css"
  5. }

This is used by assets helpers to resolve an asset name into a relative path.

Example

Let’s say we have a project with three applications: admin, metrics and web.

  1. # config/environment.rb
  2. # ...
  3. Hanami::Container.configure do
  4.   mount Metrics::Application, at: '/metrics'
  5.   mount Admin::Application,   at: '/admin'
  6.   mount Web::Application,     at: '/'
  7. end

They have the following sources:

  • Admin: apps/admin/assets
  • Metrics: apps/metrics/assets
  • Web: apps/web/assets, apps/web/vendor/assets

Furtermore, they all depend on Ember.js, which is distributed by an imaginary gem named hanami-ember.

  1. $ tree .
  2. ├── apps
  3. │   ├── admin
  4. │   │   ├── assets
  5. │   │   │   └── js
  6. │   │   │       ├── application.js
  7. │   │   │       └── zepto.js
  8. # ...
  9. │   ├── metrics
  10. │   │   ├── assets
  11. │   │   │   └── javascripts
  12. │   │   │       └── dashboard.js.es6
  13. # ...
  14. │   └── web
  15. │       ├── assets
  16. │       │   ├── images
  17. │       │   │   └── bookshelf.jpg
  18. │       │   └── javascripts
  19. │       │       └── application.js
  20. # ...
  21. │       └── vendor
  22. │           └── assets
  23. │               └── javascripts
  24. │                   └── jquery.js
  25. # ...

When we run hanami assets precompile on our server, here’s the output.

  1. $ tree public
  2. public
  3. ├── assets
  4. │   ├── admin
  5. │   │   ├── application-28a6b886de2372ee3922fcaf3f78f2d8.js
  6. │   │   ├── application.js
  7. │   │   ├── ember-b2d6de1e99c79a0e52cf5c205aa2e07a.js
  8. │   │   ├── ember-source-e74117fc6ba74418b2601ffff9eb1568.js
  9. │   │   ├── ember-source.js
  10. │   │   ├── ember.js
  11. │   │   ├── zepto-ca736a378613d484138dec4e69be99b6.js
  12. │   │   └── zepto.js
  13. │   ├── application-d1829dc353b734e3adc24855693b70f9.js
  14. │   ├── application.js
  15. │   ├── bookshelf-237ecbedf745af5a477e380f0232039a.jpg
  16. │   ├── bookshelf.jpg
  17. │   ├── ember-b2d6de1e99c79a0e52cf5c205aa2e07a.js
  18. │   ├── ember-source-e74117fc6ba74418b2601ffff9eb1568.js
  19. │   ├── ember-source.js
  20. │   ├── ember.js
  21. │   ├── jquery-05277a4edea56b7f82a4c1442159e183.js
  22. │   ├── jquery.js
  23. │   └── metrics
  24. │       ├── dashboard-7766a63ececc63a7a629bfb0666e9c62.js
  25. │       ├── dashboard.js
  26. │       ├── ember-b2d6de1e99c79a0e52cf5c205aa2e07a.js
  27. │       ├── ember-source-e74117fc6ba74418b2601ffff9eb1568.js
  28. │       ├── ember-source.js
  29. │       └── ember.js
  30. └── assets.json

The structure of the output directories in public/assets, reflects the path prefix of each application. The default application named Web, is mounted at /, so the output directory is public/assets and their base URL is /assets (eg. /assets/application-28a6b886de2372ee3922fcaf3f78f2d8.js). Simirarly, for an application Admin mounted at /admin, the assets will be placed under public/assets/admin and reachable at /assets/admin/application-28a6b886de2372ee3922fcaf3f78f2d8.js.