i'm developping a symfony application using assetics.
when i dump assets
assetic:dump
then i deleted cache manually.
there is no problem all is done correctely. dev env turns correctely too. but when i use prod env i have some js errors. some functions are not readed.
$(...).mask is not a function
,
Cannot read property 'getWidthFrom' of undefined
,
timeLeft is not defined
I don't know why in dev env is working but not the same case for prod
env. any one to help me?
{% block js %}
{{parent()}}
{% javascripts output="js/compiled/main.js"
'bundles/sbcplatform/bower_components/datatables/media/js/jquery.dataTables.min.js'
'bundles/sbcplatform/bower_components/datatables-buttons/js/dataTables.buttons.js'
'bundles/sbcplatform/assets/js/custom/datatables/buttons.uikit.js'
'bundles/sbcplatform/bower_components/jszip/dist/jszip.min.js'
'bundles/sbcplatform/bower_components/pdfmake/build/pdfmake.min.js'
'bundles/sbcplatform/bower_components/pdfmake/build/vfs_fonts.js'
'bundles/sbcplatform/bower_components/datatables-buttons/js/buttons.colVis.js'
'bundles/sbcplatform/bower_components/datatables-buttons/js/buttons.html5.js'
'bundles/sbcplatform/bower_components/datatables-buttons/js/buttons.print.js'
'bundles/sbcplatform/assets/js/custom/datatables/datatables.uikit.min.js'
'bundles/sbcplatform/assets/js/pages/plugins_datatables.min.js' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
I have just deleted {{parent()}} because of it symfony generate two calls of main.js and that cause this problem
try
php app/console cache:clear --env=prod && php app/console assets:install && php app/console assetic dump --env=prod
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.
One of most asked questions and I didn't find answer.
How to list existed assets bundles.
How to make new assets bundle.
I had tried with
php app/console assets:install web --symlink
and
php app/console assets:install --symlink
In project I work currently, there is 4 bundles and using suggested /web folder for assets is not in option.
Also I had tried
asset('#Bundle/Resources/public/images/image.png')
I must notice that this '#Bundle/Resources/public/...' worked for calling assets in block
{% block stylesheets %}
{{ parent() }}
{% stylesheets
'#Bundle/Resources/public/css/some.css'
filter='cssrewrite' output='css/compiled.app.css'
%}
<link rel="stylesheet" href="{{ asset_url }}" xmlns="http://www.w3.org/1999/html"/>
{% endstylesheets %}
{% endblock %}
but when tried "asset('...')" I got error undefined assets.
I just study this:
http://symfony.com/doc/current/assetic/asset_management.html
and solve problem with images using symfony image tag
{% image '#AppBundle/Resources/public/images/example.jpg' %}
<img src="{{ asset_url }}" alt="Example" />
{% endimage %}
Also assets bundles is founding in web/bundles folder after executing command assets:install --symlink
and there you can see lowercase asset bundle name in example AppTestBundle will be just apptest
I have a css file and an image in a bundle directory according these paths:
My_project
+-src
+-Project
+-MyBundle
+-Resources
+-public
+-css
+-MyCSSfile.css
+-images
+-MyImage.jpeg
In my view I call my css using assetic:
{% stylesheets 'bundles/myBundle/css/MyCSSfile.css' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}"/>
{% endstylesheets %}
In my CSS I use:
background-image: url('../images/background.jpg');
Obviously it doens't work. The url which is returned by symfony is:
"http://localhost:8888/MY_Project/web/bundles/myBundle/css/bundles/myBundle/images/background.jpg".
Any idea? Please
In your case, maybe you should use :
php app/console assets:install
in order to copy or symlink assets in the web/bundles directory.
Try this
php bin/console assetic:dump
and try also to clear your cache
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.
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