I have symfony 4.1 installed via composer and the asset component.
I have a css file at assets/css/dashboard.css and in my templates/base.html.twig I included this:
{% block stylesheets %}
<link href="{{ asset('css/dashboard.css') }}" rel="stylesheet" />
{% endblock %}
I haven't modified anything, but somehow the template is not getting called.
I tried many variations of the path, adding slashes, dots thinking maybe the path is wrong but nothing.
The css file has no issue, I dumped it's contents and pasted it inside my template's <style></style> tags and it works.
I don't know what is going on
For short:
The asset() function points on your public folder.
So in your example, your dashboard.css should be in public/css/dashboard.css than this <link href="{{ asset('css/dashboard.css') }}" rel="stylesheet" /> should work.
The longer explanation:
Usually you will structure your scripts, styles and images in your assets folder. But in production you don´t need good readable css/less/scss/js code and so you want to minify it.
And the minified (uglified) code should be copied to your public folder.
So you want to use Webpack Encore to minify your code and "deploy" it to your projects public folder.
In symfony´s documentation you can find a simple Example how to use Webpack Encore.
Why the assets are going to the public folder?
During the security concept of symfony (and the most other frameworks) the public folder is the only accessible folder. So everything the browser have to read goes there. In case of symfony your styles, scripts, images and so on.
Related
I was given a Laravel project and I manage to download it's configuration and get it started on php artisan serve.
When I open it on localhost:8000 It opens but only the html portion of it.
It seems like css files didn't load for it.
Is there some sort of package we need to install with composer in my environment.
To get the css working.
The public folder looks like this in the laravel project.
backend favicon.ico front images index.html index.php js robots.txt sql vendor
web.config
Laravel provides a helper function, asset(), which generates a URL for your assets. You can use this in blade syntax.
Put your css, js files on public folder. for example of a css file, put it on :
../public/bootstrap/css/bootstrap.min.css
In your blade you can access this file from header like this :
<link href="{{ asset('bootstrap/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" >
hope this help
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'm a web newbie programmer,
I'm trying to learn from home to make my own web.
I have notions of php, html, js and css.
But I've found something that is not how to solve.
I'm trying to use Composer to manage Bootstrap. I installed Composer and I have run this line of code
composer require twbs/bootstrap
that has dropped a folder with files.
I do not understand is how I make html links to find the js and css files, you should do indicating the full path?
vendor / twbs / bootstrap / dist / js / bootstrap.js
Excuse me if the question is stupid but I do not know how I should continue.
Amd excuse my English, I'm learning too but by now I use google translate
You could use a post update command in the composer.json file:
"scripts": {
"post-update-cmd": [
"rm -rf public/bootstrap",
"cp -R vendor/twbs/bootstrap/dist public/bootstrap"
]
}
And then just include the javascript- and css-files like this:
<script type="text/javascript" src="{{ ROOT_URL }}bootstrap/js/bootstrap.min.js"></script>
<link href="{{ ROOT_URL }}bootstrap/css/bootstrap.min.css" rel="stylesheet">
Yes, Composer downloads the dependencies by default into the vendor folder. So Bootstrap will also land in the vendor folder, which is not the correct place to reference it or include it.
composer require twbs/bootstrap ➔ vendor/twbs/bootstrap/dist/js/bootstrap.js
Your next step would be to write a little helper script to copy the Boostrap files you need, into your public/assets folder. You could copy the complete dist folder including sub-folders (vendor\twbs\bootstrap\dist) into public or public\assets.
Please overwrite existing files, e.g. if a file exists remove it, then copy it. This allows to easily update the files, when you need to update the Bootstrap vendor package again.
Of course, you could also just copy the files manually or create a symlink. It depends.
That gives you the following directory structure:
public
\- assets
|- css
|- js
\- fonts
\- index.html
When the Boostrap assets are copied you can start to include them, in your index.html or template (assets\js\bootstrap.min.js, etc.).
Referencing: https://stackoverflow.com/a/34423601/1163786 which shows also other solutions to this problem, e.g. fxp/composer-asset-plugin, bower, grunt.
Unless you need customization inside bootstrap (e.g. building scss), the most simple solution is relying on a CDN (as a bonus, you get super-fast caching of assets)
So, simply call your assets like so:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Composer is a super-excellent tool for backend dependencies, but not the best one for frontend.
If you want to have the files in your server, and you don't want to use npm, grunt or another frontend library manager, you can simply download the files listed in Massimiliano's answer and put them inside your js/css folders:
First download these files (updated to the most recent Bootstrap 3 version):
http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
http://code.jquery.com/jquery-2.2.4.min.js
http://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
And put them in these folders (starting from the root of your project):
public/css/bootstrap.min.css
public/js/jquery-2.2.4.min.js
public/js/bootstrap.min.js
Now, you want to be able to call them in the blade templates for your views. It's simple: just add <link> and <script> tags as normal for any css/js file, adding the following to your blade template:
<link href="{{ url('css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" />
<script src="{{ url('js/jquery-2.2.4.min.js')}}"></script>
<script src="{{ url('js/bootstrap.min.js')}}"></script>
P.s.: if you see the console, it shows something as the following error message:
Source map error: request failed with status 404
Resource URL: http://localhost:8000/css/bootstrap.min.css
Source Map URL: bootstrap.min.css.map
This will not affect the style of your page, and you can simply ignore this message, or remove a line from the bootstrap file as the answers to this question suggest. This answer explain a bit more.
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 am following a tutorial for symphony 2 but cant get the style sheet to load all I get is a 404.
I have tried also adding it into the route but I get a permission error on the style sheet.
app/Resources/views/base.html.twig
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset=utf-8" />
<title>{% block title %}symblog{% endblock %} - symblog</title>
{% block stylesheets %}
<link href="{{ asset('css/screen.css') }}" type="text/css" rel="stylesheet" />
{% endblock %}
I have added the style sheet into app/Resources/views/web/css/screen.css
Any ideas why this is not working? Tutorial
You put css files in a wrong directory.
It should be web/css/screen.css instead of app/Resources/views/web/css/screen.css
I also suggest you to use assetic instead of manually put css and js to the web directory. These articles might help (take a look at the assets:install command):
How to Use Assetic for Asset Management
Linking to Assets
Including Stylesheets and JavaScripts in Twig
Projects assets (resources from your app/ folder) are ignored by assets:install command. Only resources from bundles will be copied into the web/ folder automatically.
You should place your app (project) resources directly in the web/ folder.
http://symfony.com/doc/current/cookbook/assetic/asset_management.html
By the way: ONLY the web/ folder is public.
Look at the rendered source code of your html in the browser and you will see that your css file is prefixed with a web/. This is what the asset() command does