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.
Related
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 already have all needed js files in web folder, when I use assetic:dump command it produces concatenated file and copies all other files two the same directory. How can I avoid this?
code in twig template:
{% block headerscripts %}
{% javascripts output='assetic/vendors_header.js'
'vendor/jquery-1.10.2.min.js'
'vendor/html5shiv.js'
%}
<script src="{{ asset('assetic/vendors_header.js' ~ assets_version) }}"></script>
{% endjavascripts %}
{% endblock %}
You added in a comment:
in dev environment. when i use "assets_url" i get all script separetly in browser instead o one compiled gifile
That's the expected behaviour in dev environment: files are not concatenated in order to ease debugging.
In the dev environment, each file is still served individually, so that you can debug problems more easily. However, in the prod environment (or more specifically, when the debug flag is false), this will be rendered as a single script tag, which contains the contents of all of the JavaScript files.
Source: Symfony2 official documentation > How to Use Assetic for Asset Management> Combining 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 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.
In Symfony2, what is the difference between assetic:dump and assets:install? In what scenarios should each of these commands be used, and in what order (if order is relevant)?
I actually wrote about this recently in an article about OroCRM, which is based on Symfony 2. If you want some of the context/why of the different commands, you might find it interesting.
There are two different systems for including frontend files (javascript, css, images, etc.) in a Symfony application. The assets:install command came first. This command will search all the Symfony Bundles in an application for a
Resources/public
folder. If found, the assets:install command will copy or symlink files from Resources/public to web/public/bundle/[bundle-name]. This is where links created with the twig assets function will look for these files. This
<script src="{{ asset('js/script.js') }}" type="text/javascript"></script>
Becomes this
<script src="/bundles/[bundle-name]/js/script.js" type="text/javascript"></script>
That's all the assets system does. It lets you store your frontend files with the bundle.
The assetic system is different. With assetic, you link to files like this.
{% javascripts '#AcmeFooBundle/Resources/public/js/foo.js' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
There's similar tags for stylesheets and images. Notice that assetic allows you to link to files in any bundle. (#AcmeFooBundle). Assetic will also let you link to multiple files in a folder with a wildcard.
{% javascripts '#AcmeFooBundle/Resources/public/js/*' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
Another difference with assetic is in the links generated. In the dev environment they'll look something like this.
<script type="text/javascript" src="/app_dev.php/js/foo.js"></script>
<script type="text/javascript" src="/app_dev.php/js/bar.js"></script>
That is, requests for these files will run through the PHP front controller (app_dev.php) via special routes setup in the assetic bundle. This means, when you're in dev mode, you never need to dump you assets. They're included automatically. It also allows you to apply filters to the files. For example, the following applies the cssrewrite filter to the files pulled in.
{% stylesheets 'bundles/acme_foo/css/*' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
If you ever wanted to programmatically alter the output of your frontend assets — assetic lets you do that by writing custom twig filters.
However, this is performance intensive. In production, instead of linking each file individually via a the PHP front controller file, the generated HTML will look like this
<script type="text/javascript" src="/js/as5s31l.js"></script>
Where does as5s31l.js come from? That's what the assetic:dump command does. It combines all the individual javascript/css files (after applying the filters) and creates a nice, static, cacheable file for production.
What You Need to Do
Unless the project specifically tells you otherwise, you should always run assets:install and assetic:dump, because you'll never know which of your third party bundles use these commands. You only need to run assetic:dump before you deploy or view the application in prod mode. Order is irrelevant.
As for which system your bundle should use — if you've read the above and you're unsure what assetic can do for you, use assets. You'll be fine.