Im am using Symfony 2.5.3 with Assetic Bundle 2.5.0. Assetic keeps generating wrong urls to generated asset files.
My config_dev.yml looks like this:
assetic:
use_controller: false
write_to: %kernel.root_dir%/../web/dev/dev-env/
When I run php app/console assetic:dump --env=dev the files are correctly written to the above configured directory.
However, in the twig template, the output is like this:
<script src="/js/7cca762_part_4_timer_2-33c923b.js"></script>
<script src="/js/7cca762_part_4_uploader_3-6336104.js"></script>
when it should be
<script src="/dev/dev-env/js/7cca762_part_4_timer_2-33c923b.js"></script>
<script src="/dev/dev-env/js/7cca762_part_4_uploader_3-6336104.js"></script>
The twig template looks like this:
{% javascripts
'#AcmeProjectBundle/Resources/js/*' filter='?uglifyjs2'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
Any ideas?
Update:
I just found this Stackoverflow item describing the same problem - also without a clear solution so far.
try out asset base urls
framework:
templating:
assets_base_urls:
http: your.url.com/dev/dev-env
Related
I have this doubt about URLs of assetics who I generated.
On the view, this was what I did:
{% block stylesheets %}
{% stylesheets
'assets/vendor/bootstrap/dist/css/bootstrap.min.css'
'assets/vendor/font-awesome/css/font-awesome.min.css'
'assets/vendor/dist/css/*.css'
output = 'bundles/compiled/css/app.css' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
{% javascripts
'assets/vendor/jquery/dist/jquery.min.js'
'assets/vendor/bootstrap/dist/js/bootstrap.min.js'
'assets/vendor/dist/js/wow.min.js'
'assets/vendor/dist/js/slider.js'
'assets/vendor/dist/js/jquery.fancybox.js'
'assets/vendor/dist/js/owl.carousel.min.js'
'assets/vendor/dist/js/main.js'
'assets/vendor/dist/js/modernizr-2.6.2.min.js'
output = 'bundles/compiled/js/app.js' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
In dev environment, the app doesn't call these outputs links who assetic:dump generate, which is:
bundles/compiled/css/app.css
and
bundles/compiled/js/app.js/
both after /web folder.
In prod, I can't reach these locations. I get and 404 on
http://link.com/bundles/compiled/css/app.css for example.
So, how can I configure my config.yml for reach that path in prod environment?
This is what I have:
assetic:
debug: '%kernel.debug%'
use_controller: '%kernel.debug%'
filters:
cssrewrite: ~
**Edit:**I figured out the problem. My assetic's config was alright, the problem was in VirtualHosts file (modrewrite line, to be specific), which was only accepting ".php" extension files and web/ folder permissions.
That's the whole point of using AsseticBundle! When you are in prod mode, you need to dump the asset files. Have a look here.
php bin/console cache:clear --env=prod //clear the cache for prod environment
php bin/console assetic:dump --env=prod --no-debug
The result will be the concatenation of all your css stylesheets, in one single result file (bundles/compiled/css/app.css), and the concatenation of all your js scripts in one single result file (bundles/compiled/js/app.js), for the reason of reducing the requests to the server.
At this point, you won't be able to see, in the source of the page, all the css + js files, except those two from your compiled/ directory.
When you are in dev mode, the default behavior of AsseticBundle is to generate all your css + js files, for debugging purposes. That is, to help you debug your code easily. So at this point you will be able to see all you css+js files, but not the two files from compiled/ directory.
And pay attention, as cssrewrite must be a child of filters. See here the correction you need.
I'm using Assetic to manage assets in my Symfony2 project. It worked well before i made my application accessible with a domain folder.
before : myapplication.local // Assetic works
now : mydomain.local/myapplication // Assetic doesn't work
The requested css files are called but the filter cssrewrite writes a wrong path for the ressources.
Error :
NetworkError: 404 Not Found - http://www.mydomain.local/Resources/public/images/menu/nav-bg-1.png
The expected URL should looks like http://www.mydomain.local/myapplication/Resources/public/images/menu/nav-bg-1.png
Here is my Assetic Call
{% block stylesheets %}
{% stylesheets
'#Mybundle/Resources/public/css/myfile.css' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
I know Assetic say to not use the #-naming when using cssrewrite. But it worked fine without the domain folder, and using "bundles/mybundle/css/myfile.css" does not solve the problem.
If you need anymore information, just ask me ;).
Thank you for your time and you help.
You should use naming without # as said in the documentation. Also you need to dump your assets via assetic every time you change anything with them.
To dump assetic run next command:
php app/console assetic:dump
or
php app/console assetic:dump --env=prod // To generate only files needed for production environment
I managed to fixe this issue by removing the cssrewrite filter and putting all my images, fonts, etc... in web/images or web/fonts, etc... Then in my css, all my path are like "../folder/file"
You can define the assets base URL in your app/config/config*.yml files:
In dev environment: app/config/config_dev.yml
framework:
templating:
engines: ['twig']
assets_base_urls:
http: [http://www.mydomain.local/myapplication/]
In prod environment: app/config/config_prod.yml
framework:
templating:
engines: ['twig']
assets_base_urls:
http: [http://www.example.com/static/]
The cssrewrite filter should remove Resources/public/ from the URL.
my question may seems really pointless or I may look like an idiot, but I'd like to use Zurb Foundation in Symfony2.
I saw a little number of topics about it, but never an real a clear explanation on how to integrate it properly in my project.
I saw an official bundle on packagist. I installed it so. But there is no documentation for using it with symfony2. For example, how to call my css and js files ? From the vendor folder directly ? How to use compass in my symfony project to use it ? Should I use bower directly ? (this seems to me less painfull) And if yes, if I have an already existing Symfony2 project, may I use bower in the root of my project ? in web folder ? anywhere else ?
I'm really lost and would be greatfull if someone could explain me or give me some resources to help me out.
Thanks
For my website I put all my JS/CSS files in vendor NameVendor
In my layout
{% javascripts
'http://code.jquery.com/jquery-2.1.0.min.js'
'#NameBundle/Resources/public/js/*' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
{% stylesheets
'#NameBundle/Resources/public/css/*'
filter='cssrewrite' output='css/*.css' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
In script tag
$(document).ready(function(){
$(document).foundation();
});
In App/config/config.yml
# Assetic Configuration
assetic:
debug: %kernel.debug%
use_controller: false
bundles: [ NameBundle ]
filters:
cssrewrite: ~
I failed to use grunt to update my files so do it manually
https://github.com/florianbelhomme/FlobFoundationBundle
I think that's what you're looking for?
I would like to use CDN together with Assetic in my Symfony2 project. I am using the javascripts helper to combine several Javascript files:
{% javascripts
'#MyBundle/Resources/public/js/file-1.js'
'#MyBundle/Resources/public/js/file-2.js' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
and in my config.yml file I have registered a CDN to be used in the assets:
framework:
templating:
assets_base_urls:
http: [http://my.cdn.url]
ssl: [https://my.cdn.url]
When dumping, I do get a combined file, but its url is a relative one, not one pointing to the CDN. For instance:
<script src="/js/c713f83.js"></script>
And the same happens when combining several CSS files. The only way I managed to get URLs using the CDN is through asset:
<img src="{{ asset('bundles/mybundle/images/logo.png') }} ">
Is there anything preventing Assetic from using the CDN hosts I have specified in my configuration?
You have to pass the Assetic's generated asset_url to the asset() Twig's function :
{% javascripts
'#MyBundle/Resources/public/js/file-1.js'
'#MyBundle/Resources/public/js/file-2.js' %}
<script src="{{ asset(asset_url) }}"></script>
{% endjavascripts %}
Be aware that in dev environment you will get URLs that look like http://my.cdn.url/app_dev.php/js/file-1.js. In order to prevent that you have to configure your dev environment so it doesn't use CDN :
# app/config/config_dev.yml
framework:
templating:
assets_base_urls:
http: []
ssl: []
Remember dumping your assets with assetic:dump and, overall, remember that Assetic and the Symfony2 asset Twig function are two different things.
I'd like to globally configure the output dir of where assetic dumps my JS files. Currently, they always go to web/js/*. I want to change this to web/js/compiled/*.
It's possible to specify this at a per-file level: http://symfony.com/doc/2.0/cookbook/assetic/asset_management.html#dumping-asset-files
Can't seem to find a way to set this globally across my Symfony app. Any config parameter I'm missing?
UPDATE
Found an assetic config parameter called write_to. Setting this in config.yml causes the command line assetic:dump to dump files to the new dir, but within twig files the asset_url var still points to the original path.
You should use the property write_to.
in my configuration for exemple I use
# Assetic Configuration
assetic:
debug: %kernel.debug%
use_controller: %kernel.debug%
read_from: %kernel.root_dir%/Resources/views/
write_to: %kernel.root_dir%/../web/static/
Your ouput string start where ends write_to
for exemple
{% javascripts filter="closure" output='js/main.js'
...
{% stylesheets filter='compass,?cssrewrite'
'default/static/sass/screen.scss'
output='css/screen.css'
%}
both will placed respectively in /web/static/js/main.js
and /web/static/css/screen.css
assets_base_urls is used to specify base URL's to be used for assets referenced from http and ssl (https) pages.
!! assets_base_urls is also used by {% images %} as the root before output value, but {% images %} doesn't consider write_to when rendering html (only when dumping) so better not using write_to and rely only on output value. More about it in my other post on stackoverflow and in this post on AsseticBundle's github.
You can set the asset path ( assets_base_urls ) for twig to a static path, instead of using the relative path. In your config.yml file, it would look similar to this:
framework:
templating:
engines: ['twig']
assets_base_urls:
http: [http://path.to-cdn.com]
This will effect asset_url from assetic as well as twig's asset() method. The latter may or may not be desired.
This GitHub issue comment helped me with this issue.
While in dev, your assets will still go thru the controller but in production, the URLs will be as you desire.
Example config.yml:
assetic:
write-to: %kernel.root_dir%/../web/assets
...
framework:
...
templating:
engines: ['twig']
packages:
assetic:
base_urls: '/assets'
Example in your template:
{% block javascripts %}
{% javascripts '#jquery' '#bootstrap_js' '#backbone' '#handlebars' combine=true package='assetic' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
Notice that you have to add the package='assetic' attribute in the java scripts tag. This is a good compromise IMO because it won't break assets from other bundles as kmfk's solution will.
Just a quick note on this. If you're using assets_base_urls, to specify a relative base URL, this only works prior to Symfony 2.7, due to the introduction of the new assets component in that version. Further information on how to change this is available at http://symfony.com/blog/new-in-symfony-2-7-the-new-asset-component , but the long and short of it is that:
framework:
templating:
assets_base_urls:
http: ['/some-relative-url']
ssl: ['/some-relative-url']
becomes:
framework:
assets:
base_path: /some-relative-url
Try this commande $ app/console --env=prod assetic:dump web/
you have juste to change the url you want raher than 'web/'