I have a vendor library that has its own directories and many files (js and css a.o.). I have placed this as a folder in my_app/vendor/assets/external_library/. How can I refer to files from this directory, for example in my views?
For example, there are the following two files:
my_app/vendor/assets/external_library/editor.js
my_app/vendor/assets/external_library/contents.css
To use these I have added:
In application.js: //= require editor
In application.css.scss: #import "contents";
In my view: <script src="editor.js"></script>
It does load the view page in development. But when I go to the page's source code and click on the link to the js file, it is unable to find that file. Am I doing something wrong?
Add this to your application.rb file:
config.assets.paths << Rails.root.join('vendor', 'assets')
and then require these in your application.js:
//= require external_library/editor.js
and application.css.scss:
#import "external_library/contents";
In your view you should only need to have the following:
= stylesheet_link_tag "application", media: "all"
= javascript_include_tag "application"
Related
I have to modify a RoR project. All the javascripts are in the public/assets folder and my work is to move them in the app/assets/javascripts folder.
But when I try to import my javascript in my view with that : <%= javascript_include_tag "application"%> the result in code is the folowing :
<script src="/javascripts/application.js">
{"status":"ERROR","message":"404 not found"}
</script>
Currently here is what I've got in my folder
I haven't modify the application.js. The file contain these lines :
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
I also modify my config/application.rb to add this line :
require 'sprockets/railtie'
I don't know why I have a 404 not found. In all the tutorials that I read it looks like that all I have to do is to put my JS in app/assets/javascripts and use javascript_include_tag to access it. But I suppose that some configurations lines are missing but I can't figure out which.
Thanks for the help
I am trying to make a custom manifest javascript file seperate from application.js. I've take the code from application.js and pasted it into a new file I've called "other_manifest.js" and placed in the assets/javascrips directory. Here is the code:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require_tree .
In my assets.rb file, I've included the line:
Rails.application.config.assets.precompile += %w(other_manifest.js)
I precompile and clean the assets locally, and then when I run the page, all i get is the exact text from the manifest file. It is not bringing in any of the files. How do I create a custom manifest file?
Easily
You have application.js. Create a second file: other_manifest.js
Then in your layout layouts/application.html.erb (could be a different layout altogether):
<% if condition %>
<%= javascript_include_tag 'other_manifest' %>
<% else %>
<%= javascript_include_tag 'application' %>
<% end %>
And yes, you need to add in your config/initializers/assets.rb (followed by reboot):
Rails.application.config.assets.precompile += %w(other_manifest.js)
Also, make sure to remove the //= require_tree . from manifests. Because it will include ALL the javascript in the manifest (making having a different manifest pointless)
<%= javascript_include_tag "application", params[:controller] %>
I added the above tag in my application.html.erb, but it seems my js files are not loaded according to controller. When i navigate to localhost:8000/sessions it does not load sessions.js
Rails now uses the asset pipeline. In app/assets/javascripts/application.js you can require all your of javascript files with "magic comments":
//= require_tree .
Your javascript can now be inside app/assets/javascripts/sessions.js or even app/assets/javascripts/sessions.js.coffee if you want to use coffeescript.
Note that this will require all Javascript files on every page, which is often a desired effect because the client can cache the javascript and thus only has to download it at the first request. For more information read the Rails Guide I linked to above.
You can load controller specific js files as follows
<%= javascript_include_tag "application", controller_name %>
So that, if you navigate to localhost:8000/sessions it will load sessions.js file. And it is not necessary to add //= require_tree . in application.js.
Rails 4.
Hi I d'like to add an lightbox to my application. I have follow the step-by-step instructions for Lightbox but my photo gallery doesn't respond at all
I have called (:all : application) the file necessary in my application.html.erb. My view is ok I think the problem reside in my way to call the vendor files.
I place all the lightbox files under vendor/assets/javascript and vendor/assets/stylesheets respectively. I did create an vendor/assets/images for the Lightbox images file (close icon...) and my application.html.erb contains:
stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true
javascript_include_tag "application", "data-turbolinks-track" => true
Nothing show up properly concerning my photo-gallery. any help?
in your /assets/javascripts/application.js add this line after //= require jquery:
//= require lightbox-2.6.min
same thing for your /assets/stylesheets/application.js add this line :
//= require lightbox
I added the following line that #medBo told me too.
But for the IMG folder I placed it inside the public folder.
add '.scss' to the lightbox.css file and edit
line 195 to 'background: url(/img/close.png) top right no-repeat;'
then you can keep the img folder inside the assets folder where it belongs if you are going to compile assets localy
Probably you can take a look at these gems:
Lightbox Rails
Lightbox for Bootstrap 3
Is there a way to add all files in Vendor third party libraries with sepearate application.css and application.js file?
Can I just add those two files under Vendor folder and require_tree from there like below?
/*
*= require_tree assets/stylesheets/.
*/
Some say that I should include in app/assets/stylsheets/application.css file but I think there is another way like above.
You can do that with a little bit tweak
Sprockets uses files named index (with the relevant extensions) for a special purpose.
For example, if you have a jQuery library with many modules, which is stored in lib/assets/library_name, the file lib/assets/library_name/index.js serves as the manifest for all files in this library. This file could include a list of all the required files in order, or a simple require_tree directive http://guides.rubyonrails.org/asset_pipeline.html#manifest-files-and-directives (See 2.2.2)
That is said, say your vendor CSS directory is vendor/assets/css/foo, with the following files
/foo
bar.css
baz.css
Then you can create a file foo/index.css with following content
/= require_tree ./
Then you can include this lib in your main application.css as
/= require foo
Disclaimer
I have not used the above technique by myself. I just followed the guide and made assumption.
I myself recommend require CSS one by one as order matters in CSS. Even the files are in vendor, you can require them directly in application.css like
/= require foo/bar
/= require foo/baz
Try putting this in your javascript file (vendor.js):
//= require_tree ../../../vendor/assets/javascripts/.
and this in your css file (vendor.css):
//= require_tree ../../../vendor/assets/stylesheets/.
You could put these in app/assets/stylesheets/vendor.css or app/assets/javascripts/vendor.js, and then include them in your _head.html.erb partial:
<%= stylesheet_link_tag "vendor", :media => "screen, projection" %>
<%= javascript_include_tag "vendor" %>
Make sure to add these to your assets to be precompiled as well (config/environments/production.rb):
config.assets.precompile += ['vendor.css', 'vendor.js']
Also, cool username! :D