I am using Ruby On Rails and have ActiveAdmin on top of that on a windows machine. I don´t think ActiveAdmin has anything to do with it, but I am just saying.
The Javascript file that is included via HTML is /assets/active_admin.js and the manifest file itself looks like this:
//= require active_admin/base
//= require just_datetime_picker/nested_form_workaround
When I run my Rails application and open http://localhost:3000/assets/active_admin.js, the log tells me, that active_admin.js was compiled, but the file still looks just like the manifest just with an added semicolon at the end:
//= require active_admin/base
//= require just_datetime_picker/nested_form_workaround
;
Why is no Javascript code included?
When I try to run the precompile pipeline manually via bundle exec rake assets:precompile RAILS_ENV=development, it actually creates all the CSS files, but the JS files still look like the one described above.
Since I am operating on a windows machine, I do not have the gem 'therubyracer' installed, but NodeJS. Also the bundle install works fine and I also do not get any errors.
Are you using Ruby v2.0? Try downgrading to 1.9.
Symptom: The JavaScript manifest file does not compile, no errors are shown; however, a mysterious semi-colon ; appears at the end of the file after "preprocessing" the assets.
Solution: Downgrade to Ruby v1.9.3!
See two other posts on the same topic.
My Rails Javascript manifest file neither compiles nor include any required files
Javascript manifest file "application.js" is not processed
What a sorry mess it is to be programming in 2013!
Related
When I run rake assets:prcompile RAILS_ENV=production, I am getting below error.But if i run in development mode it runs fine.
rake assets:precompile RAILS_ENV=production
rake aborted!
Uglifier::Error: fs redeclared
Environment
Rails 5.0.7
Ruby 2.4.1
Could someone helps to resolve this one
Got the issue.In my application.js file have below codes
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
As per functionality of require_tree, it will include current path's all js files recursively. Refer the link https://guides.rubyonrails.org/asset_pipeline.html#manifest-files-and-directives
In JavaScript files, Sprockets directives begin with //=. In the above case, the file is using the require and the require_tree directives. The require directive is used to tell Sprockets the files you wish to require. Here, you are requiring the files rails-ujs.js and turbolinks.js that are available somewhere in the search path for Sprockets. You need not supply the extensions explicitly. Sprockets assumes you are requiring a .js file when done from within a .js file.
The require_tree directive tells Sprockets to recursively include all JavaScript files in the specified directory into the output. These paths must be specified relative to the manifest file. You can also use the require_directory directive which includes all JavaScript files only in the directory specified, without recursion.
In my application , Gruntfile.js file was declared in two js folders.So, when I was doing the precompile,as the file was declared in two js , it throws error when it tried to compress that file
I have build a Ruby on rails app.I want to use polymer with my ruby on rails app. Cam anybody suggest some good resources to learn polymer with rails ?
Is it efficient to use polymer with ruby on rails ?
Please also suggest other better options than polymer, if any ?
I am using bower, so I expect you already have bower setup on your system.
(brew install node && npm install bower)
Set up you gems
gem 'bower-rails'
gem 'emcee'
bundle install
rails g bower_rails:initialize
rails g emcee:install
Setup your bower file. Below is what mine looks like:
asset 'angular'
asset 'angular-route'
asset 'angular-resource'
asset 'angular-mocks'
asset 'webcomponentsjs'
asset 'polymer', github: 'Polymer/polymer'
asset 'polymer-core-elements', github: 'Polymer/core-elements'
asset 'polymer-paper-elements', github: 'Polymer/paper-elements'
asset 'platform'
# Voice Synthesis and Recognition
asset 'voice-elements'
Figure out the ones you need and delete the rest.
rake bower:install
To download the components but take note that the files will be saved in vendor/assets/bower_components and not vendor/assets/components expected by emcee. So you will need to make symbolic link.
Setup symbolic links
first remove components i.e. rm -rf vendor/assets/components
then set up the symlink i.e. ln -s vendor/assets/bower_components vendor/assets/components
Now setup your assets
# app/assets/components/application.html
*= require polymer/polymer
# app/assets/javascripts/application.js
//= require angular/angular
//= require angular-route/angular-route
//= require angular-resource/angular-resource
//= require webcomponentsjs/webcomponents
//= require platform/platform
(Please note that I only included all I am using for testing. As stated before, remove those you don't need).
Just some house cleaning you jump off to start trying things out. Include Bower components in rake assets path.
# config/application.rb
config.assets.paths << Rails.root.join("vendor","assets","bower_components")
And that is about it for setup. Jump on it and start using it.
Include html import tag in your layout file
= html_import_tag "application", "data-turbolinks-track" => true
And call a sample polymer in your view
# sample.html.haml
================
%paper-tabs{:selected => "0", :scrollable => ""}
%paper-tab Skills
%paper-tab Experiences
%paper-tab Education
Ref
http://angular-rails.com/bootstrap.html
http://www.akitaonrails.com/2014/06/29/usando-polymer-com-rails#.VHcoW2SsV81
On deep searching on Google. I have found that 'emcee' is the best to use polymer with rails.
following are the options :-
nevir/polymer-rails
alchapone/polymer-rails
ahuth/emcee
also check- http://joshhuckabee.com/getting-started-polymer-ruby-rails
I've built a bower package for dealing with rails forms with polymer. It my come in handy, especially if you're going with to be building any kind of ajax forms or using nested attributes.
https://github.com/hobberwickey/polymer-rails-forms
To answer your more general question though, I've been working with Polymer and both Rails / Sinatra for a while now and it's a great tool for building out the front end of your application without relying heavily on erb / haml or other server-side templating.
You can use polymer-rails and polymer-elements-rails.
https://github.com/alchapone/polymer-elements-rails
https://github.com/alchapone/polymer-rails
I was first trying to use web components with bower-rails and emcee.
But I noticed that bower-rails isn't necessary, you just need to configure .bowerrc and bower.json then run bower install.
Also, emcee is no longer active which forces you to use an older version of sprockets.
It turns out polymer-rails has the same functionality as emcee.
Here is my current setup
Gemfile
gem 'polymer-rails'
install and initialize
bundle install
rails g polymer:install
app/views/layouts/application.html.erb
<html>
<head>
...
<%= html_import_tag 'application'%>
...
Download the bower.json file from elements.polymer-project.org and put it in the root of your app then run the command
bower install
Now your components should be in vendor/assets/components. Find all the .html files to include in the manifest. Some of the .html files are not the same name as the directory so it is a little tedious.
app/assets/components/application.html.erb
//= require polymer/polymer
//= require paper-scroll-header-panel/paper-scroll-header-panel
//= require paper-toolbar/paper-toolbar
//= require paper-tabs/paper-tabs
//= require paper-drawer-panel/paper-drawer-panel
//= require paper-icon-button/paper-icon-button
//= require iron-icons/iron-icons
//= require paper-card/paper-card
//= require paper-button/paper-button
...
Now make sure sprockets loads the assets
config/initializers/assets.rb
Rails.application.config.assets.paths << Rails.root.join('vendor', 'assets', 'components', '*')
Here is an example of how to use a component
<paper-card heading="Paper Card Example" image="<%= image_path 'example.jpg' %>">
<div class="card-content">This is an example of cards with polymer</div>
<div class="card-actions">
<paper-button raised>OK</paper-button>
</div>
</paper-card>
You can use polymer-elements-rails which has a lot of the components already and you can skip the bower.json, bower install, and load assets steps. The only problem is I had a hard time finding out what the require paths were and some of the components were missing (like google-apis). Hope this helps anyone trying to use polymer with rails!
In my application.js file, I have the following:
//= require jquery
//= require vendor
When I load up a Rails server with rails s the application.js file that is served still has the require statements at the top. I expect it to remove these lines and load the jquery file separately.
I'm using Rails 3.2.19. My RAILS_ENV is not set.
Though I'm not entirely sure that what you're doing doesn't work, I typically use //= require [name of js file]. e.g. //= require bootstrap.js when bootstrap.js is inside the vendors/javascript folder.
Are you using an old version of Ruby? Maybe something from before 1.9.3? I had similar before problems when upgrading Rails without upgrading Ruby.
Bug with sprockets 2.2.1
Updated to sprockets 2.2.2 (via bundle update sprockets) and it now works
I noticed that locally we were getting errors about 7 different jquery-ui images, e.g. ActionController::RoutingError (No route matches [GET] "/public/ui-bg_highlight-soft_100_eeeeee_1x100.png")
These assets do actually exist within the jquery-ui file structure.
I have found that changing the url's used within the jquery-ui framework css itself from "url(/images/ui-bg_highlight-soft_100_eeeeee_1x100.png" to "url(/assets/ui-bg_highlight-soft_100_eeeeee_1x100.png " or "url(ui-bg_highlight-soft_100_eeeeee_1x100.png " removes the error (though I had to also do a rake assets:precompile locally). However this seems like a bad approach and not the right thing to do.
What is the right approach to resolving these errors?
First off, I highly recommend using the jquery-ui-rails gem to easily roll jquery ui into the assets pipeline.
In your Gemfile:
group :assets do
gem 'jquery-ui-rails' # jquery ui
end
In your app/assets/stylesheets/application.css:
*= require jquery.ui.all
Note that you can only require the parts of jquery ui you use, like the progressbar or datepicker, ala jquery.ui.progressbar
And in app/assets/javascripts/application.js:
//= require jquery.ui.all
Now run bundle install and voila! You're set!
The final result was:
delete my local versions.
add the items to the jquery js and css manifest files.
use the jquery-ui-rails gems
Observe what path is 404 Not Found in your browser, and then make sure the query-ui theme's /images directory is either moved or linked to that path in the Rails app.
Example
I experience 404 for:
http://localhost:3000/assets/images/ui-icons_ffffff_256x240.png
My jquery-ui theme directory is in /vendor, so the real path to the images is:
RAILS_ROOT/vendor/assets/stylesheets/ui-lightness/images
So, to fix the 404, put a symbolic link to that directory where it's expected:
% cd vendor/assets/stylesheets
% ln -s ui-lightness/images images
Now, that URL serves the images.
My rails 3.1 app runs fine locally, but when I run it on Heroku the logs show Rails is not finding javascripts inside the vendors/assets/javascripts directory even though browsing them manually works.
I am using the plupload-rails3 gem, and the gem's javascripts are not loading on Heroku, but do load fine on my local dev machine.
In my assets/javascripts/application.js I have:
//= require_tree ../../../vendor/assets/javascripts/plupload-rails3
//= require_tree ../../../vendor/assets/stylesheets/plupload-rails3
//= require_tree ../../../vendor/assets/images/plupload-rails3
When I run my app on Heroku the logs show Rails trying to load and failing with each of the plupload javascripts, with a token identifier:
ActionController::RoutingError (No route matches [GET] "/assets/plupload-rails3/plupload/js/plupload.full-f4741a878138cea127e6b38b6a08cf12.js"):
So the plupload widget does not display on the page on Heroku (but does when I run locally).
However, if I manually browse that location (without the ID token):
http://MYAPPNAME.herokuapp.com/assets/plupload-rails3/plupload/js/plupload.full.js
I do see the file.
I have also tried precompiling the assets locally, then pushing to Heroku, with same result.
So something in my app is broken with Rails on Heroku accessing the vendor/assets pipeline.
(I do have config.assets.compile = true in my production.rb file. The original setting of false caused the app to crash when it failed to find the precompiled assets, at least now it doesn't crash, but it ignores the javascript widget.)
Application.js is a manifest file for javascript, you don't want to include images or css in it.
vendor/assets/javascripts should already be in the path it is searching so just include:
//= require_tree ./plupload-rails3
Edit:
you can do similar to include the css in application.css, images do not need to be included in a manifest.
Check out the Rails Guide: http://guides.rubyonrails.org/asset_pipeline.html and Ryan Bates Railscast http://railscasts.com/episodes/279-understanding-the-asset-pipeline for more info.
Edit2: just looked through the gem, did you run
bundle exec rake plupload_rails3:install_assets
To install the assets? If not, run that, then try the code above.