I have a folder structure for my js and css-files in the public folder like this:
public
js
dev
prod
css
dev
prod
Basically the dev files contain the not-minified files. where as the prod folder contains the minified files.
But actually I would prefer to not have the dev-files publicly available and load them only when I as a developer am in dev-mode.
How do i go about this?
You have no need for prod version of those files and should delegate the creation of those to Assetic which compiles them, by default, to /web/{css|js}/ directory.
Read more about Assetic here: http://symfony.com/doc/current/cookbook/assetic/index.html
Pay special attention to Filters section..
a quick and simply hack could be to have your dev assets somewhere else, maybe
web/custom/assetsDev
and in the Ressources/Public folder you make a symlink on all dev machines to the dev assets like:
ln -s js/ /yourProject/web/custom/assetsDev/js
dont forget to put both directorys in
.gitignore
dont know if that suits for this case, but in theory it should be working and you dont have to configurate anything inside the app
Related
I have been searching all over for information on where django-cms is storing the CSS and SCSS data for my site, which I am working on localhost. When I go to edit the CSS file directly, it has no effect, so I'm wondering what needs to be done to edit those CSS files. Obviously they have been loaded somewhere. How can they be reloaded, or in general what is the best practice for editing the CSS files?
Apparently I had to do this with both the style.scss and style.css files, which seem to have the same css classes. But even after editing both files, I had to refresh the site on my localhost a few times before I could see the changes. Frustrating, but it does work to edit the files directly in the static folder.
#Lawrence DeSouza At first you should mention which plugins and style frameworks you use.
If you are using some sort of a frontend framework like Bootstrap 4 your should compile its css from scss separately. You can do it right on the dev server in a separate directory outside your project dir and cloned from the official repository. Normally you would only need to change variables in "/bootstrap-4.x.y/scss/_variables.scss" file. On the next step you would compile your *.css files with "npm run dist" command and then copy compiled files from "/bootstrap-4.x.y/dist" directory to your "/projectname/appname/static/css" directory. The process is well-documented here. After copying changed files to your "static" folder you should run "python manage.py collectstatic" and refresh the page. If it's not working after refreshing the page in a browser (normally it should work) - restart the server. I am a bit biased towards Bootstrap, but the logic should be the same in your case.
I have deploy my Symfony 3.1 application and uploaded it online, following the symfony 3.1 cookbook steps (basic file transfer and common post-deployment tasks); I have checked all the requirements, install vendors, clear cache, and install all assets, but no images, css configurations nor js files are loading. I can only see the raw content.
any idea of what I can do?
thanks.
I can't write a comment, cause have no reputation so I hope my advices will be like answer.
First solution very simple. Check the permissions of your web directory.
chmod -R 0777 ./web
Check the config file (or post it's code here).
check if your paths are relative, something like:
href="/images/myimage.jpg"
Where images - folder which contains in web directory
And from my opinion try to clear cache once more in both dev and prod.
I still have some problems to handle my assets in symfony. The best practices say, I should store my assets in web/.
But I dont like to store my raw sass files there, because its a public folder and I think only compiled or static files should be stored there.
Thats why I store them (js and sass) currently in app/Resources. And my assetic.read_from is app/Resources. But then there are some bundles, that are symlinked by assets:install to web/bundles/.
And now, when I want to include this bundle-assets in my twig files, I have to go there by ../../web/bundles/.. in the stylesheets block. That doesnt look very clean, so I did a symlink app/Resources/bundles->web/bundles/ and that works.
But I still think its too much fiddle and I would like to know if there is a cleaner way that better collects my assets in one place.
Don't use AsseticBundle, it was even removed in default symfony-standard 2.8. Managing frontend assets with php is workaround for someone who really don't want to use "the right tools"
I personally keep my source files in /assets/ and with Grunt JS I compile them to /web/assets/ which later is served from assets.somedomain.com through CDN
2 years ago I wrote post about managing assets with symfony, it's still valid and up to date. You might want to check it out.
http://konradpodgorski.com/blog/2014/06/23/better-way-to-work-with-assets-in-symfony-2/
I should extend post by things I learned since then but always not enough time :)
I don't see why you can't use web/ folder for your assets.
I often work with less and other file format which are afterward processed and minified.
The solution to your problem seems simple to me: Use two folder in the web/ folder.
The first folder would be your source/ folder. In which you would place all your sass files. You will add a .htaccess file to this same folder, and deny all access (you can copy from the .htaccess file in the src/ folder).
Then a second folder, lets call it assets which will hold all your compiled and minified assets.
That should do the trick... ;)
You may be interested in this topic as well. It may help to hide futher the existence of your source/ folder. ;)
If you really don't want to have your sources files in the web/ folder, then loot at this, it should help you place your sources files in your bundle.
This problem is driving me crazy... I think I've tried every conceivable combination of Sass file, ERB file, asset helper, image helper, etc. etc. Someone please give me new ideas!
Context:
Rails apps require use of asset helpers so that when the assets are precompiled, the source will be a fingerprinted asset file. I.e., if you just called img src="X.jpg", the site in production would look for X.jpg, but the file in public/assets has actually been fingerprinted as X-as;diofua;wemfiwaejfoiawefo.jpg. The only way to get to that fingerprinted file is to use an asset helper, e.g., image_url ('X.jpg').
Right now in my live site, I'm using an asset helper, but for whatever reason, it's not pointing at the fingerprinted asset. Note that the assets are found in development (but again, that's because there's no fingerprint added in development).
Code
Image titled "classic-map.png", located in app/assets/images/galleria
Image is called from a css.erb file required in the application.css file. In the css.erb file, I have the following code:
background-image: url(<%= asset_path 'galleria/classic-map.png' %>);
For reference, http://guides.rubyonrails.org/asset_pipeline.html
Note that I'm choosing to write this as a css.erb file, hence the use of asset_path vs. asset-path. Also, I initially thought that the issue might have been in interpolation, but in the page source, the url is definitely working, it's just that it's pointing at url(galleria/classic-map.png) instead of url(galleria/classic-map-apsoidufalskjf;kasj.png)
A million kudos to whoever can help!
For what it's worth, this happened to be AGAIN, and this time I could not use the hack because I desperately needed the fingerprint. So somehow, magically, I ran a rake assets:clobber and heroku run rake assets:clobber to clean all assets, and then a straight up git push to force Heroku to do the precompilation for me. That did it, and everything works.
Now, when this happens, I clobber assets locally & in production and push, forcing Heroku to precompile remotely. Similar to #user2880239's answer. I have stopped precompiling locally and checking into git.
I sat with a Sr Rails developer who still couldn't help me fix this. But the workaround we ended up using was that we just manually removed the asset fingerprint in the public folder (since the fingerpoint is what the asset helper is meant to point to).
I.e., the file galleria/classic-map-587854758918434124.png we just manually changed back to galleria/classic-map.png and it works fine.
Note that if you do this 'hack', the next time you precompile assets, Rails will create another fingerprinted asset, so you'll have duplication unless you want to keep deleting the additional fingerprinted asset each time. For me, I don't care about the duplication, I care about not thinking about this anymore.
Did you check RAILS_ENV ?
bundle exec rake assets:precompile RAILS_ENV=production
I had the same problem you did. This blog post helped me.
What I did was change a few things in my config/environments/production.rb file, namely...
config.serve_static_assets = true
config.action_dispatch.x_sendfile_header = ‘X-Accel-Redirect’
config.assets.compile = true
Note that you might not need to 'add' any of those properties since they may be pre-set to false or merely commented out.
Then I did the heroku dance:
rake assets:precompile
git add .
git commit -m "Fix static assets"
git push
git push heroku
I'm having the same issue. I even tried the helper from the rails console from heroku, and the helper works fine there!!
$ heroku run rails console
Running `rails console` attached to terminal... up, run.8071
Loading production environment (Rails 4.1.7)
irb(main):001:0> puts helper.image_path("bg.jpg")
/assets/bg-00acfb7dbe138102509d82ac2313c24d.jpg
My final "solution" was to update config.assets.compile = true in config/environments/production.rb to fallback to the non fingerprinted image.
Hope this solution could help to someone. And if you had any real solution, please make me know!
The answer to this for Heroku is in their Pipeline docs here.
By doing clobber you are basically cache-busting all your assets and forcing all clients to reload all static assets (even if they have not changed) every time you deploy your code. That is not advisable as it means every time you deploy ALL clients will experience slow loading times until all assets get cached again.
Your css file has a dependency to your image file, so you need to tell the assets pipeline about this by putting this at the top of your css:
//= depend_on_asset "galleria/classic-map.png"
This tells sprockets that if class-map.png gets a new fingerprint then the css must also get a new fingerprint. So it will only recompile the files (and dependencies that changed).
Also for others landing here, be aware that if you are using asset_path from ANYWHERE other than a view (eg in a model) you need to prepend the full context:
ActionController::Base.helpers.asset_path('your-image.png')
More info here.
In my webdesign process i use jade, sass, coffe etc. to generate static files via a GruntJS watch task into a dev folder. And most of the times after the build process is done, a cms comes along and want some templates to work. Thats usually html files with some php/ruby/python tags in it. Let´s say it´s a Wordpress Theme.
The Problem is:
i have to modify my generated files in the dev folder directly
when im modifing my source jade, html, coffee - files, the dev folder would be overwritten
if i clone the static files and move them into the theme folder, i have to apply manually every change i made to the src/dev folder to the cloned theme template files.
that´s very odd. So i´am in need of a grunt task that maybe...
generate the templates for me out of the static files (via a json mapping file)
generate the templates directly from the src files via special attributes, comments or something similar
There´s just one thread i found where the user tries to accomplish the same with jsdom.
Can someone help me to find a existing tool that accomplish such a task or do i have to build it on my own?
Thanks, Robert
Check out grunt-usemin
Replaces references to non-optimized scripts or stylesheets into a set of HTML files (or any templates/views)