I tried to link private javascript code for jquery for my app in according to the way of Rails6. But, it has been not linked automaticaly like as Asset pilplene in Sprocket.
Actualy only application.js except other private js files on pacs directory is linked with "javascript_pack_tag 'application'" in the layout view.
So, I can be available by linking manualy the private javascript codes compiled in public/packs directory into the layout view.
*install JQuery
yarn add jquery
*app/javascript/packs/application/click_test.js
$(document).ready(function() {
$('h1').on('click', function() {
console.log('Wellcome to the World');
$(this).css('background-color', 'green');
$(this).css('color', 'white');
});
});
*config/webpacker.yml
default: &default
source_path: app/javascript
source_entry_path: packs
public_root_path: public
public_output_path: packs
cache_path: tmp/cache/webpacker
check_yarn_integrity: false
webpack_compile_output: false
# Additional paths webpack should lookup modules
# ['app/assets', 'engine/foo/app/assets']
resolved_paths: []
.......
*config/webpack/development.js
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const environment = require('./environment')
const webpack = require('webpack')
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery'
})
)
module.exports = environment.toWebpackConfig()
*app/javascript/packs/application.js
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
require("jquery")
*app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>JqueryTest</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
I changed code manualy as following, and jquery can work.
<!DOCTYPE html>
<html>
<head>
<title>JqueryTest</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<script src="/packs/js/application/click_test-cc5b88be7c8ba2fc22b8.js" data-turbolinks-track="reload">
</script>
</head>
<body>
<%= yield %>
</body>
</html>
*public/packs/manifest.json
{
"aplication/click_test.js": "/packs/js/aplication/click_test-cc5b88be7c8ba2fc22b8.js",
"aplication/click_test.js.map": "/packs/js/aplication/click_test-cc5b88be7c8ba2fc22b8.js.map",
"application.js": "/packs/js/application-678a934fafa8cabf4c10.js",
"application.js.map": "/packs/js/application-678a934fafa8cabf4c10.js.map",
"entrypoints": {
"aplication/click_test": {
"js": [
"/packs/js/application/click_test-cc5b88be7c8ba2fc22b8.js"
],
"js.map": [
"/packs/js/aplication/click_test-cc5b88be7c8ba2fc22b8.js.map"
]
},
"application": {
"js": [
"/packs/js/application-678a934fafa8cabf4c10.js"
],
"js.map": [
"/packs/js/application-678a934fafa8cabf4c10.js.map"
]
}
}
}
In Rails6, I'd like to know the best way to link JQuery code smartly like sprocket automatically.
Thanks for advance
Files in the new for Rails 6 app/javascript/packs directory are treated as packs' entry point. So you should put click-test.js in (say) app/javascript/features directory and add to app/javascript/packs/application.js
import 'features/click-test'
By the way. When using Rails turbolinks, jQuery initialization code should be subscribed to turbolinks:load instead of document:ready
Related
I'm trying to install Tailwind CSS in a RoR 6.0.3 Ruby 3.0.0 project, but cannot seem to have it work. I don't get any error messages, but I'm just not seeing any update to the styling in the output on localhost.
ANy guidance, much appreciated.
tailwind.config.js
...
plugins: [
require('#tailwindcss/forms'),
require('#tailwindcss/typography'),
require('#tailwindcss/aspect-ratio'),
],
...
postcss.config.js
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss')('./app/javascript/css/tailwind.js'),
require('autoprefixer'),
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3
})
]
}
javascript/stylesheets/application.scss
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
application.html.erb
<head>
<title>Photos</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
javascript/packs/application.js
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
require("stylesheets/application.scss")
views/home/index.html.erb
<h1 class="animate-pulse font-bold text-gray-200 text-2xl mb-6">Photos</h1>
I have recently upgraded my app from Rails 4.2.6 to Rails 5.2.3.
I followed the procedure as on Rails Guides
Now, when I try to start my development server, it starts without any error.
But when I hit the URL in the browser an error comes up which says:
Sprockets::FileNotFound in UserSessions#new
Showing /home/pranjal/source/my-app/app/views/layouts/application.html.erb where line #5 raised:
couldn't find file 'selectize.source.css'
Checked in these paths:
/home/pranjal/source/my-app/app/assets/config
/home/pranjal/source/my-app/app/assets/font-awesome
/home/pranjal/source/my-app/app/assets/fonts
/home/pranjal/source/my-app/app/assets/images
/home/pranjal/source/my-app/app/assets/javascripts
/home/pranjal/source/my-app/app/assets/stylesheets
/home/pranjal/source/my-app/vendor/assets/javascripts
/home/pranjal/source/my-app/vendor/assets/stylesheets
...
Extracted source (around line #5):
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
Looks like issue of incompatibility between js and new version of rails try to use/upgrade selectize-rails gem and remove js and css files from repo (if exists).
I am trying to run a project on digital ocean's ububtu droplet. As soon as I try to install a template, I get We're sorry, but something went wrong.
If I look in my error logs, I see
I, [2016-07-30T23:49:55.921388 #9319] INFO -- : Started GET "/" for 73.160.138.220 at 2016-07-30 23:49:55 -0400
I, [2016-07-30T23:49:55.961647 #9319] INFO -- : Processing by HomeController#index as HTML
I, [2016-07-30T23:49:55.983520 #9319] INFO -- : Rendered home/index.html.erb within layouts/application (1.6ms)
I, [2016-07-30T23:49:56.628915 #9319] INFO -- : Completed 500 Internal Server Error in 667ms (ActiveRecord: 0.0ms)
F, [2016-07-30T23:49:56.631911 #9319] FATAL -- :
ActionView::Template::Error (Invalid CSS after "...ound-position: ": expected expression (e.g. 1px, bold), was "[headerposition];"):
11: <title>Christopher G. Mendla - Personal and Professional Site</title>
12:
13: <!-- From ruby begin -->
14: <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
15:
16: <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
17: <%= csrf_meta_tags %>
app/views/layouts/application.html.erb:14:in `_app_views_layouts_application_html_erb___1821054907133950454_37150040'
I had the site loaded on Digital ocean before with this template. I seem to rememebr that there was a problem with lines 14 and 16 above and I had to do something different but I can't remember what.
The portion of application.html.erb with the stylesheet tags is
<!-- From ruby begin -->
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<!-- From end begin -->
<!-- The following is added to connect the template to ruby -->
<%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" %>
<%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" %>
<%= stylesheet_link_tag "style" %> <!-- From template -->
<%= stylesheet_link_tag "style.ie7" %> <!-- From template -->
<%= stylesheet_link_tag "style.responsive" %> <!-- From template -->
<%= javascript_include_tag "script.js" %> <!-- From template -->
<!-- < %= javascript_include_tag "jquery.are-you-sure" %> --> <!-- Dirty form checker -->
<%= javascript_include_tag 'defaults' %>
<%= csrf_meta_tags %> <!-- cross-site request forgery protection parameter -->
I did do rake assets:clobber and rake assets:precompile
assets.rb has
Rails.application.config.assets.compile = true #for Production
Rails.application. config.assets.precompile = ['*.js', '*.css', '*.css.erb'] #for Production
Rails.application.config.assets.precompile += %w[*.png *.jpg *.jpeg *.gif] #for Production
Rails.application.config.assets.precompile += %w(script.js)
Rails.application.config.assets.precompile += %w(script.responsive.js)
Rails.application.config.assets.precompile += %w( style.css )
Rails.application.config.assets.precompile += %w( style.responsive.css )
Rails.application.config.assets.precompile += %w( style.ie7.css )
If I change application.html.erb to simply be <%= yield %> then the site shows up without an error. I can't figure out where the error message is pointing in my css
I do see lines such as the following in style.css but I can't figure out which, if any of those lines is causing the problem
ul.art-vmenu ul a:hover:after
{
background-position: center ;
}
ul.art-vmenu ul a.active:hover:after
{
background-position: center ;
}
ul.art-vmenu ul a.active:after
{
background-position: bottom ;
}
In my application layout I have this conditional which helps deciding what stylesheet to use based on existence of current_user:
<% if current_user %>
<%= stylesheet_link_tag 'application', media: 'all', id: "maincss" %>
<% else %>
<%= stylesheet_link_tag 'session', media: 'all', id: "maincss" %>
<% end %>
But how can I specify which stylesheet to use based on the url?
For example, I want to use a 'password_reset.css' file for this path
get '/set/:password_reset_token' => 'password_resets#edit'
Here is what I do in my projects:
In the layout file, add a yield method like this:
<html>
<head>
...
...
<%= yield(:head) %>
</head>
...
In any view page (.erb file) that needs a custom CSS, I would add something like this at the top of the page.
<% content_for :head do %>
<%= stylesheet_link_tag 'custom_css_filename', media: 'all' %>
<% end %>
This way stylesheet will go in the right place only for that page.
Note:
If you want to include a custom stylesheet for every single URL in your application, you should use what is suggested in the previous answer.
You can try using
<%= stylesheet_link_tag *([params[:controller], params[:action]] + (params[:id] || '').split('/')) %>
If you are okay with using password_resets.css instead of password_reset.css
Note: You may get a few unwanted link tags as well, which may result in harmless(except to logs) 404 responses
When I try to load the sample user page from the rails tutorial, I get this error:
Showing
C:/Sites/rails_projects/sample_app/app/views/layouts/application.html.erb
where line #5 raised: Invalid CSS after ".": expected class name, was
"." (in
C:/Sites/rails_projects/sample_app/app/assets/stylesheets/custom.css.scss:113)
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" =>
true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
<%= render 'layouts/shim' %>
I can't seem to figure out what's wrong with how the code is formatted, and I don't see what "." it's referring to.