EDITED:
I am using assetic with symfony2. Each time I try to load a page, on requesting for the JS and CSS files, my browser gets a 500 error. If I type the address of that resource in address bar, I can load its file successfully! Even weirder, the CPU load increases like 30% whenever Symfony boots up!
I tried assets:install and assetic:dump --no-debug, guess what, none of the symfony pages load anymore. They all end in 500 error.
I don't think it is caused by apache. I can load any other static of PHP pages, and I also tried nginx and got a 500 error. I have to cache:clear in order to get them back.
Any idea? I have already updated and reinstalled my web server, CGI, PHP and used a fresh copy of symfony and copied the sources, none of them helped.
dump:
This is how I used Assetic with JS. There is a similar block for css:
{% javascripts
'#SharifCalendarBundle/Resources/public/js/kendoui/jquery.min.js'
'#SharifCalendarBundle/Resources/public/js/JQueryUi/jquery-ui-1.10.3.custom.min.js'
'#SharifCalendarBundle/Resources/public/js/noty/jquery.noty.js'
'#SharifCalendarBundle/Resources/public/js/noty/layouts/top.js'
'#SharifCalendarBundle/Resources/public/js/noty/layouts/topLeft.js'
'#SharifCalendarBundle/Resources/public/js/noty/layouts/topRight.js'
'#SharifCalendarBundle/Resources/public/js/noty/themes/default.js'
'#SharifCalendarBundle/Resources/public/js/kendoui/kendo.web.min.js'
%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
In order to have a better understanding of what is going in, perhaps you could execute the commands related to assets in verbose mode (from your project root directory when using a standard Symfony2 edition) ?
php app/console assets:install --symlink -v
php app/console assetic:dump -v
Related
I just ran into an issue. I pulled by newest code in production and I tried to dump all the assets however I noticed that everytime I run
php bin/console assetic:dump --env=prod --no-debug
I get only 5 js assets generated vs in development it is about 100 al together with css. I tried running cache clear as well and it didn't work. Any ideas?
It depends on your configuration, but most of the time, in prod environment, your assets are combined altogether and minified for faster loading.
Check your {% javascripts %} and {% stylesheets %} filters first, and more specifically the output="xxx" part. There are good chances this file contains your whole bulk of assets.
I want to include css and js files from a library in my vendor directory into Twig.
I downloaded morrisjs via composer into my vendor directory of symfony. Now I want to include the main css und js files into my Twig Template. But as far as I know the asset function only works with files that are located in Bundles.
The files I want to include are located in the following paths:
project\vendor\morrisjs\morris.js\morris.js
project\vendor\morrisjs\morris.js\morris.css
I thought about some theoretical code that would look like that:
{% block stylesheets %}
<link href="{{ asset('vendor/morrisjs/morris.js/morris.css') }}" />
{% endblock %}
Is there any possibility to include these files directly from vendor and how when not?
If morrisjs is a frontend javascript library then install it via npm or bower.
Packages installed via composer should have all their public assets in Resources/public so you can publish them using:
$ php bin/console assets:install target [--symlink]
Then in a twig template use just:
<link href="{{ asset('bundles/acmedemo/css/contact.css') }}" rel="stylesheet" />
After installing new packages, run:
php app/console assets:install web
'web' being your server's document root(public_html or whatever it is).
You also need to dump your assets:
//for dev
php app/console assetic:dump
//for prod
php app/console assetic:dump --env=prod --no-debug
In your servers public root, you will have directory /bundles/ where all your files will be present, and you can easily include them in Twig with {{ asset('bundles/morri..) }}
Read up on combining assets, something you will need at some point.
I've added
"twbs/bootstrap" : "3.3.5",
"components/jquery" : "2.1.4"
to my composer.json file.
I've run composer:update with no problems.
However now it's time to use assetic to create the files and composer used symlinks to install the components and twbs folders.
In the ::base.html.twig I would write something like the following...
{% block stylesheets %}
{% stylesheets filter = 'cssrewrite'
'%kernel.root_dir%/../vendor/twbs/bootstrap/dist/css/boostrap.css'
'%kernel.root_dir%/../vendor/twbs/bootstrap/dist/css/bootsrtap-theme.css'
'#AppBundle/Resources/public/css/custom.css'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
however the path for the rewrite is not correct because of the symlink installed by composer...
My question: Where did the files actually go?
Or is there another syntax to get at the files in twig?
I guess I need this... '%kerner.root_dir%/path/to/the/files'
every thing that you install through composer json goes to vendor folder (outside web folder)
you should check under web/bundles/ folder if you are in a linux or osx OS, if you are under windows, i don't think you'll have symlinks (so probably it's a hard copy each time you make a composer update). anyway. i think you should never use %kernel.root_dir% on twig.
in my case one of the bundles i'm using are symlinked under web/bundles to the real folder. as example guzzle :
lrwxrwxrwx 1 odin odin 88 ago 9 13:47 guzzle -> ../../vendor/eightpoints/guzzle-bundle/EightPoints/Bundle/GuzzleBundle/Resources/public/
so probably the path you should be using is:
bundles/twbs/bootstrap/css/boostrap.css
bundles/twbs/bootstrap/css/boostrap-theme.css
bundles/yourbundle/css/custom.css
and instead of using the public folder of app, at least in the documentation recomends adding css, js, and img folder inside web (if you are using them in more than one bundle)
I think you just need to do a php app/console assetic:dump in the terminal to dump the required assets into your web folder where they'll be publicly accessible to reference in your code.
I have the code below (it's in my twig file) to attach a javascript file specific to this template.
<script type="text/javascript" src="{{ asset("bundles/myappmybundle/js/jobs.js") }}"></script>
It is working fine EXCEPT the fact even if I made changes to the javascript file, somehow my browser (firefox with firebug) is still loading a previous version.
I've tried:
clearing cache via php app/console
rm -rf app/cache/*
Any ideas on how to fix this?
Thanks a lot
It might be in two cases:
Your browser cached this js for you. Try to clear cache of your browser
You installed assets once with hard-copy option (by default). And after you changed files you didn't update your assets with php app/console assets:install.
To make your assets always synced with your bundle's code you can just run in CLI:
php app/console assets:install --symlink
It will create symlink to src/YourBundle/Resources/public folder in the /web/bundles/
I have created a symfomy application bundle that can be used to collect crash reports from Android applications (for those interested in Android and ACRA: https://github.com/marvinlabs/acra-server).
People who are ok with that can simply install that application as a regular Symfony 2 bundle, by getting it from GitHub and doing all the command line stuff that is needed BUT I want people to be able to install that application very simply and without:
any knowledge of symfony
requiring access to php composer
requiring to type any php command line
To do that, I have packaged a zip file containing the whole Symfony code + my bundle. Problem: it seems that the CSS and Javascripts are not properly found, I still need to run a command on the server:
php app/console assetic:dump --env=prod --no-debug
Question 1: How could I get rid of that last step?
Question 2: Overall, what would you add to my process before making the zip file?
Before making that zip file, here is what I do:
Remove all git folders
Remove my app/config/parameters.yml file (specific to my dev environment)
I also execute the following commands:
php app/console cache:clear --env=dev
php app/console cache:clear --env=prod
php app/console doctrine:schema:create --env=dev --dump-sql > create-schema.sql
php app/console doctrine:schema:update --env=dev --dump-sql > update-schema.sql
php app/console assets:install --env=prod --no-debug
php app/console assetic:dump --env=prod --no-debug
PS:
Demo is there: http://acra-server-demo.marvinlabs.com/dashboard
Zip file is there: http://www.vincentprat.info/tmp/acra-server-1.0.0.zip (17MB)
Instructions to install for those who want to try troubleshooting it:
Download http://www.vincentprat.info/tmp/acra-server-1.0.0.zip
Upload the zip content on your server
Give permissions 777 to directories app/logs and app/cache
Create file app/config/parameters.yml from sample file app/config/parameters.yml.dist
Create DB tables with help from the file create-schema.sql
Make your (sub-)domain point to the directory acra-server/web
Access the home page: http://www.example.com/dashboard
Edit 12/06/2013
Listing of files and permissions right after unzip
~/acra-server/web$ ls -l css
total 10
-rw-r--r--+ 1 vincentp users 8990 May 23 18:26 d82d504.css
~/acra-server/web$ ls -l js
total 103
-rw-r--r--+ 1 vincentp users 104721 May 23 18:26 7cb568e.js
Listing of files and permissions after the assetic dump command
:~/acra-server$ ls -l web/js
total 281
-rw-r--r--+ 1 vincentp users 205123 May 28 21:48 7cb568e.js
-rw-r--r--+ 1 vincentp users 21767 May 28 21:48 b96fe74.js
We can see that another JS file has been generated (same goes with CSS). I guess Assetic is not looking for the right files out of the unzip. Any idea on how to correct that? Maybe force assetic to use a given filename?
Dumping to a given filename
( assetic's output option )
You are able to configure your asset collection's to dump to a given filename. This can be achieved inside twig with the output option. No more auto-generated filenames like 7cb568e.js.
example:
{% stylesheets
'bundles/mlabsacraserver/stylesheets/*'
filter='cssrewrite'
output='css/stylesheets.css'
%}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}
... or javascripts ...
{% javascripts
'bundles/mlabsacraserver/js/jquery.min.js'
'bundles/mlabsacraserver/js/*'
output='js/javascripts.js'
%}
<script src="{{ asset_url }}" type="text/javascript"></script>
{% endjavascripts %}
Now assetic will dump your assets to js/javascripts.js and css/stylesheets.css using the given filters.
The base path where assetic will dump these assets can be configured in your config.yml with assetic.write_to and defaults.to the web/ folder.
pre-configured asset-collections
you can do even better and keep your code more structured.
You can define asset collections inside your config.yml ( or another imported config file ).
The configuration can be found under assetic.assets
example:
# app/config.yml
assetic:
# ...
assets:
js_main:
inputs:
- "bundles/mlabsacraserver/js/jquery.min.js"
- "bundles/mlabsacraserver/js/*"
output: js/javascripts.js
css_main:
inputs:
- "bundles/mlabsacraserver/stylesheets/*"
filters:
- cssrewrite # ...add more if you like
output: css/stylesheets.css
Now you can use these collections inside your twig templates using assetic's asset() function and the #-syntax with the corresponding collection names.
example:
<link href="{{ asset('#css_main') }}" type="text/css" rel="stylesheet" />
... and ...
<script src="{{ asset('#js_main') }}" type="text/javascript"></script>
This way you can configure where assetic shall look for your assets , change the names with a single configuration parameter and keep this logic outside of your templates, making them more readable and easier to maintain.
example resulting output:
<link href="/web/css/stylesheets.css" type="text/css" rel="stylesheet" />
<script src="/web/js/javascripts.js" type="text/javascript"></script>
You now have a single configuration point in your application where you add and remove assets using collections and then just use their reference name in your templates.
further improvements for the deployment
You can have your users enter their MySQL host, user and password and let symfony write the parameters file for you.
This is what the symfony standard-edition does using SensioDistributionBundle when you first access your application .
The class performing the actual writing of the parameters.yml is Sensio\DistributionBundle\Configurator\Configurator.
use Sensio\DistributionBundle\Configurator\Configurator;
Now use the configurator in your Installation Controller.
$configurator = new Configurator($this->get('kernel')->getRootDir());
$configurator->mergeParameters(array(
'my_parameter' = 'my_value',
'my_parameter2' = 'my_value2',
));
$configurator->write();
}
The best thing will be looking at the Configurator class itself to understand how it works.
can i haz bounty now? ;-)
If it not critical to you, its possible do not use assetic at all and not combine all assetic files into one. You lose all features like minify, combining and others. Instead you no longer need to run php app/console assetic:dump --env=prod --no-debug.
To do that - run php app/console assets:install web. It copy all your assets to web/bundles folder. Then in base.html.twig template you can include your assets manually.
{% block stylesheets %}
<link href="{{ asset('bundles/mlabsacraserverbundle/stylesheets/style.css') }}" rel="stylesheet" media="screen">
...
{% endblock %}
{% block javascripts %}
<script src="{{ asset('bundles/mlabsacraserverbundle/js/jquery.min.js')}}"></script>
...
{% endblock %}
This is simlpest way to solve your problem.
Other way is to call command from php code like described in documentation here and live example here. You can make an install page, where run this command and install assets.
What is the html saying? are your asset paths generated correctly ?
And I see a:
"php app/console assets:install --env=prod --no-debug"
so actually the css should be there.
Maybe you try the command with your web dir.
wich copies over the css from your Resources/Public folder to your web/bundlename/...
"php app/console assets:install web"
or is it just the same ?
sorry but (again I'll talk about having to execute command lines) how having to type 7 commands (downaload/wget, unzip, chmod, cp, sql, config) is simpler than making
composer create-project marvinlabs/acra-server --prefer-dist acra-server
If you add some post install scripts, you could even auto configure web server / ...
For example, the step of parametere.yml is already handled by a composer script in symfony-standard (https://github.com/Incenteev/ParameterHandler).
I would strongly suggest to not use a zip file, but if you want so, here are links to fix your problem of assetic:
use a static/fixed output name
distribute prod assets
By default, assetic always generate unique file names, so every dump is another file name.