I've just created a test project and been reading about the assets pipeline. So far, the assets are being loaded but not applied, as if I go to localhost:3000/assets/application.css I see the style I've written but I don't see the rules applied to the DOM.
Rails version: 4.2.1
Ruby version: 2.2.0
The structure is the following:
app
--- assets
------ images
------ javascripts
------ stylesheets
------------ application.css
------------ todos.css
The content of application.css is the following:
/*
*= require_tree .
*= require_self
*/
The content of application.js the following:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
The rails APP is very simple, as it's just a model (todo.rb), the controller for that model (todos_controller.rb) with the following content:
class TodosController < ActionController::Base
def index
#todos = Todo.all
end
end
Very simple, and for the view I'm using Slim templates with the following hierarchy:
app
--- views
------ todos
--------- index.slim
The content of application.html.erb is the following:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
And for the view:
.todos
- #todos.each do |todo|
.title = todo.title
.content = todo.content
Is there about the assets pipeline I'm missing? Thanks in advance.
Rename index.slim into index.html.slim.
P.S. convention over configuration
The TodosController must inherit from ApplicationController, not from ActionController::Base
class TodosController < ApplicationController
def index
#todos = Todo.all
end
end
Related
I am trying to add the toastr gem to my Rails 6 project. I also have the devise gem installed.
I do not understand webpacker and how to make toastr-rails webpacker friendly.
I have read all the documentation. Don't tell me to read the documentation.
This is what I've tried:
yarn add toastr
Then in my assets/packs/application.js file, I added:
#import 'toastr'
And in my assets/stylesheets/application.scss file, I added:
*= require_toastr
Finally my layouts/application.html.erb has this code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<% unless flash.empty? %>
<script type="text/javascript">
<% flash.each do |f| %>
<% type = f[0].to_s %>
toastr['<%= type %>']('<%= f[1] %>');
<% end %>
</script>
<% end %>
<%= yield %>
</body>
</html>
I don't get the toast notifications.
I don't get any notifications.
But this code works on my Rails 4 project.
If you want to add toastr with toastr-rails gem, use asset pipeline instead of webpack.
Here are the steps to add toastr with the webpack.
Add toastr js with yarn
yarn add toastr
Require toastr in app/javascript/packs/application.js. I added it to the global to avoid errors
global.toastr = require("toastr")
Create app/javascript/stylesheets/application.scss file to import custom or library css files
Import toastr css in app/javascript/stylesheets/application.scss
#import 'toastr'
Import app/javascript/stylesheets/application.scss file in app/javascript/packs/application.js
import "../stylesheets/application"
I wrote a helper method for flash messages. Add this method to application_helper.rb or another helper
def toastr_flash
flash.each_with_object([]) do |(type, message), flash_messages|
type = 'success' if type == 'notice'
type = 'error' if type == 'alert'
text = "<script>toastr.#{type}('#{message}', '', { closeButton: true, progressBar: true })</script>"
flash_messages << text.html_safe if message
end.join("\n").html_safe
end
Add toastr_flash method to layouts/application.html.erb or wherever you want
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<%= yield %>
<%= toastr_flash %>
</body>
</html>
first you need to add toastr to your project
using yarn
yarn add toastr
using npm
npm -i toastr
after that you can see in your node_modules the file toastr (node_modules/toastr) inside that have the toastr.scss file and toastr.js file, well let's import it
app/assets/application.scss
#import "toastr/toastr";
app/javascripts/packs/application.js
toastr = require("toastr")
or
import toastr from 'toastr/toastr';
I'm working on a simple ruby on rails application and I am getting the following error:
TypeError: Cannot read property 'process' of undefined (in/home/saasbook/Documents/projects/Bookkeeper/app/assets/stylesheets/application.css.sass)
The Extracted source is as follows:
<html>
<head>
<title>Bookkeeper</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> //Highlighted error line in extract
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
This error occurred after I added Bootstrap Sass by Using the Bootstrap Sass plugin and following this tutorial
Below the extract its stated that the error is at:
app/views/layouts/application.html.erb:5:in_app_views_layouts_application_html_erb__226809778_88444660'
My code
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Bookkeeper</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> //Highlighted error line in extract
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
application.css.sass
/*
* 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 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
*/
#import "bootstrap-sprockets"
#import "bootstrap"
The page shows this title in the red border on top, is this any help?
ExecJS::ProgramError in Portal#index
There seems to be an issue with version 5.0 of the autoprefixer-rails gem. Try downgrading to 4.0.2.2.
https://github.com/ai/autoprefixer-rails/issues/47
This will pop up if you are using Node instead of RubyRacer as your JS runtime.
EDIT -
This has been fixed in the latest version of autoprefixer.
bundle update autoprefixer-rails
This has been fixed in the latest release of autoprefixer. Upgrade using the following command -
bundle update autoprefixer-rails
For some reason, the page doesn't get updated after sending a message. It works only after refreshing the page manually. I have partially followed this tutorial http://railscasts.com/episodes/316-private-pub but something is not right. Here are my files:
app/controllers/main_controller.rb
class MainController < ApplicationController
def application
#messages = Message.all
end
end
app/controllers/messages_controller.rb
class MessagesController < ApplicationController
def create
#message = Message.create(message_params)
end
private
def message_params
params.require(:message).permit(:content)
end
end
app/views/layouts/application.html.erb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<%= viewport_meta_tag %>
<title><%= content_for?(:title) ? yield(:title) : "Theater" %></title>
<%= csrf_meta_tags %>
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.3.0/respond.js" type="text/javascript"></script>
<![endif]-->
<%= stylesheet_link_tag "application", :media => "all" %>
<!-- For third-generation iPad with high-resolution Retina display: -->
<!-- Size should be 144 x 144 pixels -->
<%= favicon_link_tag 'apple-touch-icon-144x144-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '144x144' %>
<!-- For iPhone with high-resolution Retina display: -->
<!-- Size should be 114 x 114 pixels -->
<%= favicon_link_tag 'apple-touch-icon-114x114-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '114x114' %>
<!-- For first- and second-generation iPad: -->
<!-- Size should be 72 x 72 pixels -->
<%= favicon_link_tag 'apple-touch-icon-72x72-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '72x72' %>
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<!-- Size should be 57 x 57 pixels -->
<%= favicon_link_tag 'apple-touch-icon-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png' %>
<!-- For all other devices -->
<!-- Size should be 32 x 32 pixels -->
<%= favicon_link_tag 'favicon.ico', :rel => 'shortcut icon' %>
<%= javascript_include_tag "application" %>
</head>
<body data-no-turbolink="true">
<div id="wrap">
<%= bootstrap_flash %>
<%= yield %>
<div id="push"></div>
</div>
<div id="footer">
<div class="container" align="center">
<p id="footer-content">Footer</p>
</div>
</div>
</body>
</html>
app/views/main/application.html.erb
<div class="container-fluid">
<div class="row">
<div class="col-md-4">Chat column
<ul id="chat">
<%= render #messages %>
</ul>
<%= form_for Message.new, remote: true do |f| %>
<%= f.text_field :content %>
<%= f.submit "Send" %>
<% end %>
<%= subscribe_to "messages/new" %>
</div>
</div>
</div>
app/views/messages/create.js.erb
<% publish_to "messages/new" do %>
$("#chat").append("<%= j render(#message) %>");
$("#chat").animate({
scrollTop: $("#chat").height()},
"fast");
<% end %>
$("#new_message")[0].reset();
app/views/messages/_message.html.erb
<li>
<span class="created_at"><%= message.created_at.strftime("%H:%M") %></span>
<%= message.content %>
</li>
config/routes.ru
Rails.application.routes.draw do
resources :messages
get 'main/application'
root 'welcome#index'
end
app/models/message.rb
class Message < ActiveRecord::Base
end
Gemfile
source 'https://rubygems.org'
gem 'thin'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.1.1'
# Use postgresql as the database for Active Record
gem 'pg'
# 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
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring', group: :development
gem 'private_pub'
gem 'rails_12factor', group: :production
gem 'bootstrap-sass', '~> 3.2.0'
gem 'autoprefixer-rails'
gem 'bootstrap-sass-extras'
app/assets/javascripts/application.js
//= require jquery
//= require bootstrap-sprockets
//= require private_pub
//= require jquery_ujs
//= require turbolinks
//= require_tree .
I have also ran
rails g private_pub:install
rackup private_pub.ru -s thin -E production
as private_pub requires it.
Here is a piece of server log that represents the POST after clicking the 'Send' button:
Started POST "/messages" for 127.0.0.1 at 2014-08-01 19:36:44 +0300
Processing by MessagesController#create as JS
Parameters: {"utf8"=>"✓", "message"=>{"content"=>"Testing"}, "commit"=>"Send"}
(0.4ms) BEGIN
SQL (1.1ms) INSERT INTO "messages" ("content", "created_at", "updated_at") VALUES ($1, $2, $3) RETURNING "id" [["content", "Testing"], ["created_at", "2014-08-01 16:36:44.301042"], ["updated_at", "2014-08-01 16:36:44.301042"]]
(1.0ms) COMMIT
Rendered messages/_message.html.erb (0.6ms)
Rendered messages/create.js.erb (7.6ms)
Completed 200 OK in 21ms (Views: 11.7ms | ActiveRecord: 2.9ms)
I hope I have provided information enough. If not, please request more. Thank you in advance.
I think you're just missing this in your messages controller:
respond_to do |format|
format.js #calls create.js.erb
end
Some things I would try:
Make sure private_pub is actually running on the server. netstat -lntp will show all listening TCP sockets by number, along with the program running them. You should see a ruby or rails app listening on 9292.
Make sure port 9292 requests aren't being blocked by a firewall, either on the server or on your client. This will obviously depend on the OS on each.
Use the Developer Console of the client browser (for example in Chrome: F12, "Network" tab) to view the outgoing request to see what type of response it's getting. If that response is timing out, the request is never making it to your server.
If the request is indeed making it back, look for Javascript errors in the Developer Console.
I am quite new to Ruby on Rails and wanted to place my custom CSS file into the Devise (Sign Up View). I placed my global CSS into the application.js (Asset Pipeline) and placed 2 Helper functions in my
helpers/application_helper.rb
def javascript(*files)
content_for(:head_javascript) { javascript_include_tag(*files) }
end
def stylesheet(*files)
content_for(:head_stylesheet) { stylesheet_link_tag(*files) }
end
and my views/layouts/application.html.erb
<!DOCTYPE html>
<%
if (controller.controller_name == "sessions") && (controller.action_name == "new")
javascript 'theme/signup'
stylesheet 'theme/signup'
end
%>
<html>
<head>
<title>Mysite</title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
<%= yield(:head_stylesheet) %>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= yield(:head_javascript) %>
<%= csrf_meta_tags %>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<%= yield %>
</body>
</html>
Then I generated the Devise Views and adjusted my twitter bootstrap form
rails generate devise:views
And now want to place my signup.css inside the Signup View, but how?
So I created the Devise Controllers, to use my helper methods:
bash <(curl -s https://raw.github.com/foohey/cdc/master/cdc.sh)
Now I am stuck, because I my helpers don´t work with:
<%
if (controller.controller_name == "sessions") && (controller.action_name == "new")
javascript 'theme/signup'
stylesheet 'theme/signup'
end
%>
Is there an easy way in rails to handle custom css files? I am new to the asset pipeline concept and it is a bit confusing.
Thanks for help.
Have you heard about content_for? It is really useful for things like that. Inside you layout add:
<%= yield :head %>
inside your head tag. Then you can write the following inside the view (devise/sessions/new):
<% content_for :head do %>
javascript 'theme/signup'
stylesheet 'theme/signup'
<% end %>
This will perfectly separate your layout from single view concerns, and it should also fix the problem you're having.
You can place your custom css files in the css directory inside the public directory and inside the <head> tags of the view you want the custom css files to be you do this
<%= stylesheet_link_tag '/css/signup' %>
The signup.css will only be available to the signup view assuming that's where you place your stylesheet_link_tag
I think you want something like these:--
<% if (controller.controller_name == "sessions") && (controller.action_name == "new")%>
<%= stylesheet_link_tag "theme/signup"%>
<%= javascript_include_tag "theme/signup" %>
<% end %>
I get an error while trying to load any page:
ActionView::Template::Error (variable #fontAwesomeEotPath_iefix is undefined)
(in /app/assets/stylesheets/bootstrap_and_overrides.css.less)):
2: <html>
3: <head>
4: <title>Program</title>
5: <%= stylesheet_link_tag "application", :media => "all" %>
6: <%= javascript_include_tag "application" %>
7: <%= csrf_meta_tags %>
8: </head> app/views/layouts/application.html.erb:5:in `_app_views_layouts_application_html_erb__242882506_70513990' app/controllers/problems_controller.rb:7:in `index'
What I did before? Just run bundle update
Because of bootstrap update I will need to update bootstrap's assets:
rails g bootstrap:install -f
There are a new line in assets:
+#fontAwesomeEotPath_iefix: asset-path("fontawesome-webfont.eot#iefix");
This also happened to me. This is because, When you update your Bootrap gem, You should update Its js and less css. Do
rails g bootstrap:install -f
This will add a line to your app/assets/css/bootstrap_overrides.css.less file
like
#fontAwesomeEotPath_iefix: asset-path("fontawesome-webfont.eot#iefix");