Download the PHP package nette/assets without Composer
On this page you can find all versions of the php package nette/assets. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Package assets
Short Description 🎨 Nette Assets: elegant asset management for PHP with versioning, caching and mappers for various storage backends.
License BSD-3-Clause GPL-2.0-only GPL-3.0-only
Homepage https://nette.org
Informations about the package assets
Nette Assets
Smart and simple way to work with static files in PHP applications
✅ automatic versioning for cache busting
✅ seamless Vite integration with HMR support
✅ lazy loading of file properties
✅ clean API for PHP and Latte templates
✅ multiple file sources support
Working with static files (images, CSS, JavaScript) in web applications often involves repetitive tasks: generating correct URLs, handling cache invalidation, managing file versions, and dealing with different environments. Nette Assets simplifies all of this.
Without Nette Assets:
With Nette Assets:
<!---->
Installation
Install via Composer:
Requirements: PHP 8.1 or higher.
<!---->
Quick Start
Let's start with the simplest possible example. You want to display an image in your application:
This single line:
- Finds your image file
- Generates the correct URL with automatic versioning
- Outputs a complete
<img>
tag with proper dimensions
That's it! No configuration needed for basic usage. The library uses sensible defaults and works out of the box.
Custom HTML
Sometimes you need more control over the HTML:
You can also get just the URL using the asset()
function:
Using in PHP
In your presenters or services:
Then in your template:
<!---->
Basic Concepts
Before diving deeper, let's understand three simple concepts that make Nette Assets powerful yet easy to use.
What is an Asset?
An asset is any static file in your application - images, stylesheets, scripts, fonts, etc. In Nette Assets, each file becomes an Asset
object with useful properties:
Different file types have different properties. The library automatically detects the file type and creates the appropriate asset:
- ImageAsset - Images with width, height, alternative text, and lazy loading support
- ScriptAsset - JavaScript files with types and integrity hashes
- StyleAsset - CSS files with media queries
- AudioAsset - Audio files with duration information
- VideoAsset - Video files with dimensions, duration, poster image, and autoplay settings
- EntryAsset - Entry points with imports of styles and preloads of scripts
- GenericAsset - Generic files with mime types
Where Assets Come From (Mappers)
A mapper is a service that knows how to find files and create URLs for them. The built-in FilesystemMapper
does two things:
- Looks for files in a specified directory
- Generates public URLs for those files
You can have multiple mappers for different purposes:
The Registry - Your Main Entry Point
The Registry manages all your mappers and provides a simple API to get assets:
The registry is smart about which mapper to use:
<!---->
Configuration
While Nette Assets works with zero configuration, you can customize it to match your project structure.
Zero Configuration
Without any configuration, Nette Assets expects all your static files to be in the assets
folder within your public directory:
This creates a default mapper that:
- Looks for files in
%wwwDir%/assets
- Generates URLs like
/assets/file.ext
Minimal Configuration
The simplest configuration just tells the library where to find files:
This is equivalent to the zero configuration setup but makes it explicit.
Setting Base Paths
By default, if you don't specify base paths:
basePath
defaults to%wwwDir%
(your public directory)baseUrl
defaults to your project's base URL (e.g.,https://example.com/
)
You can customize these to organize your static files under a common directory:
Advanced Configuration
For more control, you can configure each mapper in detail:
The path
and url
can be:
- Relative: resolved from
%wwwDir%
(orbasePath
) and project base URL (orbaseUrl
) - Absolute: used as-is (
/var/www/shared/assets
,https://cdn.example.com
)
Manual Configuration (Without Nette Framework)
If you're not using the Nette Framework or prefer to configure everything manually in PHP:
For more advanced configuration options using NEON format without the full Nette Framework, install the configuration component:
Then you can use NEON configuration files as described in the Nette Bootstrap documentation.
<!---->
Working with Assets
Let's explore how to work with assets in your PHP code.
Basic Retrieval
The Registry provides two methods for getting assets:
Specifying Mappers
You can explicitly choose which mapper to use:
Asset Types and Properties
The library automatically detects file types and provides relevant properties:
Lazy Loading of Properties
Properties like image dimensions, audio duration, or MIME types are retrieved only when accessed. This keeps the library fast:
Working with Options
Mappers can support additional options to control their behavior. For example, the FilesystemMapper
supports the version
option:
Different mappers may support different options. Custom mappers can define their own options to provide additional functionality.
<!---->
Latte Integration
Nette Assets shines in Latte templates with intuitive tags and functions.
Basic Usage with {asset}
Tag
The {asset}
tag renders complete HTML elements:
The tag automatically:
- Detects the asset type from file extension
- Generates the appropriate HTML element
- Adds versioning for cache busting
- Includes dimensions for images
However, if you use the {asset}
tag inside an HTML attribute, it will only output the URL:
Using Specific Mappers
Just like in PHP, you can specify which mapper to use:
Custom HTML with n:asset
Attribute
When you need control over the HTML attributes:
The n:asset
attribute:
- Sets
src
for images, scripts, and audio/video - Sets
href
for stylesheets and preload links - Adds dimensions for images and other attributes
- Preserves all your custom attributes
How to use a variable in n:asset
?
Getting Just URLs with Functions
For maximum flexibility, use the asset()
function:
Handling Optional Assets
You can use optional tags that won't throw exceptions if the asset is missing:
The optional variants ({asset?}
and n:asset?
) silently skip rendering when the asset doesn't exist, making them perfect for optional images, dynamic content, or situations where missing assets shouldn't break your layout.
For maximum flexibility, use the tryAsset()
function:
Performance Optimization with Preloading
Improve page load performance by preloading critical assets:
Generates:
The {preload}
tag automatically:
- Determines the correct
as
attribute - Adds
crossorigin
for fonts - Uses
modulepreload
for ES modules
<!---->
Advanced Features
Extension Autodetection
When you have multiple formats of the same asset, the built-in FilesystemMapper
can automatically find the right one:
Now when you request an asset without extension:
This is useful for:
- Progressive enhancement (WebP with JPEG fallback)
- Flexible asset management
- Simplified templates
You can also make extension optional:
Asset Versioning
Browser caching is great for performance, but it can prevent users from seeing updates. Asset versioning solves this problem.
The FilesystemMapper
automatically adds version parameters based on file modification time:
When you update the CSS file, the timestamp changes, forcing browsers to download the new version.
You can disable versioning at multiple levels:
Or per asset using asset options:
Working with Fonts
Font assets support preloading with proper CORS attributes:
<!---->
Vite Integration
For modern JavaScript applications, Nette Assets includes a specialized ViteMapper
that integrates with Vite's build process.
Basic Setup
Create a vite.config.ts
file in your project root. This file tells Vite where to find your source files and where to put the compiled ones.
Configure the ViteMapper in your NEON file by setting type: vite
:
Development Mode
The Vite dev server provides instant updates without page reload:
Assets are automatically served from the Vite dev server when:
- Your app is in debug mode
- The dev server is running (auto-detected)
No configuration needed - it just works!
Production Mode
Vite creates optimized, versioned bundles that Nette Assets serves automatically.
Understanding Entry Points and Dependencies
When you build a modern JavaScript application, your bundler (like Vite) often splits code into multiple files for better performance. An "entry point" is your main JavaScript file that imports other modules.
For example, your src/main.js
might:
- Import a CSS file
- Import vendor libraries (like Vue or React)
- Import your application components
Vite processes this and generates:
- The main JavaScript file
- Extracted CSS file(s)
- Vendor chunks for better caching
- Dynamic imports for code splitting
The EntryAsset
class handles this complexity.
Rendering Entry Points
The {asset}
tag automatically handles all dependencies.
Single tag renders everything needed for that entry point:
Large applications often have multiple entry points with shared dependencies. Vite automatically deduplicates shared chunks.
Development vs Production Example
The ViteMapper automatically switches between development and production modes:
During Development:
In Production:
Versioning in Vite
Vite handles the entry point versioning itself and can be set in its configuration file. Unlike FilesystemMapper
, Vite by default includes a hash in the filename (main-4a8f9c7.js
). This approach works better with JavaScript module imports.
Fallback to Filesystem
If a file isn't found in the Vite manifest, ViteMapper
will attempt to find it directly on the filesystem, similar to how FilesystemMapper
works. This is particularly useful for files in Vite's publicDir
(default: public/
), which are copied as-is to the output directory without being processed or included in the manifest.
Code Splitting and Dynamic Imports
When your application uses dynamic imports:
Nette Assets does not automatically preload dynamic imports - this is intentional as preloading all possible dynamic imports could hurt performance.
If you want to preload specific dynamic imports, you can do so explicitly:
This gives you fine-grained control over which resources are preloaded based on your application's needs.
<!---->
Creating Custom Mappers
While the built-in FilesystemMapper
and ViteMapper
handle most use cases, you might need custom asset resolution for:
- Cloud storage (S3, Google Cloud)
- Database-stored files
- Dynamic asset generation
- Third-party CDN integration
The Mapper Interface
All mappers implement a simple interface:
The contract is straightforward:
- Take a reference (like "logo.png" or "reports/annual-2024.pdf")
- Return an Asset object
- Throw
AssetNotFoundException
if the asset doesn't exist
Creating Assets with Helper
The Nette\Assets\Helpers::createAssetFromUrl()
method is your primary tool for creating Asset objects in custom mappers. This helper automatically chooses the appropriate asset class based on the file's extension:
The helper automatically creates the appropriate asset class:
- ScriptAsset for JavaScript files (
application/javascript
) - StyleAsset for CSS files (
text/css
) - ImageAsset for image files (
image/*
) - AudioAsset for audio files (
audio/*
) - VideoAsset for video files (
video/*
) - FontAsset for font files (
font/woff
,font/woff2
,font/ttf
) - GenericAsset for everything else
Database Mapper Example
For applications storing file metadata in a database:
Register in configuration:
Cloud Storage Mapper
For S3 or Google Cloud Storage:
Using Options
Options allow users to modify mapper behavior on a per-asset basis. This is useful when you need different transformations, sizes, or processing for the same asset:
Usage:
This pattern is useful for:
- Image transformations (thumbnails, different sizes)
- CDN parameters (quality, format conversion)
- Access control (signed URLs, expiration times)
Handle Multiple Sources
Sometimes you need to check multiple locations for an asset. A fallback mapper can try different sources in order:
This is useful for:
- Progressive migration: Check new storage first, fall back to old
- Multi-tier storage: Fast cache → slower database → external API
- Redundancy: Primary CDN → backup CDN → local files
- Environment-specific sources: Local files in development, S3 in production
Example configuration:
These advanced features make custom mappers extremely flexible and capable of handling complex asset management scenarios while maintaining the simple, consistent API that Nette Assets provides.
Best Practices for Custom Mappers
- Always throw
Nette\Assets\AssetNotFoundException
with a descriptive message when an asset can't be found - Use
Helpers::createAssetFromUrl()
to create the correct asset type based on file extension - Support the
$options
parameter for flexibility, even if you don't use it initially - Document reference formats clearly (e.g., "Use 'folder/file.ext' or 'uuid'")
- Consider caching if asset resolution involves network requests or database queries
- Handle errors gracefully and provide meaningful error messages
- Test edge cases like missing files, network errors, and invalid references
With custom mappers, Nette Assets can integrate with any storage system while maintaining a consistent API across your application.
Support Me
Do you like Nette Caching? Are you looking forward to the new features?
Thank you!