I need some tips on how to work with assets in Symfony 2. For example, do we have to always perform the assets:update every time an image is added ? I know Assetic take care of the management on css and javascript files but what about images? What would be the best practice for the front-end development with Symfony 2 ? How do you guys setup your css, images and js files in your app to make it easy to develop, deploy and change ?
Regarding images, if you added it into your public folder, I think there's no need to perform assets:update
However, if you add the image within the resources folders of a bundle, you might have to, depending on your OS and which options you used when called assets:install
If you're using an OS which supports symlinks (linux, OS X, and I guess all OS but Windows), you can install the assets calling (I don't exactly remember the call, the important thing here is the symlink option):
php app/console assets:install web --symlink
This way, instead of having a copy of each bundle's resources, you'll have a symlink, so there should be no need to update. If you have an OS which doesn't support symlinks, I think you'll have to keep updating or reinstalling assets (in fact, I always used assets:install, I didn't knew there was an update option :P).
Regarding the set up, I usually put all css, js, images and any public resources inside a bundle if it is used only within the bundle, and place it onto the public folder if it's used by many bundles, or I plan to use it in other bundles.
As of Symfony 2.7 this will generate relative symlinks in web directory:
php app/console assets:install web --symlink --relative
In composer.json add:
"extra": {
"symfony-assets-install": "relative"
}
This will also generate relative symlinks on composer update.
Here is cool think about --symlink.You can configure(config) one time and use forever.If you want more http://www.w3docs.com/snippets/symfony/how-to-keep-symlinks-in-web-bundles-after-composer-update.html
Related
Back in Symfony 2.x, the assets:install command looked for assets in /path/to/YourProject/YourBundle/src/Resources/public and copied (or symlinked, depending on whether or not the flag was used) those files to /web. Now that assets are stored in /path/to/YourProject/app/Resources in Symfony 3+, does the console command look there instead? Should I even bother using that console command at all?
According to the recent symfony best practice store your assets directly in web folder. Check this out: https://symfony.com/doc/current/best_practices/web-assets.html
This way your assets will be available without touching server-side commands. Also any frontend developer working on your project does not need to know anything about symfony, he will work directly with assets in web folder and templates in app/Resources/views
I'm a bit new to Symfony and I'm don't know what to use for my static file management. I have read about Assets component and the Assetics bundle.
I know that Assets just includes the files and Assetics is a bit smarter as it can combine files and compress images. But I already use compass to minify and combine the css files so therefore Assetics is not really required.
Version control so the url of the static files change to by pass browser cache, is done by both.
Assetics is removed from 2.8 or higher, does this mean it is not best practice anymore?
I need to generate urls on three places:
Twig -> Easy to do with both
Controller -> Found only a way to do this with Assets
In css files -> Believe it is with both not possible
Wat would be the best to use in my case, any advise?
Assetic can be seen as a way to easily apply filters and compile your assets. The asset component basically is used to manage URL generation. As you said, both nicely are integrated in Twig via extensions, and controllers via the services.
Our application uses compass too, but Assetic makes sure that the compiling happens at the right moment without the need of compass watch at the commandline.
Think most of your questions are answered on:
http://symfony.com/doc/current/cookbook/assetic/asset_management.html
and
http://symfony.com/doc/current/components/asset/introduction.html
I've been using the RjFrontendBundle to run the front-end CSS/JS build, and also copy other static content into place from Bower/NPM/local sources. It provides a VersionStrategyInterface for the Assets component that creates, and uses unique filenames in production (renaming the files with an embedded hash, via the GulpJS rev-all package). In dev, it uses the normal filename.
Within CSS files, you can still reference CSS/JS, via a url() function, and the pipeline will rename them appropriately in dev and live.
The GulpJS build tool is used to minify and otherwise prepare the plain files. It comes with a setup console command to build the initial gulpfile.js and can also watch and rebuild files, updating the browser as they are changed, which helps with front-end development workflow.
The trend is to use standalone front end tools such as gulp/grunt/sass instead of assetic. The reasons are (probably) as follows:
gulp / grunt are independent from the framework, providing the same workflow for the front end guy no matter what underlying framework is used for the backend.
assetic has a different workflow than most of the modern tools. It assumes that you will write your script/css includes in the templates. Migrating from assetic to gulp could be a pain for large project.
as your project grows, assetic can become kind of slowish... As that happens, you will stop pulling your assets from the controller and start generating them the way gulp or grunt does. In this scenario, gulp and grunt are just better tools.
assetic lacks some important features, such as including processed assets into HTML code (inline). Because of the way assetic works (twig tags), it might be difficult to overcome this.
As for generating the URLs: assets are just files in the filesystem. Write a function or twig extension to generate URLs to those files.
I have a Symfony2 project, and I was wondering how to use assetics which are located in the bundle folder in the view. So I searched the web to find a solution, and I found this command :
php app/console assets:install web
And it works fine on my computer. It created a symlink (seen as a shortcut on windows) so I can call my assets just with something like :
asset("bundles/mybundle/folder/file.css")
But everything changed when... I uploaded it.
The symlink became an actual folder with a copy of all the content of the public folder from my bundle. So when I made changes on src/my/bundle/resources/public/folder/file.css, it didn't change web/resources/bundles/mybundle/folder/file.css because it was a copy, and not a shortcut.
How can I keep a symlink ? Is it because I'm on windows and my server is on Linux ?
The symfony2 standard way is to have a copy of all js and css files in your web directory.
Think of it as a clean separation between user/client accessed files and strict server side files. You can workaround it, but you shouldn't.
To solve your problem, after each update to your server you have to delete all files in web/resources/bundles (to make sure removed files from your bundle are not present anymore) and rerun
php app/console assets:install web
I am new to Symfony 2 and there is something I would like to know..
It looks like you have to put your static resources to this location: MyBundle/Resources/public
but if I want to use twig functions like asset, it is good if resources are at this location: web/MyBundleName/
Why do I have to duplicate my resources ? (one in the src/MyBundle/Resources/public and the other one in web/MyBundle)
Run app/console assets:install web to copy resources from the activated bundles to the web/bundles folder.
This is not a duplication. The web/bundles folder is the place where all the assets from all the bundles are being installed to. The folder should be ignored by your VCS.
The reason for this approach is that 3rd party bundles — and the reusable bundles you'll create later — don't have access to the web folder of an application. Installing assets with the command solves this problem.
After a great deal of hassle using Alexandre Salomé's [nonetheless excellent] "Sass, Compass, and Assetic in 10 minutes" I've finally gotten the Compass Assetic filter to convert my SCSS files into CSS files within the /web directory of my project. I even think I've got the compass image-url() function to reference images where they should be.
Unfortunately, I don't know how to keep images inside my bundle and have Assetic properly copy or rewrite them into the /web directory when needed. They just don't go there. For the time being (...and it seems like this may SOMEHOW be the intended functionality??) I'm just copying them into a /web/images directory. That can't be right. ...Right?
This is not something assetic can and should do, but something Symfony can do.
First of all, you should place the assets on the correct place in your bundle structure. These should be placed in the Resources/public directory. This is the place where stylesheets, scripts, images and all other public things lives. For more information about the bundle structure, please read the documentation: "How to use Best Practices for Structuring Bundles"
The FrameworkBundle comes with a usefull command called assets:install this will install all assets from all bundles into the web/bundles/<bundle_name> directory. This command is run every time you use a composer update or composer install command. When you update some assets in your bundle, you can run this command to copy everything to the web directory:
$ php app/console assets:install
Sometimes, you don't want to run this command every time you update someting. For instance, if you begin styling your pages, you will need to run that command every minute. If you server supports using symlinks, you can use the --symlink option. This way, you don't need to run that command everytime.