I have a problem to reference my css files in directory
src\FirstLast\Bundle\AppBundle\Resources\public\css
using assetic command?
I should use something like:
{% stylesheets 'bundles/firstlastapp/css/*' filter="cssrewrite" %}
<link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
{% endstylesheets %}
but this doesn't work.
That one works, but as expected cssrewrite fails:
#FirstLastAppBundle/Resources/public/css/*
Any cues?
A solution given by VisioN:
php app/console assets:install web --symlink should do the job.
but this doesn't work
What happens exactly ?
Assuming you're in prod mode, you should launch the command php app/console assetic:dump --env=prod. It will export your different files once and for all and not each time the page is rendered like in dev mode.
Related
As said in the title my js / css / images in assetic doesn't generate in prod
i've put them all in the base.html.twig like this
{% block stylesheets %}
{% stylesheets
'#BlubirdCrmBundle/Resources/public/css/bootstrap.min.css'
'#BlubirdCrmBundle/Resources/public/css/bootstrap-theme.min.css'
'#BlubirdCrmBundle/Resources/public/css/bbgrid.css'
....
output='css/compiled/all.css' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
{% javascripts
'#BlubirdCrmBundle/Resources/public/js/jquery-2.1.3.min.js'
'#BlubirdCrmBundle/Resources/public/js/bootstrap.min.js'
....
output='js/compiled/all.js' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
and my images :
{% image '#BlubirdCrmBundle/Resources/public/images/loadingSpinner.gif' %}<img id="spinner" src="{{ asset_url }}"/>{% endimage %}
everything works fine in dev
ut in prod it doesn't generate the new js and images that i've added over the time.
In my app my kernel is generated like this :
$kernel = new AppKernel('prod', false);
And before anyone tells me to
./console cache:clear --env=prod --no-debug
./console assetic:dump --env=prod --no-debug
I can't access console with my ovh server so i have to manually connect on server and delete the files in cache
i tried to delete the old compiled files in the /web file but nothing is generated ...
any idea on how to do it without console ?
Thank you !
You will need to find a way to execute this:
./console assetic:dump --env=prod --no-debug
In dev mode, assetic links to assets through a controller. Controller finds the right asset, builds it if necessary and delivers to the browser. That is why it works in dev mode.
In prod mode this approach would be too slow, so assetic needs to generate the files upfront, so they can be served statically. That is why you need to find a way to execute that command.
If there is no way to run console commands on the server, there is a possibility to generate production assets on a dev server, add the files to source control and then deploy them with the rest of the code.
A little bit off topic, but assetic is in general being replaced in favor of more popular and framework independent front end tools such as gulp. Assetic is no longer bundled with symfony 3 by default. Even though a few months back it was described as "best practice" in symfony docs.
As far as I know, the command php app/console assetic:dump should take everything from app/Resources/public, process it if necessary (say Sass file -> CSS file), and dump it into the web/ folder. When I run the command, my javascript files and css files get transferred correctly, however, my images do not. They do not get transferred to web/ at all. How can I get the images to transfer from my non-public directory to the public one on assetic:dump?
My file structure:
+-symfony/
+-app/
+-Resources/
+-public/
+-css/
//All of my CSS files
+-javascripts/
//All of my JS files
+-images/
//All of my image assets
My layout file looks like so:
{% stylesheets
'css/bootstrap_loader.css.scss'
'css/bootstrapValidator.min.css'
'css/style.css.scss'
'css/learners.css'
'css/stately/*'
filter='cssrewrite'
%}
<link rel="stylesheet" href="{{ asset_url }}">
{% endstylesheets %}
{% javascripts
'js/jquery-1.11.2.min.js'
'#bootstrap_js'
'js/landing_page.js'
'js/homepage_video.js'
'//use.typekit.net/rah2apm.js'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
You are wrong. Assetic is not the same as assets.
Assetic is a library that can compile your JS or CSS with some filters.
Assets is your resources.
Try to run:
php app/console assets:install --symlink
It will create symlink folder inside web/ directory that will point to your bundle's Resources/public folder.
If you omit --symlink option it will hard copy all your assets once and you will need to run this command every time you changed your assets.
I have two CSS files in the same folder, with identical access rights. When testing in the same Twig file, one CSS file generates a URL to the file and loads perfectly and one gives an error.
Error
An exception has been thrown during the rendering of a template
("Unable to generate a URL for the named route "_assetic_a328b4c_0" as
such route does not exist.") in #GutensiteStream/Stream35163.html.twig
at line 19.
Files on Server
ls -al /var/www/core/cms/src/Templates/GutensiteAdminBundle/Resources/public/css
-rw-rw-r-- 1 chadwick developer 17K Feb 7 14:00 dashboard.css
-rw-rw-r-- 1 chadwick developer 49K Feb 6 16:00 site.css
Template with CSS that Loads
{% stylesheets '#TemplatesGutensiteAdminBundle/Resources/public/css/site.css' %}
<link rel="stylesheet" href="{{ asset_url }}">
{% endstylesheets %}
Template with CSS that does NOT Load
{% stylesheets '#TemplatesGutensiteAdminBundle/Resources/public/css/dashboard.css' %}
<link rel="stylesheet" href="{{ asset_url }}">
{% endstylesheets %}
Linking to the File Directly Works
<link rel="stylesheet" href="/gutensite/v/2/0/bundles/templatesgutensiteadmin/css/dashboard.css">
Steps Taken
I have already cleared cache multiple times, via app/console cache:clear and via rm -rf app/cache/*. I use php app/console assets:install --symlink /var/www/core/web/gutensite/v/2/0/ to symlink the public files to the bundles, and of course they are accessible (as demonstrated via the direct link).
My Config.yml
assetic:
#don't use dynamic links to assets, use full production paths
use_controller: false
When I ran into this error, the solution was quite simple:
When in doubt:
bin/console cache:clear
Assetic is looked for a cached version which doesn't exist. This could be for any number of reasons, but cache:clear seems like it should be the first stop.
It is not recommended to use the # helper and load css directly from your bundle in production.
The best practice approach is to store the css files in the app/Resources directory and using assets:install requesting them from the web root, but seing as you don't have an AppBundle, the second best thing would be to request them from the web/bundles directory:
{% stylesheets
'bundles/templategutenstideadmin/css/site.css'
'bundles/templategutenstideadmin/css/dashboard.css'
%}
<link rel="stylesheet" href="{{ asset_url }}">
{% endstylesheets %}
Make sure you run assets:install beforehand.
This way, your css files will be compressed to one file and they will be loaded with the latest changes from the assets:install command.
Loading css files directly from your bundle using # is not recommended outside of local testing. I suspect your first issue is the usage of muliple stylesheets tags in assetic (stylesheets tag is not a part of Twig), but generally using # for file linking is not a good idea for assets. Use it for things like routing and config in .yml files, but not for assets! :)
One instance where this error will occur is when you try to load such an asset in a child template, that is already being loaded in one of the parent templates.
To fix it, load the asset only once in a template chain.
(Have to post this as answer, as I can't comment, yet.)
config.yml
assetic:
bundles: [you bundle name , otherbundlename] #add this
I put all my assets in my Bundles
e.g. myBundle/Resources/public/css/
and load them in like so:
{% block stylesheets %}
{{ parent() }}
{% stylesheets
'#myBundle/Resources/public/vendor/bootstrap.css'
filter='cssrewrite'
%}
<link href="{{ asset_url }}" rel="stylesheet" media="screen" />
{% endstylesheets %}
{% endblock %}
So everytime I make an adjustment to my css or js, I need to do a assets:install and then an assetic:dump afterwards to see it in the frontend.
Is there any way to watch the assets in the bundle itself?
You can use symlink option to assets:install command. This will make symlink in web folder to your bundle public folders
app/console assets:install --symlink
Without symlink option this task makes copy of files, so your changes doesn't affect.
You might also want to check watch option to assetic:dump command
app/console assetic:dump --watch
How can you specify an additional (alternate) location for assets:install or assetic:dump to look in, e.g.
`php app/console assets:install --symlink`
By default this scans and creates symlinks for all bundles with a Resources/public directory.
But I would like to use an alternative directory structure that adds 2 extra levels, e.g.
/Gutensite/TemplateBundle/Templates/Admin/Resources/public
/Gutensite/TemplateBundle/Templates/Lunar/Resources/public
/Gutensite/TemplateBundle/Templates/Solar/Resources/public
Using this structure, assetic:dump and assets:install doesn't find the files. And therefore I can't load them like this:
{% stylesheets '#GutensiteTemplateBundle/Templates/Admin/Resources/public/css/site.css' %}
<link rel="stylesheet" href="{{ asset_url }}">
{% endstylesheets %}
NOTE: most of my bundles follow the standard format, but this template bundle will contain a directory for every template so the public resource directory is 2 levels deeper. I also need to be able to install assets in client specific directories outside of the symfony root, but that may just need to happen manually. However, I need to be able to link to them.
Have you registered your bundle in AppKernel.php ?
Alternatively, if you don't have a bundle class in your bundle, you can use this notation in your twig template:
{% stylesheets '%kernel.root_dir%/../src/Gutensite/TemplateBundle/Templates/Admin/Resources/public/css/site.css' %}
<link rel="stylesheet" href="{{ asset_url }}">
{% endstylesheets %}