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 %}
Related
Im learning Symfony and trying to set up a boilerplate app in Symfony 4
This Symfony document describes how to include assets in your page, namely using the asset package like so..
<img src="{{ asset('images/logo.png') }}" alt="Symfony!" />
<link href="{{ asset('css/blog.css') }}" rel="stylesheet" />
I have installed this package and trying to link to a css file in my /public directory.
I know Symfony recommends placing assets in an /assets folder at the root, but I would like to avoid this if possible. It makes more sense to me to place assets in the public directory.
My Twig base template is as follows:
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}
<link href="{{ asset('public/css/main.css') }}" rel="stylesheet" />
{% endblock %}
</head>
<body>
{% block body %}{% endblock %}
{% block javascripts %}{% endblock %}
</body>
<footer>footer</footer>
</html>
Problem
When I load the route/page/template, the linked css is rendered as a simple link from the root (as if Im linking it as <link href="public/css/main.css" rel="stylesheet" /> - there is of course no route set for public/* and this returns 404/Not Found.
Its as if the asset() function is not even used.
Ive tried
Restarting my local Symfony server
moving the asset to an assets folder at the root at adjusting the link accordingly
verifying that the asset package was installed (it is)
googling this issue (nothing for Symfony 4)
Questions
How can I let Symfony know that the public/* path is a filesystem path to assets, NOT a URL route, and include my assets successfully?
Is there such a feature to set a default location for assets other than the recommended /assets folder at the root?
Paths in the asset function should be relative to your public directory, not the project root.
So, pretending your server's docroot is public_html, and an asset is in public_html/css/main.css, the asset call would be {{ asset('css/main.css') }}.
Additional note: The asset function doesn't give you the ability to put assets outside the public directory. They must be in the public directory.
Firstly maybe you have to add the asset functionality to Symfony:
composer require symfony/asset
Then you should to use in Twig temlate the relative path to your public directory:
<link href="{{ asset('css/style.css') }}" rel="stylesheet" />
for the public/css/style.css style file.
BTW it is also works for Symfony 5.
Check if webpack is watching files ... (yarn watch) After hours of searching for an answer one of my project team members asked if I had that running ={ Worked immediately after that.
I installed Symfony 3.1.3 and yesterday I lost whole day to figure out why symfony's not loading css files, I'm using Assetic bundle, I followed steps from documentation, I also watched videos on youtube, dumped assets, cleared cache but still nothing..
So, I have this code in base twig:
{% block stylesheets %}
{% stylesheets 'bundles/app/css/*' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
I also tried to specify concrete file path but 404 not found.
any ideas?
Usually, after updating the cache, you will want to install the assets too:
In Symfony 3:
php bin/console assets:install web --symlink
In Symfony 2:
php app/console assets:install web --symlink
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.
For some reason I can't load the css files.
Here is the structure of the bundle that I use
BD
WebsiteBundle
public
css
And here is how I try to load the css files
{% stylesheets 'bundles/bdwebsite/css/*' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
I did assetic:dump
What I'm doing wrong?
You referred to bundles/bdwebsite/css/* in your stylesheets tag.
This way assetic looks for all css files in web/bundles/bdwebsite/css (a folder that currently does not exist) and not in src/BD/WebsiteBundle/public/css.
In order to have your files in the right place before executing assetic:dump...
... use app/console assets:install web which will copy them to the web folder...
... or my recommendation app/console assets:install web --symlink for symlinks.
This is a bit frustrating. According to Symfony best practices, a bundle's web assets (images, css, js) should be placed in src/vendor/path/to/bundle/Resources/public. Running app/console assets:install copies the contents of that public folder to web/bundles/bundlename. In the official documentation, Twig templates are shown to grab these assets with code like:
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="{{ asset('/css/styles.css') }}
{% endblock %}
When I try it, instead of magically grabbing my assets from web/bundles/bundlename/css/styles.css, it instead just goes for web/css/styles.css. Is this expected behavior? The official documentation is less than clear about this.
In order to try to combat this issue, I tried embracing assetic's ability to dynamically serve assets. I tried:
{% stylesheets '#mybundle/Resources/public/css/*' %}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
{% endstylesheets %}
But got the following exception:
An exception has been thrown during the compilation of a template ("You must add mybundle to the assetic.bundle config to use the {% stylesheets %} tag in mybundle:Home:index.html.twig.") in "/home/kevin/www/src/mybundle/Resources/views/Home/index.html.twig
The official Symfony documentation makes it appear that it should work out of the box with no configuration necessary.
So, TLDR:
Am I not understanding how assets should be loaded?
How do I address the assetic exception?
To fix the assetic exception you need to configure your bundle in your config.yml like this:
assetic:
bundles: [ MyAwesomeBundle ]
The {{ asset(...) }} twig function will serve files relative from your web root.
You use app/console assets:install to install static assets within your web root and you can later easily point to them using the asset function like this {{ asset('/mybundle/css/site.css') }}