On my localhost I was able to set up my app.php environment successfully. I was able to dump the assets php app/console assetic:dump --env=prod --no-debug. However in a linux server I always get an error.
Unable to load asset from URL "https://rawgit.com/kswedberg/jquery-smooth-scroll/master/jquery.smooth-scroll.js"
I alrready tried to clear my cache with rm -rf * and all the permissions ar working.. I did everything exacly like I did in my local.. But I just can dump assets..
What is the problem? Why cant he load this asset..
UPDATE
So I created a js file and added the content in it. Placed it in resources/public/js folder.
I clear cache with rm -rf *
Then I did assets:install. This added my new file to web/bundles/mpshop/js/ folder.
Now when I try do dump assets I get:
The source file "/web/live/app/../web/bundles/mpshop/js/jquery.smooth-scroll.js" does not exist.
But when i go to web/bundles/mpshop/js/ I can clearly see that the file is in there...
My base.html.twig:
{% block javascripts %}
{% javascripts
'bundles/mpshop/js/jquery-1.11.3.min.js'
'bundles/mpshop/js/jquery-ui.js'
'bundles/mpshop/js/migrate.js'
'bundles/mpshop/js/bootstrap.min.js'
'bundles/mpshop/js/bootstrap-select.js'
'bundles/mpshop/js/search.js'
'bundles/mpshop/js/ckeditor.js'
'bundles/mpshop/js/jquery.lightbox-0.5.js'
'bundles/mpshop/js/lightbox.js'
'bundles/mpshop/slick/slick.js'
'bundles/mpshop/js/custom.js'
'bundles/mpshop/js/scroll-to-top.js'
'bundles/mpshop/js/jquery.smooth-scroll.js'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
Avoid to use external URL scripts.
Can you reach rawgit.com from your production server ?
If not, stores the javascript on your server and changes the path of the script in your TWIG template.
Related
I am new to a Symfony 2 project that contains an SCSS file in the Resources folder: myproject.scss
In the head of the HTML files, the css version of this file gets included:
#MyBundle/Resources/public/css/myproject.css
PHP Storm indicates "Missing asset". The HTML cannot be rendered, Symfony2 says that the asset is missing.
I have never worked with SCSS. How do I achieve that on file change of my scss file the css file gets created/updated and Symfony2 no longer indicates a missing asset for my css path in my HTML file?
What I have done so far in order to solve this problem:
I installed SASS and Compass via the Ruby gem manager.
In PHPStorm, I configured a file watcher "SCSS", referencing to C:\Ruby\bin\scss.bat
After installing SCSS compiler and setting the right path in File Watcher settings your css will be generated every time you change your .scss file. This .css file is located by default near original .scss and so to copy it into the web directory you need manually copy it every time or configure your file watcher to do it for you instead.
Also you can configure scssphp assetic filter to do it instead of PhpStorm. It will generate new css file every time you run php app/console assetic:dump command or every time asset is loaded via assetic controller.
To work with Assetic you need next code:
{% stylesheets filter="scssphp" output="css/myproject.css"
#MyBundle/Resources/myproject.scss
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
I have got a myRandomJavascriptLibrary.js file. I want to put this file in location app/Resources/public/js/
But I do not know how can I access to this file in app/Resources/views/base.html.twig
I ran command app/console assets:install web --symlink
What is next?
There is no need to add you global assets in app/Resources. They should go directly into the web folder. Command assets:install is only for bundles resources.
I think you can do, using assetic :
{% javascripts '../app/Resources/public/js/myRandom.js' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
I'm trying to setting up a site I'm working on at shared hosting and all works fine but FontAwesome icons since Symfony does not find them where they should be. I follow this steps to move the site to production shared hosting:
Publish assets as hard copy since SH doesn't allow symlink so I run this command assets:install
Publish assets handled by Assetic by running this commands: assetic:dump (dev) and assetic:dump --env=prod (prod)
But it's not working since I'm getting this errors at Firebug all the time:
"NetworkError: 404 Not Found - http://tanane.com/bundles/backend/img/mybg.png"
"NetworkError: 404 Not Found - http://tanane.com/bundles/backend/fonts/fontawesome-webfont.woff?v=4.1.0"
"NetworkError: 404 Not Found - http://tanane.com/bundles/backend/fonts/fontawesome-webfont.ttf?v=4.1.0"
At localhost, following the same steps things works fine so I don't know if is a permission problem or another problem.
This is how I define the assets at base.html.twig:
{% block stylesheets %}
{% stylesheets
'bundles/template/css/bootstrap.min.css'
'bundles/template/css/bootstrap-theme.min.css'
'bundles/template/css/font-awesome.min.css'
'bundles/template/css/select2.css'
'bundles/template/css/select2-bootstrap.css'
'bundles/template/css/bootstrapValidator.min.css'
'bundles/template/css/datepicker.css'
'bundles/template/css/datepicker3.css'
'bundles/template/css/tanane.css'
filter='cssrewrite'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
I did a research and found a lot of topics around this problem as for example this one also I found this interesting one but have my doubts around the second one.
Can any give me a help on this? I'm stucked
Installed SpBowerBundle + FkrCssURLRewriteBundle
I have installed and configured both bundles but even after that I'm still having problems with images in this case, just in Select2 library.
This is the bower.json file content:
{
"name": "TemplateBundle",
"dependencies": {
"bootstrap": "latest",
"bootstrap-datepicker": "latest",
"bootstrap-growl": "latest",
"bootstrapvalidator": "latest",
"jquery": "1.11.*",
"jquery-migrate": "latest",
"pwstrength-bootstrap": "latest",
"select2": "latest",
"font-awesome": "latest"
}
}
And this are the lines I've added to /app/config/config.yml
#FkrCssURLRewriteBundle
fkr_css_url_rewrite:
rewrite_only_if_file_exists: true
clear_urls: true
# SpBowerBundle
sp_bower:
install_on_warmup: true
allow_root: true
assetic:
enabled: true
nest_dependencies: false
filters:
packages:
bootstrap:
css:
- css_url_rewrite
font_awesome:
css:
- css_url_rewrite
bundles:
TemplateBundle: ~
This is the error I'm getting now:
"NetworkError: 404 Not Found - http://tanane.dev/select2.png"
"NetworkError: 404 Not Found - http://tanane.dev/select2-spinner.gif"
Why?
Disabled Assetic in SpBowerBundle
I've disabled assetic in SpBowerBundle at /app/config/config.yml:
# SpBowerBundle
sp_bower:
install_on_warmup: true
allow_root: true
bundles:
TemplateBundle: ~
Since I'm using assetic and also SpBowerBundle to handle libraries dependencies then I rewrite the CSS/JS blocks at base.html.twig as follow:
{% stylesheets
'bundles/template/components/bootstrap/dist/css/bootstrap.min.css'
'bundles/template/components/bootstrap/dist/css/bootstrap-theme.min.css'
'bundles/template/components/font-awesome/css/font-awesome.min.css'
'bundles/template/components/select2/select2.css'
'bundles/template/css/select2-bootstrap.css'
'bundles/template/components/bootstrapvalidator/dist/css/bootstrapValidator.min.css'
'bundles/template/components/bootstrap-datepicker/css/datepicker.css'
'bundles/template/components/bootstrap-datepicker/css/datepicker3.css'
'bundles/template/css/tanane.css'
filter='css_url_rewrite'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
Then I clear the cache and run the commands assets:install --symlink, assetic:dump and assetic:dump --env=prod and still not seeing images and also FontAwesome fonts:
Failed to load resource: the server responded with a status of 404 (Not Found) http://tanane.dev/app_dev.php/css/select2.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://tanane.dev/app_dev.php/css/select2-spinner.gif
Failed to load resource: the server responded with a status of 404 (Not Found) http://tanane.dev/app_dev.php/css/select2.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://tanane.dev/app_dev.php/fonts/fontawesome-webfont.woff?v=4.2.0
Failed to load resource: the server responded with a status of 404 (Not Found) http://tanane.dev/app_dev.php/fonts/fontawesome-webfont.ttf?v=4.2.0
Failed to load resource: the server responded with a status of 404 (Not Found) http://tanane.dev/app_dev.php/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular
I miss something else? What else I can do it in order to fix this annoying issue?
Fixing the disable way
I fixed some mistakes I made in SpBowerBundle configuration and now I have this:
sp_bower:
install_on_warmup: true
allow_root: true
assetic:
enabled: false
nest_dependencies: false
bundles:
TemplateBundle: ~
But images, managed by SpBowerBundle still not showing, see the attached image:
I have assetic enabled in my config.yml:
assetic:
debug: "%kernel.debug%"
use_controller: false
bundles:
- FrontendBundle
- BackendBundle
- ProductBundle
- CommonBundle
- UserBundle
- TemplateBundle
Should I disable it and remove all those bundles from there?
Another test
Following #lenybenard suggestions I did this:
{% block stylesheets %}
{% stylesheets filter='css_url_rewrite'
'bundles/template/components/font-awesome/css/font-awesome.min.css'
'bundles/template/components/bootstrap/dist/css/bootstrap.min.css'
'bundles/template/components/bootstrap/dist/css/bootstrap-theme.min.css'
filter='cssrewrite'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% stylesheets
'bundles/template/components/select2/select2.css'
'bundles/template/css/select2-bootstrap.css'
'bundles/template/components/bootstrapvalidator/dist/css/bootstrapValidator.min.css'
'bundles/template/components/bootstrap-datepicker/css/datepicker.css'
'bundles/template/components/bootstrap-datepicker/css/datepicker3.css'
'bundles/template/css/tanane.css'
filter='cssrewrite'
filter='css_url_rewrite'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
Repeat the same process once again:
Clear cache cache:clear & cache:warmup and also rm -rf /var/cache & rm -rf /var/logs just in case
From Symofony2 shell: assets:install --symlink & assetic:dump & assetic:dump --env=prod
Result: in DEV all is fine, in PROD all is wrong
This is the result of a rather unfortunate bug in assetic. See this github description for further details.
The solution I have settled on is to use https://github.com/fkrauthan/FkrCssURLRewriteBundle
It is the only approach of the many I have tried that works in every case.
i got same problem, and this is worked
i use https://github.com/fkrauthan/FkrCssURLRewriteBundle and then
in #app/config/config.yml add this
font-awesome-otf:
inputs: '%kernel.root_dir%/../vendor/fortawesome/font-awesome/fonts/FontAwesome.otf'
output: 'fonts/FontAwesome.otf'
font-awesome-eot:
inputs: '%kernel.root_dir%/../vendor/fortawesome/font-awesome/fonts/fontawesome-webfont.eot'
output: 'fonts/fontawesome-webfont.eot'
font-awesome-svg:
inputs: '%kernel.root_dir%/../vendor/fortawesome/font-awesome/fonts/fontawesome-webfont.svg'
output: 'fonts/fontawesome-webfont.svg'
font-awesome-ttf:
inputs: '%kernel.root_dir%/../vendor/fortawesome/font-awesome/fonts/fontawesome-webfont.ttf'
output: 'fonts/fontawesome-webfont.ttf'
font-awesome-woff:
inputs: '%kernel.root_dir%/../vendor/fortawesome/font-awesome/fonts/fontawesome-webfont.woff'
output: 'fonts/fontawesome-webfont.woff'
I Would like thanks to : http://www.maraumax.fr
Actually, this is quite logical, in dev environment, it works because assetic creates as many file there is resources.
But when you're in production mode, each assetic block compiles all your resources in one single file by concatenating all your resource files.
The problem is that in css, an #import must be in the top of the file... and here, in prod, your font-awesome import is inside a file and is not read by your browser.
To fix your problem, you could do this :
Import first the stylesheet using #import :
{% stylesheets filter='css_url_rewrite'
'bundles/template/components/font-awesome/css/font-awesome.min.css'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
Then, import the rest
{% stylesheets
'bundles/template/components/bootstrap/dist/css/bootstrap.min.css'
'bundles/template/components/bootstrap/dist/css/bootstrap-theme.min.css'
'bundles/template/components/select2/select2.css'
'bundles/template/css/select2-bootstrap.css'
'bundles/template/components/bootstrapvalidator/dist/css/bootstrapValidator.min.css'
'bundles/template/components/bootstrap-datepicker/css/datepicker.css'
'bundles/template/components/bootstrap-datepicker/css/datepicker3.css'
'bundles/template/css/tanane.css'
filter='css_url_rewrite'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
I've been dealing with this for a while and came up with a new solution. Improving #lenybernard's answer a little bit, here is my solution:
Since the #import is not located in the font-awesome-min.css file, it didn't work for my case. I was using a theme and found out that the style sheet related to the theme had the import annotation. Also, the theme was requiring Bootstrap to be loaded before its own CSS file, so moving the theme.css file to top of the list, or separating it as mentioned in the previous answer broke the theme completely. So, an ultimate solution for this is to find the line with the #import tag and put it in the first line of the first file in your assetic list, and remove it from the file it is referred. For example:
'bundles/foo/bootstrap.css'
'bundles/foo/custom_theme.css' <- if your #import is here
'bundles/foo/font-awesome.css'
...
'bundles/foo/bootstrap.css' <- put it here
'bundles/foo/custom_theme.css' <- and remove it from this one
'bundles/foo/font-awesome.css'
Another solution is to create a new CSS file and name it however you want, put your #import line on this file, and put this file on top of the list. For example:
'bundles/foo/font-awesome-fix.css' <- put #import here
'bundles/foo/bootstrap.css'
'bundles/foo/custom_theme.css' <- and remove it from this one
'bundles/foo/font-awesome.css'
I had a similar problem while trying to use fonts with an Ez Publish setup. The fonts were correctly located in the web/font/ directory and the .less was correctly compiled to point to that directory. Yet, I was getting 404 errors while trying to pull the font files.
The problem turned out to be an incorrectly configured virtual host. The config file had this line:
RewriteRule ^/(css|js)/.*\.(css|js) - [L]
Which effectively states 'serve any file from the css or js folder as long as the extension is .js or .css'. I had to modify it to
RewriteRule ^/(css|js|font)/.*\.w* - [L]
to allow for the font folder and any extension. Without this Symfony and Ez Publish were trying to route the url to a dynamic content.
I have followed these instructions in order to enable both UglifyJs2 and UglifyCss on my development environment (to start with... can't risk taking down the production server with this problem!)
Under my config_dev.yml I have configured the following (I've started with just the bin parameters but added extra configurations just in case something else was causing a problem.)
assetic:
use_controller: %use_assetic_controller%
filters:
uglifycss:
bin: "%kernel.root_dir%/Resources/node_modules/.bin/uglifycss"
node: /usr/local/bin/node
apply_to: '\.css$'
uglifyjs2:
bin: "%kernel.root_dir%/Resources/node_modules/.bin/uglifyjs"
node: /usr/local/bin/node
apply_to: '\.js$'
and in my base.html.twig file:
{% javascripts 'bundles/fosjsrouting/js/router.js'
'bundles/legalcheck/js/angular.min.js'
'bundles/legalcheck/js/plugins/*'
'bundles/legalcheck/js/app.js'
'bundles/legalcheck/js/controllers/*'
filter='uglifyjs2'
%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
and
{% stylesheets 'bundles/legalcheck/css/*' filter='cssrewrite' filter='uglifycss' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
When I run php app/console assetic:dump --env=prod --verbose, all files are generated with no errors. They're even minified at this point!
However, when I load the app in the browser, all of the CSS and JS assets return a 500 error.
Here's what each Javascript file returns, along with what each CSS file returns. I am getting a signal "5" error from what seems like both UglifyJS and/or UglifyCSS, or Node itself. I suspect the wrong thing is being sent somewhere.
Any ideas? I'm running a local MAMP server to achieve a development environment. Also note I've taken the space out of "Git Repos" in my path to avoid obvious problems like path issues as a troubleshooting step.
Update
I tried running the same settings in config_dev.yml into my config_prod.yml and found that everything works perfectly on the production side. It seems that trying to load the minified assets through app_dev.php causes problems... but I still don't know what! It would be nice if minification could be tested through the dev environment, which is why I'm leaving the question open for both this problem and to encourage dialogue for a solution.
assetic's debug mode :)
you're dumping the files with --prod ( which has debug mode disabled by default) ...
... and try to access them in the dev environment afterwards.
If debug mode is enabled asset collections will be split into multiple files that look like this:
<hash>_partX_<filename>.js
This is what chrome devtools shows you and a problem while dumping on-the-fly leads to the 500 errors.
You didn't dump these files for debugging with the command you invoked and (as long as you don't have use_controller: true) they won't be dumped on the fly either.
If you have use_controller: true ... any non-zero exit code of a filter-run will result in a 500 error. That's what you experience.
solution:
Either disable debug mode for a single asset collection like this ...
{% javascripts '...'
filter='uglifyjs2'
debug=false
%}
... or add ...
assetic:
debug: false
to your config_dev.yml to resolve the issue.
Finally dump your assets with app/console assetic:dump and the correct environment flag.
OLD QUESTION, SEE BELOW FOR THE UPDATED VERSION
My development environment is not the fastest. I takes roughly 500ms per PHP request. It's starting to become a problem with Symfony2 resource files because each of the resource files are being requested via Symfony's internal controllers:
http://localhost/myproj/app_dev.php/js/bb8690a_part_4_myJavaScriptFile_2.js
As can be seen, the files are loaded via the Symfony framework and not directly. Since I'm starting to have over 20 files to load, multiplying that with the 500ms makes page loads very slow. I want to load the files directly, but I am not sure how to do that.
This is part of the config.yml:
# Assetic Configuration
assetic:
debug: %kernel.debug%
use_controller: false
# java: /usr/bin/java
filters:
cssrewrite: ~
I thought setting use_controller to false would do it, but nope.
Is there a way to handle the loading of those resoures directly?
UPDATE:
This is the URL it tries to use now:
http://localhost/myproj/_controller/js/bb8690a_part_4_myJavaScriptFile_2.js
I have set use_controller to false for both dev and general configs. How do I get rid of that _controller part of the URL?
Edit: If I clear the cache, run assetic:dump and have use_controller as false, then upon reload I get Cannot load resource ".". I can't get around that problem unless I temporarily enable use_controller for one page load. After that, I disable it and reload and now it requests from that invalid URL that contains _controller.
It also seems to work in prod, but not in dev. Strange.
Template code:
{% stylesheets filter="cssrewrite"
'bundles/outotecofil/css/reset.css'
'bundles/outotecofil/css/*'
output='css/dist/dist.css'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% javascripts
'#OutotecCommonBundle/Resources/public/js/jquery-1.6.2.min.js'
'#OutotecCommonBundle/Resources/public/js/jquery-ui-1.8.16.custom.min.js'
'#OutotecCommonBundle/Resources/public/js/chosen.jquery.min.js'
'#OutotecCommonBundle/Resources/public/js/widget/*'
'#OutotecOFILBundle/Resources/public/js/OFILDependencyManager.js'
'#OutotecOFILBundle/Resources/public/js/widget/*'
'#OutotecOFILBundle/Resources/public/js/plant-scope.js'
output='js/dist/dist.js'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
To be extremely clear: without app_dev.php (i.e. in prod mode), it works. Only in dev it does not and throws this "Cannot load resource "."" error unless I first enable use_controller for one request, after which I can disable it and reload though the URLs will then contain _controller/ in their paths.
Try to remove this part of code in routing_dev.yml when use_controller is false :
_assetic:
resource: .
type: assetic
Symfony documentation is always the first place where to start look: How to Use Assetic for Asset Management
In the prod environment, your JS and CSS files are represented by a single tag each. In other words, instead of seeing each JavaScript file you're including in your source, you'll likely just see something like this:
<script src="/app_dev.php/js/abcd123.js"></script>
Moreover, that file does not actually exist, nor is it dynamically rendered by Symfony (as the asset files are in the dev environment). This is on purpose - letting Symfony generate these files dynamically in a production environment is just too slow.
Instead, each time you use your app in the prod environment (and therefore, each time you deploy), you should run the following task:
php app/console assetic:dump --env=prod --no-debug
This will physically generate and write each file that you need (e.g. /js/abcd123.js). If you update any of your assets, you'll need to run this again to regenerate the file.
If you use assetic:dump, then you have to cache:clear -e dev
"...if you run cache:clear on your production cache, it warms up the cache with debug mode on. If you try to dump assets afterwards, weird things might happen."
i found it here: http://sftuts.com/using-assetic-in-symfony2-for-css-compression (4. paragraph)
From the documentation
Modify the dev config to avoid using the controller.
# app/config/config_dev.yml
assetic:
use_controller: false
Remove the route in routing_dev.yml to avoid side effect
# app/config/routing_dev.yml
_assetic:
resource: .
type: assetic
Automatically dump your css/less files every time you have a modification.
php app/console assetic:dump --watch
I have the same problem, working configuration is:
comment out from routing_dev.yml:
_assetic:
resource: .
type: assetic
set use_controller to false.
After doing this I'm able to use assetic:dump and see working page.