I developed a javascript diagram tool (using kineticjs), and need to load some different js files. But they need to be load in order. I manage to do that this way:
inside a specific view (in the top of the file):
<%= javascript_include_tag "kinetic" %>
<%= javascript_include_tag "diagramtool/diagramtool0" %>
<%= javascript_include_tag "diagramtool/diagramtool1" %>
<%= javascript_include_tag "diagramtool/diagramtool2" %>
<%= javascript_include_tag "diagramtool/diagramtool3" %>
<%= javascript_include_tag "diagramtool/diagramtool5" %>
<%= javascript_include_tag "diagramtool/diagramtool6" %>
this in assets.rb:
# Be sure to restart your server when you modify this file.
# Version of your assets, change this if you want to expire all your assets.
Rails.application.config.assets.version = '1.0'
# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
# Rails.application.config.assets.precompile += %w( search.js )
Rails.application.config.assets.precompile += %w( kinetic.js )
Rails.application.config.assets.precompile += %w( diagramtool/diagramtool0.js )
Rails.application.config.assets.precompile += %w( diagramtool/diagramtool1.js )
Rails.application.config.assets.precompile += %w( diagramtool/diagramtool2.js )
Rails.application.config.assets.precompile += %w( diagramtool/diagramtool3.js )
Rails.application.config.assets.precompile += %w( diagramtool/diagramtool5.js )
Rails.application.config.assets.precompile += %w( diagramtool/diagramtool6.js )
And the files are located in assets/javascripts/diagramtool
The problem is that they are not load in order when I move to the view that has the code above to load the files. But if I refresh the page they are load in order!
So, my questions are
How can I assure the js files are load in order?
Why the files are load in order when I refresh the page? And why they are not load in order when I navigate through the application?
There is another way to do this? I tried to do it in application.js using the asset pipeline with the "require" key word. But I don't know how to do it there.
I also tried to put all the code in one file, but the file is load before the kinetic file! And I get errors because I need to load the library file first. But if I refresh the page it works again.
Any help? I don't really know what to do, to have this working properly. I'm new at Ruby on Rails, and I'm still learning how to do this kind of "configurations".
Edit:
I'm not using the application.js to load the js files, because I wasn't able to do it that way. But here it is:
//= require jquery
//= require bootstrap-sprockets
//= require jquery
//= require jquery_ujs
//= require turbolinks
/*
require kinetic
require diagramtool
require_tree .
*/
Just solved it this way:
created a manifest file diagrams.js:
//= require diagramtool/kinetic
//= require diagramtool/diagramtool0
//= require diagramtool/diagramtool1
//= require diagramtool/diagramtool2
Added this in the view:
<%= javascript_include_tag "diagrams" %>
Using the asset pipeline with a manifest file.
Related
Basically, exactly as the title says. I have a gem installed that gives me some JS to use. This wasn't a problem before as I was using Sprockets + Assets pipeline.
Now, I migrated to jsbundling-rails and have literally no idea how to include that JS code provided by gem. I've spent like 10 hours searching and no luck so far.
Please, help me.
The gem would have to have a js package that can be installed with yarn/npm so that it can be imported in application.js. If it doesn't, you can setup a js file to be processed only by sprockets, like in the old days.
Add another javascript entry point that will skip esbuild and will be processed only by sprockets.
Update manifest:
// app/assets/config/manifest.js
//= link custom.js
Add //= require directive:
// app/assets/javascripts/custom.js
//= require gem_javascript
Add it to layout:
<!-- app/views/layouts/application.html.erb -->
<%= javascript_include_tag "application", "custom", "data-turbo-track": "reload", defer: true %>
Alternatively, instead of using //= require add gem_javascript to javascript_include_tag:
<%= javascript_include_tag "application", "gem_javascript", "data-turbo-track": "reload", defer: true %>
Might have to add it to manifest as well for precompilation:
// app/assets/config/manifest.js
//= link gem_javascript
I'm a newbie to ruby on rails and trying to build the Instagram-clone and I'm following a youtube tutorial. Click here for the tutorial
I used a third party template and loaded the bootstrap.min.scc file in vendors/assets/stylesheets/bootstrap.min.scc path and bootstrap.min.js in vendors/assets/javascripts/bootstrap.min.js
I've also referred these files in the app/assets/javascripts/application.js
Here is my application.js
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery.min
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require bootstrap.min
//= require_tree .
Here is my application.css
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require bootstrap.min
*= require_self
*/
But when I try to start up the server. I get the error and the server doesn't start.
Here is the error screenshot.
This is what is being recorded in logs
ActionView::Template::Error (couldn't find file 'bootstrap.min' with type 'text/css'
Checked in these paths:
/Users/mabhishek/rails_projects/instagram/app/assets/config
/Users/mabhishek/rails_projects/instagram/app/assets/images
/Users/mabhishek/rails_projects/instagram/app/assets/javascripts
/Users/mabhishek/rails_projects/instagram/app/assets/stylesheets
/Users/mabhishek/.rvm/gems/ruby-2.5.1/gems/jquery-rails-4.3.5/vendor/assets/javascripts
/Users/mabhishek/.rvm/gems/ruby-2.5.1/gems/coffee-rails-4.2.2/lib/assets/javascripts
/Users/mabhishek/.rvm/gems/ruby-2.5.1/gems/actioncable-5.2.4.2/lib/assets/compiled
/Users/mabhishek/.rvm/gems/ruby-2.5.1/gems/activestorage-5.2.4.2/app/assets/javascripts
/Users/mabhishek/.rvm/gems/ruby-2.5.1/gems/actionview-5.2.4.2/lib/assets/compiled
/Users/mabhishek/.rvm/gems/ruby-2.5.1/gems/turbolinks-source-5.2.0/lib/assets/javascripts
/Users/mabhishek/.rvm/gems/ruby-2.5.1/gems/rails-ujs-0.1.0/dist
/Users/mabhishek/rails_projects/instagram/node_modules
/Users/mabhishek/.rvm/gems/ruby-2.5.1/gems/bootstrap-sass-3.4.1/assets/stylesheets
/Users/mabhishek/.rvm/gems/ruby-2.5.1/gems/bootstrap-sass-3.4.1/assets/javascripts
/Users/mabhishek/.rvm/gems/ruby-2.5.1/gems/bootstrap-sass-3.4.1/assets/fonts
/Users/mabhishek/.rvm/gems/ruby-2.5.1/gems/bootstrap-sass-3.4.1/assets/images):
11: <%= csrf_meta_tags %>
12: <%= csp_meta_tag %>
13: < link="vendor/assests/stylesheets/bootstrap.min.scss" rel="stylesheets">
14: <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
15: <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
16: </head>
17: <body>
app/assets/stylesheets/application.css:14
app/views/layouts/application.html.erb:14:in `_app_views_layouts_application_html_erb__895371573775794232_70354650107640'
Adding config/application.rb
require_relative 'boot'
require 'rails/all'
require 'sprockets/railtie'
# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(*Rails.groups)
module InstagramClone
class Application < Rails::Application
# Initialize configuration defaults for originally generated Rails version.
config.load_defaults 5.2
# Settings in config/environments/* take precedence over those specified here.
# Application configuration can go into files in config/initializers
# -- all .rb files in that directory are automatically loaded after loading
# the framework and any gems in your application.
end
end
Here is the assets.rb
# Be sure to restart your server when you modify this file.
# Version of your assets, change this if you want to expire all your assets.
Rails.application.config.assets.version = '1.0'
# Add additional assets to the asset load path.
# Rails.application.config.assets.paths << Emoji.images_path
# Add Yarn node_modules folder to the asset load path.
Rails.application.config.assets.paths += [
Rails.root.join('vendor', 'assets').to_s
]
# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in the app/assets
# folder are already added.
# Rails.application.config.assets.precompile += %w( admin.js admin.css )
Can someone please help me out.
You need to precompile your assets so that they are available in the assets pipeline.
Run the command: rails assets:precompile
Restart your rails server afterward.
I am using Middleman for a project and would like to only load certain JS files on certain pages. How can I configure the asset pipeline to only load specific JS files? I've found answers for the asset pipeline in rails applications (ex. http://blog.seancarpenter.net/2012/11/05/page-specific-javascript-with-the-asset-pipeline/) but I'm not sure how to apply this Middleman.
Thanks!
//= require_tree ./general
//= require_tree ./ckeditor
//= require_tree ./custom
In application.js file include the path of those js files which you want to load by default for all the applications. In the above code ./general will include all the js files under app/assets/javascripts/general/ and so on.
If you want certain js file to be loaded in your pre-defined view page then you need to call it explicitly from that view page as:
<% content_for :scripts do %>
<%= javascript_include_tag 'your_custom_js_file_name' %>
<% end %>
The file location of your_custom_js_file_name.js file is app/assets/javascript
We need to yield script in the layout file so, include this:
<%= yield :scripts %>
Besides you need to specify to compile in for production environment. So in production.rb do this:
config.assets.precompile += [ "your_custom_js_file_name.js", "your_custom_js_file_name2.js"]
Credit goes to: site
I understand the "why" part of "why do all js / css files get included in rails asset pipeline" as explained here.
However, that's not always desirable, is it? For instance, I have a non-standard layout I use just to display items that require Google maps. I don't want all the external gmap libraries included on all pages-- it's not necessary and is just wasteful-- but if I don't include them on every page, the calls to the google api in the map.js.coffee files will throw errors.
Is there a way to force the map.js.coffee ONLY show on a maps view?
There is one solution, the javascript_include_tag:
# assets/javascripts/
# user.js.coffee
# form.js.coffee
# map.js.coffee
# views/users/location.html.haml
= javascript_include_tag 'map'
But defining //= require_tree . in the assets/application.js does include all JS files, am I right?
So doing this would include the file twice, right?
Update: Following this RailsCast ( http://railscasts.com/episodes/279-understanding-the-asset-pipeline ) We might be able to create a public folder, containing all "shared" js files, and require it: //= require_tree ./public
To combine what the other answers suggested and other sources on the web advised, it seems like the best answer to this situation is to do the following:
Create subdirectories in the assets/javascripts and assets/stylesheets directories as well as maps.js and maps.css files. In my example above you'd have
app/
assets/
javascripts/
application.js
maps.js
maps/
site/
stylesheets/
application.css
maps.css
maps/
site/
Create any needed page-specific javascripts / stylesheets in those directories.
The maps.js file would look like:
//= require_tree ./maps
which will include all items in the maps directory / subdirectories.
The application.js is the same but includes the "main" site resources as well as any site-specific items:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require_tree ./site
Create a maps layout file called views/layouts/maps.html.erb, and in the layout file, use the javascript_include_tag to change which js / css file gets parsed for includes:
views/layouts/maps.html.erb:
<%= stylesheet_link_tag "maps", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "maps", "data-turbolinks-track" => true %>
views/layouts/application.html.erb:
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
Make sure the MapsController specifies the maps layout!
class MapsController < ApplicationController
layout "maps"
Notice the line in application.html.sim:
= javascript_include_tag "application"
You want to include a different set of javascripts in a different layout map.html.slim, then create another javascript file, such as map.js.coffee, and in this file you included only files you need. Now the layout file needs to use this
= javascript_include_tag "map"
When I want to include all JavaScript files from the folder js with the following code the url looks like javascripts/public/javascripts/js/....
<%= javascript_include_tag *Dir["public/javascripts/js/**/*.js"] %>
When I change the code to <%= javascript_include_tag *Dir["js/**/*.js"] %> the url looks like js/...?
How do I have to change my code so that the url is javascripts/js/...?
Thank you very much for your support!
If you're using rails version 3.1 and above then you can put your all js files inside a folder like app/assets/javascript/my_folder and make one js manifest file and put //= require_tree . line inside that file. Now open config/application.rb file and add this line.
config.assets.precompile += %w( my_folder/manifest_file_name.js)