I just started a new rails 7 project with TailwindCSS using the new rails new my-app --css tailwind syntax. Tailwind CSS is working properly. I wanted to add a navbar from tailwind elements, and I followed the steps from https://tailwind-elements.com/quick-start/. The css in the navbar works, but the opening and closing of submenus (which I presume is all run by javascript) does not.
When digging into the details, I am seeing these lines in the rails s logs
Started GET "/TW-ELEMENTS-PATH/dist/js/index.min.js" for 127.0.0.1 at 2023-02-02 09:13:48 -0600
ActionController::RoutingError (No route matches [GET] "/TW-ELEMENTS-PATH/dist/js/index.min.js"):
I did the npm install tw-elements install and the tailwind.config.cs edits, what am I missing? Is there some conflict that with Ruby on Rails that I am not aware of? Do I really need to create a route, or is that a sign that something is not installed correctly?
Here is the application.html.erb where I am inserting my <script> line
<!DOCTYPE html>
<html>
<head>
<title>MyApp</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "tailwind" , "inter-font" , "data-turbo-track" : "reload" %>
<%= stylesheet_link_tag "application" , "data-turbo-track" : "reload" %>
<%= javascript_importmap_tags %>
<!--here is the line I added -->
<script src="./TW-ELEMENTS-PATH/dist/js/index.min.js"></script>
</head>
<body>
<%= render 'layouts/navigation' %>
<main class="container mx-auto mt-28 px-5 flex">
<%= yield %>
</main>
</body>
</html>
I did try the alternate step 4 by putting import 'tw-elements'; in app/javascript/controllers.index.js but nothing is working.
Related
I am using ember-cli-rails gem. I installed ember-cli-foundation-sass as an addon for ember. Everything works fine but Foundation Js module. I made a layout just for Ember like this:
<!doctype html>
<html dir="ltr" lang="<%= I18n.locale %>">
<head>
<meta charset="UTF-8">
<title>Ember</title>
<%= stylesheet_link_tag 'frontend/frontend' %>
<%= include_ember_script_tags :frontend %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
I tried different settings, but none of them worked. Any help would be appreciated.
I solved the problem. I just forgot to put what it supposed to be put in Brocfile.js
I'm new to web development, so I'm sorry if this is basic stuff. I'm not sure how to connect the code in my application.html.erb or crop.hmtl.erb to the actual files I downloaded. Specifically, I downloaded the files for Jquery UI and Jcrop(which is reliant on Jquery UI) and moved both of them into my application's vendor file (home/website/vendor). I then followed a Jcrop tutorial to install the plugin,but it doesn't work. I think my application isn't successfuly accessing one or both of the downloaded files. The Jcrop guide gave me a suggestion for what to put in my application.html.erb but said I might have to adjust the code according the actual paths. I don't know how to do this or even what to look up to research it. Can anyone help?
Application.html.erb: this is what the Jquery UI guide (http://learn.jquery.com/jquery-ui/getting-started/) told me to put
<!DOCTYPE html>
<html>
<head>
<title>Website</title>
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
<link rel="stylesheet" href="jquery-ui.min.css">
<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.min.js"></script>
</head>
This is what the Jcrop guide (http://deepliquid.com/content/Jcrop_Manual.html) suggested I put into my application.html.erb, but said I may have to adjust:
<script src="js/jquery.min.js"></script>
<script src="js/jquery.Jcrop.min.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
crop.html.erb
<% content_for(:head) do %>
<%= stylesheet_link_tag "jquery.Jcrop" %>
<%= javascript_include_tag "jquery.Jcrop.min" %>
<script type="text/javascript" charset="utf-8">
$(function() {
$("#cropbox").Jcrop();
});
</script>
<% end %>
<%= image_tag #thing.avatar.url(:large), :id => "cropbox" %>
Asset files (such as Javascript and CSS) should go in their respective folders inside of app/assets. For instance, if you place your files at the following locations within your application:
assets/javascripts/jquery.Jcrop.min.js
assets/stylesheets/jquery.Jcrop.css
You can then reference these files within your application.html.erb file (or crop.html.erb, using content_for) using the rails asset helpers:
<%= stylesheet_link_tag "jquery.Jcrop" %>
<%= javascript_include_tag "jquery.Jcrop.min" %>
Additionally, there is a jcrop-rails-v2 which may make the inclusion of JCrop assets easier.
When I run the rails app, am getting an error that says cannot load such file -- less.,
I have a rails application that I'm using to load an html file., this html file has reference to bootstrap_and_overrides.css. My current rails application is using the typical application.html.erb file. Here is the code for this file
<!DOCTYPE html>
<html>
<head>
<title>MyHorders</title>
<%= stylesheet_link_tag "application", media: "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="masthead">
<ul class="nav nav-pills pull-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<h3 class="muted">blog.me</h3>
</div>
<%= yield %>
</div>
</body>
</html>
My css and assets directory structure is :
Finally my GEM env.,
Looking for inputs to quash this problem. If you will need more information, I can add it to my question., Thanks.
I think you need two gems
gem "therubyracer"
gem "less-rails"
add them to your Gemfile and run 'bundle install' then restart your server and see it should work.
I think you can also try
gem "execjs"
If you have any issue
I simply needed to restart my server. I had added several related gems to my Gemfile (less-rails, therubyracer, and twitter-bootstrap-rails) while my local server was running, resulting in the same problem seen above. So once I shut it down and restarted it again, everything loaded well.
I found a layout at https://github.com/evenwu/pinterest-clone-layout that I would like to try. However, I have no idea how to integrate this with my existing rails project. My current layout looks like this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"/>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
How do I use the layout from the github link?
Add gem 'haml' to your Gemfile and run bundle install.
Copy layout and stylesheets, etc. to your project.
Remember to remove your .erb layout; Rails gives .erb precedence over .haml by default.
the system-created page http://localhost:3000/pages/home shows up fine. but when i change the content of the file home.html.erb and reload the page in the browser and view the source code, i see the content from my home.html.erb file gets added under the automatically created content. so basically there are two pages in the source code. anyone knows what causes that?
my application.html.erb:
<!DOCTYPE html>
<html>
<head>
<title>SampleApp</title>
<%= stylesheet_link_tag :all %>
<%= javascript_include_tag :defaults %>
<%= csrf_meta_tag %>
</head>
<body>
<%= yield %>
</body>
</html>
my home.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Ruby on Rails Tutorial Sample App | Home</title>
</head>
<body>
<h1>Sample App</h1>
...
</body>
</html>
Your application.html.erb is fine, but home.html.erb is used to include only what's inside <body> tag. So, in your case it must contain only the
<h1>Sample App</h1>
...
part.