I'm following this tutorial, and from the moment it tells me to integrate bootstrap I'm lost. I don't know anything about bootstrap, so I can't really troubleshoot it. Nothing happens, the formatting continues to look like standard HTML without any css styling at all.
This is my application.css.scss file:
/*
*= require_self
*= require_tree .
*/
#import 'bootstrap';
This is my application.js file:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
this is my view file (home.html.haml):
.container
- if #tasks.empty?
%span.text-warning There are no tasks!
- else
%table.table.table-hover.table-bordered
%thead
%tr
%th Title
%th Created at
%th Completed
%tbody
- #tasks.each do |task|
%tr
%td
%strong= task.title
%td.text-info= task.created_at
%td.text-success= task.completed
I know this is really specific, but since I don't know anything about bootstrap I don't know what to focus on as the problem. I'm running Rails 4.0.4, and the bootstrap-sass gemfile is 2.3.2.0
I just created a test Rails 4.0.4 app, renamed the application.css file to application.css.scss and added your
#import 'bootstrap';
line. By the way, I switched to the most recent gem version:
gem 'bootstrap-sass', '~> 3.1.1.0'
And everything works fine.
Update your Gemfile, run bundle update, the restart the server and try again. It should work fine.
Related
I need to export a subset of my assets to some external sites. I've created a rake task to do that:
rake build:navbar
The problem is I cannot get the assets library to minify my library. Here's the code from my task method:
desc "Build navbar assets and markup for other sites."
task navbar: :environment do
# Set environment to production so pipeline will minify assets.
Rails.env = "production"
# Some setup code removed...
# How do we coax assets into minifying files?
Rails.application.config.assets.prefix = "../build/navbar/staging"
Rails.application.config.assets.js_compressor = :uglifier
Rails.application.config.assets.css_compressor = :sass
Rails.application.config.assets.digest = false
Rails.application.config.assets.compress = true
Rails.application.config.assets.debug = false
Rails.application.config.assets.paths = [Rails.root.join('/app/assets/javascripts'),
Rails.root.join('/app/assets/stylesheets/navbar')]
Rails.application.config.assets.precompile = ['navbar.js', 'navbar.css']
# Compile now.
Rake::Task['assets:clean'].invoke
Rake::Task['assets:precompile'].invoke
# Cleanup code removed...
end
It will generated a compressed version of my assets (navbar.css.gz), but not a minified version (navbar.min.css).
I've googled this up and down and it seems like this recipe of settings should do the trick. What am I missing?
I think I've identified the underlying problem. The assets pipeline task, i.e. sprockets-rails, doesn't fully respect config settings. It seems to override some settings depending on the Rails environment. And you can't simply change the Rails environment within a rake task.
The goal, again, is to port a subset of the Rails application's assets for another project using this rake command:
rake build:navbar
Here's some sample code that shows how I worked around these issues:
namespace :build do
desc "Build navbar assets and markup."
task navbar: :environment do
# Prep Builder
builder = Navbar::Builder.new(target: target)
builder.prep_build
# Why this? Setting Rails.env or ENV['RAILS_ENV'] didn't work.
system("rake build:navbar_assets RAILS_ENV=production")
builder.generate_markup_file
builder.move_output_files_to_build_directory
builder.cleanup
end
desc "Build navbar assets."
task navbar_assets: :environment do
# Configure the asset pipeline to compile minified files.
# NOTE: Sprockets only minifies files in production environment (or won't
# do it in development) so this assumes RAILS_ENV is set to production
# on the command line.
Rails.application.config.assets.prefix = "../build/navbar/staging"
Rails.application.config.assets.paths = [Rails.root.join('app/assets/javascripts'),
Rails.root.join('app/assets/stylesheets')]
Rails.application.config.assets.precompile += ['navbar.js', 'navbar.css']
# Let it rip.
Rake::Task['assets:clobber'].invoke
Rake::Task['assets:precompile'].invoke
end
end
There were also some issues with file-path-building in the code in the question. Those have been corrected.
I am trying to add login-logout functionality to my rails app. For that I added bcrypt gem for password encryption and also access controller. Now when I run it locally, I get an error message. My app was running fine before adding the above functionality.
Error Message:
TypeError: Object doesn't support this property or method
(in C:/DevKit/lib/ruby/gems/1.9.1/gems/turbolinks-2.5.3/lib/assets/javascripts/turbolinks.js.coffee)
Extracted source (around line #8):
<head>
<title>PostApp</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track'=>true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track'=>true %> ----> Line 8
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<%= csrf_meta_tags %>
Gemfile:
source 'http://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.1.4'
# Use sqlite3 as the database for Active Record
group :development do
gem 'sqlite3'
end
group :production do
gem 'pg'
end
# Use SCSS for stylesheets
gem 'sass-rails', '~> 4.0.3'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .js.coffee assets and views
gem 'coffee-rails', '~> 4.0.0'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc
# Use ActiveModel has_secure_password
gem 'bcrypt', '~> 3.1.7'
I don't know what kind of type error I am getting. Any idea what might be going on?
Thanks,
Chuchoo
There is a problem with coffee-script-source 1.9.0 running on windows.
It seems you have to add this to your gemfile:
gem 'coffee-script-source', '1.8.0'
then do
bundle update coffee-script-source
I was having this same issue and I fixed it by adding the following code to config\initializer\assets.rb
Rails.application.config.assets.precompile += %w( application.css )
Install node.js x86 version (Not x64 version even if have 64-bit computer) You can download it from https://nodejs.org/en/download/
All the other answers are not neccesary.
No need for "coffee-script-source" or "execjs"
No need to modify even execjs files
No need to add path for Node.js as x86 adds it automatically
After installing node.js, you need to restart the rails server AND the CMD shell where it is running, to update the path it will see.
Just commenting this line in the above code segment solved my problem.
<%=j avascript_include_tag 'application', 'data-turbolinks-track'=>true %>
Not sure if this is a preferred solution but certainly helped me move forward.
#Chuchoo, commenting the <%=javascript_include_tag 'application', 'data-turbolinks-track'=>true %> solves the issue.
For the many newbies out there, more details on how to get to the solution.
Go to your app directory and access the application.html.erb file from your_app>app>views>layouts>application.html.erb and comment the javascript on line 6.
<!--%= javascript_include_tag 'application', 'data-turbolinks-track' => true %-->
Refresh your page and you are good to go.
uncomment (app/assets/javascripts/application.js)
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
Go to your app directory and then open application.html.erb file inside app/views/layouts and comment these two lines (5th and 6th)like this:
<!-- %= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> -->
refresh your webpage ,and Your problem is solved!
Hello I had the same problem and you can make this : https://www.youtube.com/watch?v=N5i94L17KPo It works now for me.
I am trying to use log4r with rails 4 and neo4j. I have log4r with Active record and it works fine but I am unable to get it working with neo4j.
Main problem which I think is the logger method which is not available for neo4j. I am using gem "neo4j", "3.0.0.alpha.7" gem and "log4r", "1.1.10".
Error:
config/application.rb:59:in `<class:Application>': undefined method `logger=' for Neo4j::ActiveNode:Module (NoMethodError)
Here is the code on :
application.rb
require File.expand_path('../boot', __FILE__)
# Pick the frameworks you want:
require "active_model/railtie"
require "action_controller/railtie"
require "action_mailer/railtie"
require "action_view/railtie"
require "sprockets/railtie"
require 'neo4j/railtie'
require "rails/test_unit/railtie"
require 'rails/all'
require 'log4r'
require 'yaml'
require 'log4r/yamlconfigurator'
require 'log4r/outputter/datefileoutputter'
include Log4r
# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(*Rails.groups)
module NewClarity
class Application < Rails::Application
config.generators do |g|
g.orm :neo4j
end
config.neo4j.session_type = :server_db
config.neo4j.session_path = 'http://localhost:7474'
log4r_config= YAML.load_file(File.join(File.dirname(__FILE__),"log4r.yml"))
log_cfg = YamlConfigurator
log_cfg.decode_yaml( log4r_config['log4r_config'] )
log = Log4r::Logger['rails']
#config.logger = Log4r::Logger['rails']
Neo4j::ActiveNode.logger = Log4r::Logger['rails']
config.log_level = :unknown
end
end
There is no logging support currently in the 3.0.x version, but I added a github issue on it https://github.com/andreasronge/neo4j/issues/374
I'm using followings:
Rails 4.1.0
ruby 2.1.1p76 (2014-02-24 revision 45161) [x86_64-linux]
rvm 1.25.25 (stable) by Wayne E. Seguin ,
Michal Papis [https://rvm.io/]
My Gemfile:
source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.1.0'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 4.0.3'
gem 'bootstrap-sass-extras'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .js.coffee assets and views
gem 'coffee-rails', '~> 4.0.0'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring', group: :development
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use unicorn as the app server
# gem 'unicorn'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
# Use debugger
# gem 'debugger', group: [:development, :test]
and i have done the following tasks to achieve bootstrap-sass-fluid layout through my railsapp :
bundle install
rails g bootstrap:install
rails g bootstrap:layout application fluid
rails g scaffold Post title:string description:text
rake db:migrate
rails g bootstrap:themed Posts
and i have these files in my assests folder under my rails app :
/home/pallavsharma/Workspace/testapp/app/assets/stylesheets/application.css
/home/pallavsharma/Workspace/testapp/app/assets/stylesheets/posts.css.scss
/home/pallavsharma/Workspace/testapp/app/assets/stylesheets/scaffolds.css.scss
but still i dont have my bootstrap layout in my app
My application.css file contents:
/*
This is a manifest file that'll be compiled into application.css,
which will include all the files
listed below.
*
Any CSS and SCSS file within this directory,
lib/assets/stylesheets, vendor/assets/stylesheets,
or vendor/assets/stylesheets of plugins, if any, can be referenced
here using a relative path.
*
Blockquote
* 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 styles
defined in the other CSS/SCSS files in this directory. It is
generally better to create a new
file per style scope.
*
*= require_tree .
*= require_self
*/
What else needs to be mentioned please tell.
application.css.scss should be:
/*
*= require bootstrap
*= require_tree .
*= require_self
*/
Also need to mention this gem in gemfile
gem 'bootstrap-sass', '~> 3.1.1'
then
bundle install
and it works.
I am using fontawesome 3.2.1 and bootstrap 3.0.0 in my rails 4.0.1 project. All my assets are located in vendor/assets.
the problem is that my fontawesome is working in development mode when when i compile my assets(production env) and run the server in production env, its not able to load fontawesome. the errors are as
Started GET "/assets/fontawesome-webfont.svg" for 127.0.0.1 at 2014-01-08 11:48:55 +0530
ActionController::RoutingError (No route matches [GET] "/assets/fontawesome-webfont.svg"):
actionpack (4.0.1) lib/action_dispatch/middleware/debug_exceptions.rb:21:in `call'
actionpack (4.0.1) lib/action_dispatch/middleware/show_exceptions.rb:30:in `call'
the assets are as
$ls vendor/assets/
=> fonts images javascripts stylesheets
$ls vendor/assets/*
=> vendor/assets/fonts:
FontAwesome.otf fontawesome-webfont.ttf glyphicons-halflings- regular.svg
fontawesome-webfont.eot fontawesome-webfont.woff glyphicons-halflings- regular.ttf
fontawesome-webfont.svg glyphicons-halflings-regular.eot glyphicons-halflings-regular.woff
vendor/assets/images:
bg_direction_nav.png bxslider search-icon.jpg
vendor/assets/javascripts:
bootstrap bxslider fancybox others revolution_slider
vendor/assets/stylesheets:
bootstrap bxslider fancybox font_awesome others revolution_slider
$ls vendor/assets/stylesheets/bootstrap/
=> bootstrap.min.css
$ls vendor/assets/stylesheets/font_awesome/
=> font-awesome.css
my application.css is as
$cat app/assets/stylesheets/application.css
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require bootstrap/bootstrap.min.css
*= require others/theme.css
*= require others/bootstrap-reset.css
*= require font_awesome/font-awesome.css
*= require bxslider/jquery.bxslider.css
*= require fancybox/jquery.fancybox.css
*= require revolution_slider/rs-style.css
*= require revolution_slider/settings.css
*= require others/flexslider.css
*= require others/style.css
*= require others/style-responsive.css
*= require_self
*/
fontawesome are loaded in font-awesome.css as
#font-face {
font-family: 'FontAwesome';
src: url('/assets/fontawesome-webfont.eot?v=3.2.1');
src: url('/assets/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('/assets/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('/assets/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('/assets/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
font-weight: normal;
font-style: normal;
}
glyphicons are loaded in bootstrap.min.css as
#font-face{
font-family:'Glyphicons Halflings';
src:url('/assets/glyphicons-halflings-regular.eot');
src:url('/assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-Opentype'), url('/assets/glyphicons-halflings-regular.woff') format('woff'),url('/assets/glyphicons-halflings-regular.ttf') format('truetype'),url('/assets/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg')}
i did try couple of solution like prepending 'font' or 'assets' to 'url' but none worked.
--UPDATE
contents of config/application.rb
config.assets.enabled = true
config.assets.version = '1.0'
config.assets.paths += ["#{config.root}/vendor/assets/fonts", "#config.root}/app/assets/images/**", "#{config.root}/vendor/assets/images"]
config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif *.eot *.svg *.ttf *.otf *.woff vendor/assets/stylesheets/**/* vendor/assets/fonts/*)
["#{config.root}/vendor/assets/javascripts", "#config.root}/vendor/assets/stylesheets"].each do |d|
config.assets.precompile += Dir.glob("#{d}/*").map{|f| "#{f.gsub(d + '/', '')}/**/*" if File.directory?(f)}.compact
I solved the problem as specified below.
1) Firstly, dont refer assets inside .css file. Rename the file to .css.scss. Thats the same extension whenever u create controller and it creates assets for that controller.(javascript and css). There are multiple applications to convert css to scss. Use them if the css is large.
2) use font-path whenever you want to refer a font inside a stylesheet. ie. use methods provided by rails to refer to assets rather than using 'src'
eg
#font-face {
font-family: 'MuseoSans-700';
src: url(font-path('museoSans/244DD4_0_0.eot'));
src: url(font-path('museoSans/244DD4_0_0.eot?#iefix')) format('embedded-opentype');
src: url(font-path('museoSans/244DD4_0_0.woff')) format('woff');
src: url(font-path('museoSans/244DD4_0_0.ttf')) format('truetype');
}
In the above code, my file is as "app/assets/stylesheets/fonts.scss" and my fonts are located in
$ls vendor/assets/fonts/
fontawesome museoSans museoSans500
$ls vendor/assets/fonts/museoSans
244DD4_0_0.eot 244DD4_1_0.ttf 244DD4_2_0.woff 244DD4_4_0.eot 244DD4_5_0.ttf 244DD4_6_0.woff 244DD4_8_0.eot 244DD4_9_0.ttf
244DD4_0_0.ttf 244DD4_1_0.woff 244DD4_3_0.eot 244DD4_4_0.ttf 244DD4_5_0.woff 244DD4_7_0.eot 244DD4_8_0.ttf 244DD4_9_0.woff
244DD4_0_0.woff 244DD4_2_0.eot 244DD4_3_0.ttf 244DD4_4_0.woff 244DD4_6_0.eot 244DD4_7_0.ttf 244DD4_8_0.woff
244DD4_1_0.eot 244DD4_2_0.ttf 244DD4_3_0.woff 244DD4_5_0.eot 244DD4_6_0.ttf 244DD4_7_0.woff 244DD4_9_0.eot
3) During asset precompilation, the helpers like 'font-path' or 'asset-path' help in pointing to the right asset. ie. if u specify it as
src: url('/assets/museoSans/244DD4_0_0.eot'));
this is still going to be the same in the compiled asset. it should ideally be
src: url('/assets/museoSans/244DD4_0_0-67652745236457645234dghfhsagfd64354.eot'));
You can 'grep' and check out the compiled file in "public/assets".
4) another way of making sure the assets are loading is the to call them from url.
5) Please set 'config.assets.compress = false' in your production or staging env file and run the application locally in prod/staging env so as the check the views to make sure that the assets are loading.
You can checkout https://github.com/joshsoftware/website/commit/859f2709180e9fb0aac59549d64bd4351a2842b3 commit for more understanding.
Your svg doesn't seem to be compiled, the fingerprint seems missing except if you set:
config.assets.digest = false
I was getting the same " no routes match GET" after precompiling. you can try to add the svg here in your config/application.rb:
config.assets.precompile += %w(*.svg)
And then retry a:
rake assets:precompile RAILS_ENV=production
In my case a simple rake assets:precompile wasn't enough i needed to specify the RAILS_ENV and RAILS_GROUPS (If the version of rails is lower than 4).
Normally the compiled assets are found in the public/assets directory.
I hope it helps
UPDATE:
Another idea coming from my experience with ckeditor with rails 4 in production. The assets compilation with digest is not working (https://github.com/galetahub/ckeditor). You need to add a rake task that copies/modify some files in the public/assets directory after compilation. Here is the code:
namespace :ckeditor do
desc 'Create nondigest versions of some ckeditor assets (e.g. moono skin png)'
task :create_nondigest_assets do
fingerprint = /\-[0-9a-f]{32}\./
for file in Dir['public/assets/ckeditor/contents-*.css', 'public/assets/ckeditor/skins/moono/*.png']
next unless file =~ fingerprint
nondigest = file.sub fingerprint, '.' # contents-0d8ffa186a00f5063461bc0ba0d96087.css => contents.css
FileUtils.cp file, nondigest, verbose: true
end
end
end
# auto run ckeditor:create_nondigest_assets after assets:precompile
Rake::Task['assets:precompile'].enhance do
Rake::Task['ckeditor:create_nondigest_assets'].invoke
end
You can easily replace ckeditor with fontawsome.