I'm new to the Asset Pipeline, having just migrated over from Rails 3.0. I'm trying to get CKEditor into the pipeline, but all the gems for it are really unclear about how they work, and have little or no usage instructions.
I would prefer to do this without using a gem, since it seems that all I have to do is drop the source files into the vendor/assets directory and then include them in application.js. I've tried that, however, when I precompile and push to production, it seems that some of the files aren't being found (editor.css, for example), and the editor doesn't show up at all (just blank area).
application.js
//= require jquery
//= require jquery_ujs
//= require ckeditor/ckeditor
//= require_self
That's with the source files in vendor/assets/javascript/ckeditor/, and is pointing to ckeditor.js. I'm just not sure where to go from here. This code works fine in development but does not work in production. I am running rake assets:precompile before adding and committing to git, and then pushing to heroku.
I got this working (deployed on Heroku), by:
Including the ckeditor code in vendor/assets/javascripts/ckeditor
Adding config.assets.precompile += ['ckeditor/*'] to my production.rb
Setup your ckeditor base path in the application.html.erb var CKEDITOR_BASEPATH = '/assets/ckeditor/'; before the include of the application.js
In application.js, include //= require ckeditor/ckeditor
Bite the bullet and use a gem. Two options here:
CKEditor Engine
https://github.com/galetahub/ckeditor.
This runs as an engine and includes its own mountable CKEditor in assets. It also exposes Ckeditor.assets which you can add to your assets path. This references all the images, plugins, language files and miscellaneous little bits of junk that CKEditor requires.
It has a shot at handling image uploads and it also integrates nicely with ActiveAdmin.
CKEditor Rails
https://github.com/tsechingho/ckeditor-rails
This does less, you include it in your asset pipeline and it does the rest for you. Nice and simple and sufficient for all basic use cases.
Upshot
I have used both of these on live projects and both do the job. Use the former if you plan on using ActiveAdmin and you want a smooth ride. Use the latter if you prefer minimal.
CKEditor is pretty ugly. Keep it at arms length, then when you need to upgrade you can swap it out for another.
If you are on Rails 3.1.0, you should upgrade to 3.1.1. In this version the precompile rake task compiles assets into both original and digested filenames. This is so third-party code that is not pipeline aware will still work.
You will need to add the ckeditor directory and all its child directories to the precompile array so that the precompile task knows to compile them.
config.assets.precompile += your_files
your_files can be an array of files, regexs or Procs - whatever is need to capture the names of the ckeditor files. I don't have ckeditor handy to work out what needs to go in precompile, so others might appreciate it if you post what you come up with!
One thing to watch is that if you have far-future headers set for the /assets directory on your webserver, you'll need to exclude the CKeditor directory. Because those files won't be fingerprinted, there may be issues when you update CKeditor with some clients not getting the updated code because they have a cached copy that marked to only expire some time in the future.
Have similar issue. For me it was fixed by overriding default precompile task (I used Rails 4 and CkEditor 4).
Add to application.rb config.assets.precompile += ['ckeditor/*']
In application.js //= require ckeditor/init
Create file lib/tasks/precompile_hook and paste text from this answer Precompile hook
Had the same issue, I've adjusted fallback in production for the assets which had not digest until it will be fixed:
config/environments/production.rb
config.assets.compile = true
what about ckeditor_assets directory in /public ? uploaded photos and attachments go to those directories, as defined by default in app/models/ckeditor/[attachment.rb,photo.rb]
ckeditor_assets is outside of assets and images/files are not accessible (url like http://yourdomain.com/ckeditor_assets/pictures/1/file.jpg will not work, but the file is there)
I spent some time getting the ckeditor_rails gem to work; maybe I can save some time for others trying to do the same.
The gem worked just fine out-of-the-box in development, but when deployed to production using precompiled assets under Phusion Passenger it did not. It was clear to me that the problem was that it was looking for assets under:
http://myhost.com/assets/ckeditor
where in fact it needed to be looking under:
http://myhost.com/my_app_name/assets/ckeditor
It was also clear to me that I needed somehow to set:
var CKEDITOR_BASEPATH = '/my_app_name/assets/ckeditor'
but no matter where or how I tried to do this, it wouldn't take.
Finally, I found on this key sentence on the gem wiki:
You can create app/assets/javascripts/ckeditor/basepath.js.erb to
have your own CKEDITOR_BASEPATH.
I created the file as specified (alongside my config.js file for configuring the editor), added my CKEDITOR_BASEPATH setting to the file, re-compiled my assets, and all was good.
In your config/development.rb make sure to set
config.assets.precompile += ['ckeditor/*']
as well as set
config.assets.debug = true
Related
So first off, this question spawns from me being fairly new to rails and just figuring this out as I go.
I am working on a project and have added a few gems to my gemfile since I started and I have encountered something that seems trivial to solve, but I can't figure it out. When I add a gem to my Gemfile and run bundle the assets that are associated with that gem are not being dropped into my assets directory.
For example, I just added Leaflet Marker Cluster to my project, and this gem has 3 files that are needed in the assets folder, but after running bundle, they are no where to be found.
What am I doing wrong here?
They won't be physically in your assets folder. You'll need to require them in your application.css/js manifest like this..
//=require leaflet.markercluster.js
If you want the assets to be compiled inside the assets folder you have two options:
1- Add the asset you want on your manifest:
//= require some_file_from_your_plugin
2- Add the asset on your precompile assets array config:
config/environments/production.rb, go to config.assets.precompile and add the assets you want to compile there, like:
config.assets.precompile += %w( my_asset1.css another_asset.js)
You need one each depending on how you implement each asset on your site:
- if you only load application.js you need to add the asset like in option 1
- if you use something like "= javascript_include_tag 'another_asset.js'" then you need option 2
I really recomend you take your time and read rails guide about assets http://guides.rubyonrails.org/asset_pipeline.html it's REALLY helpful, it covers almost anything you need to know about assets, cache, compression, minification.
It has problems with rails-assets. Just look at this https://github.com/Leaflet/Leaflet.markercluster/issues/394.
If you want to use leaflet.markercluster without wait a next release, here is solution for you.
#= require leaflet.markercluster/dist/leaflet.markercluster.js
I'm guessing this is a silly question, but i'm a bit of a newb...
I've added the chosen gem to my rails app by adding it to my Gemfile and requiring chosen-jquery in my application.js file.
My question is: where can i find the actual javascript file for chosen? Is it downloading it automatically?
Simply include the JS and CSS files like described in the documentation on the main page of the Github project and it will be included when precompiling your assets. The files are not within your project directory but rather within the gem and will be resolved by the pipeline when the gem is included.
If you need to get to the file directly (for modifications), you need to put the JS in there manually. You can then still include it in the main application.js for the pipeline and have better control of the version in use. To me, this is the preferred method.
However, may I suggest switching to Select2 which is originally based on Chosen but under much more active development and better documentation:
http://ivaynberg.github.io/select2/
https://github.com/ivaynberg/select2
There's also a gem for it if you like:
https://github.com/argerim/select2-rails
It's in a gem itself. If you look at vendor/assets/javascripts in gem root, you'll see all javascripts that come with chosen gem. They are added by assets pipeline, with
//= require chosen-jquery
line in your application.js.
Look up your assets load path. Like this:
in terminal cd to your app root
then open rails console
then run Rails.application.config.assets.paths
Your chosen-jquery is in one of those folders.
I have a best practices question regarding one-off javascript plugins and their role in the Rails asset pipeline.
I'm new to Rails, and am working on a new project. The site template I'm using uses a large collection of js plugins for added functionality. (eq chartjs.org, ckeditor, and about 40 others) Since these are needed on a page-by-page basis, I'm not sure if I should really load them all in the application.js manifest.
Currently, I have the template's assets under the /vendor directory and only the core assets are being loaded from my application.js manifest.
Thoughts on how/where to include the plugins?
As i know that rails default added all js file include in application.js by //= require_tree . so, you can remove it and add only those file which you want to added. and if you want to run only specific function then you can use location.pathname with condition and it will work for only that specific page.
Running Guard with Spin works great to keep my testing fast, except when assets are relevant and need compiling. It seems that the test environments recompiles all assets whenever I change something in them. I've seen examples of deployment scripts that only recompile assets whose source has changed. Can this be done for testing too? Or is there another way to speed up asset compilation for tests?
I'm using a rather specific setup so I'll be happy to supply more information if needed, though I feel the answer from this question might be of use in many more cases than just mine.
You can take a look at this article written two months ago . It seems rather complex task . Nathan has written a gem that precompiles only changes , made to assets . It can be used in development and testing env.
EDIT : Here is another article , related with speeding up our tests . It has a different point of view about js testing .
You can for example avoid adding require_tree in Your application js and css files.
In addition, use proper file extensions - if something is js - then name it like normal js files. Same for css and scss.
You can also precompile assets locally to have it compiled locally on development by command rake assets:precompile - but remember to delete it after tests to see changes in assets next time (it can be generated in vendor folder)
I am sure but you can try:
In application.js file write all js file in tree order like this:
//= require jquery
//= require jquery_ui
//= require jquery.ui.core
After I deployed my upgraded Rails 2.3.x -> 3.1 (rc4) app to our test environment this afternoon, all of our stylesheets and JavaScript files were returning 404 errors. We had added the rake assets:precompile task to our post-deploy script and it took a while to determine why the assets folder didn't have the pre-compiled files we expected.
In the end, the files weren't being compiled because apparently only application.css and application.js (+ non JS/CSS files) are processed by default.
We needed to change the following configuration value as follows:
config.assets.precompile += %w( *.js *.css )
Question: why isn't this the default?
I would have expected that anything that wasn't necessary to process as a manifest file would just get copied into public/assets. Much of what I've read on the asset pipeline is essentially "stick your assets in app/assets, configure the manifest files, and it should just work". Since the assets:precompile task didn't spit out any information about what it was doing, it took a while to determine that it just wasn't looking at the files we thought it would.
Is there any reason why this would not be a good value for the precompile configuration?
Thanks!
The idea is to have all your JavaScript and CSS always loaded in one shot, rather than loading bits and pieces as you move along. That way you always have the 'world' loaded and ready to work with, rather than having to include a whole bunch of individual files here and there.
It's a bit of a larger 'up front' load, but then the browser should keep loading all the javascript from cache. So the perceived speed of the site should speed up due to having everything cached and ready to go after the first request.
This was a controversial decision to include for Rails, but so is including CoffeeScript by default. Rails has always been an opinionated framework that way.
the new sprockets-based pipeline compiles all the files in /asssets/stylesheets and /assets/javascripts get compiled into application.css and application.js, respectively, by default.
In your views, you only need to link the application files, sprockets handles the rest.
Update:
Well, you don't have to make it all into just one file... You could have an shared.js, secure.js and public.js and have them each include the parts they need...
Think of them not as javascript files, but manifest files that establish groups of javascript files which you can then include as a group with a single javascript_include_tag. While the default is to include everything in the folder into a single file, you can be always pick and choose what to include, and what not.
The 'precompile' task simply runs those manifest files and compiles the multiple files into one, while pre-processing and sass or coffee script it runs across.