Trying to add bootstrap to rails. Need to install nodejs? - javascript

I am following a tutorial to install bootstrap on my rails application.
I've been following this tutorial
http://www.gotealeaf.com/blog/integrating-rails-and-bootstrap-part-1
Thought I run into this error, when I change my application.css to application.css.sass.
Current ExecJS runtime does't support ES5. Please install node.js.
(in C:/Users/DanielH/Desktop/RotairApp/RubyDev/rotairapp/app/assets/stylesheets/application.css.sass)
Extracted source (around line #9):
6
7
8
9
10
11
12
</style>
<title>Rotair</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
The application css file now looks like
#import "bootstrap-sprockets"
#import "bootstrap"
Do I really need to install node.js?

You can use a CDN too.
Just putt a CDN css file and JS links and you don't have to install anything.
here is the link to the files.
http://www.bootstrapcdn.com/

The short answer is that if you want your application to serve Javascript, you need a javascript runtime. See this previous SO question. Basically Bootstrap does a lot of jQuery/JS wizardry to make things like modals work, so you have to have a JS runtime or bootstrap will not work.
You could use:
gem 'therubyracer'
gem 'execjs'
Or
node.js
I've generally had better luck with node.
Yes, you can use the CDN without the JS runtime, but you don't get the SASS variables, and can customize it.

Installing nodeJS is all you nedd... Just restart twice... or more... Until the problem will solved itself.
That worked for me.

Related

Rails 5 - ExecJS::RuntimeError

My project was working fine, I was tweaking a chart made with chartkick and updating a HTML badge with ActionCable, when suddenly I get this error:
ExecJS::RuntimeError in Pages#create_session
Showing B:/.../app/views/layouts/application.html.erb where line #7 raised:
SyntaxError: [stdin]:14:32: unexpected end of input
Extracted source (around line #7):
5 <%= csrf_meta_tags %>
6 <%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" %>
7 <%= javascript_include_tag 'application', 'chartkick' %>
8 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
9 <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
10 </head>
Application Trace | Framework Trace | Full Trace
app/views/layouts/application.html.erb:7:in `_app_views_layouts_application_html_erb___430303067_44605968'
app/controllers/pages_controller.rb:145:in `render_page'
app/controllers/pages_controller.rb:46:in `create_session'
I googled and found out that this Error means there is a problem with the JavaScript runtime on my system (I'm using Windows 10).
Things I've tried:
Removing //= require_tree . from application.js - doesn't work for me because then all my JavaScript code doesn't work anymore (my project uses ActionCable)
Modifying C:\RailsInstaller\Ruby2.3.0\lib\ruby\gems\2.3.0\gems\execjs-2.7.0\lib\execjs\ ru‌​ntimes.rb as is detailed here - didn't fix it
Adding 'therubyracer' gem - couldn't install it, this is the error message I got. That's the complete error message and then it's just done. As far as I can tell it can't install because Python 2 is not installed?
As suggested here, I added the gem 'coffee-script-source' - didn't fix it and now I can't remove it because suddenly other gems depend on it? Weird.
I have had Node.js installed ever since I started this project so that can't be it.
I'm using Windows 10, Ruby 2.3.0 and Rails 5.0.2 and this is my current Gemfile.
This is my application.js:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require chartkick
//= require_tree .
I know there have been many posts with this issue, but after trying almost everything I'm kind of lost... Please help! =)
After Ziyan Junaideens pointer I searched all my CoffeeScript files and finally found I had left a method call unfinished... >_<
received: (data) ->
App.online_status. #<--- right here
So what did I learn? Never program when you are dead tired - or you'll spend the whole next day searching for the stupid mistake! ^^*
if you have gem # gem 'therubyracer', :platform=>:ruby
Change to gem 'mini_racer'

Ruby on rails javascript doesn't load properly (HTML5 template)

I am very new in ruby, so please don't judge me too much :)
I was trying to make this template http://freebiesbug.com/code-stuff/sedna-one-page-website-template/ run on rails. And it went pretty well.
However, I have stuck on configuring javascript parameters (the way it loads on rails). I am not sure how to do that correctly. Things that slides in the template doesn't work for me, like apple images and slider of employees in the bottom...
I tried to include all file names in javascript.rb file and also I have used:
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
but non of these worked.
Any ideas where I may made a gap?
Thanks!
Javascript files end in .js, not .rb, so thats one problem.
The line
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
tells rails to package and include the application.js file found at app/assets/javascripts/application.js. Assuming your template has one associated javascript file, you can copy and paste the contents of that file into your application.js file (which may be the easiest solution). You can also add any javascript (or coffeescript) files to the app/assets/javascripts folder, and those files will be packaged and served up in the default configuration of rails.

Rails: couldn't find file 'typeahead.js'.. until i remove 'data-turbolinks'

I installed Elasticsearch (with searchkick gem) following this tutorial - https://shellycloud.com/blog/2013/10/adding-search-and-autocomplete-to-a-rails-app-with-elasticsearch.
Search is working and now I'm implementing autocomplete function with typeahead.js which I installed using Bower.
However I get the error message:
Sprockets::FileNotFound at /books couldn't find file 'typeahead.js'
I tried to include it in various orders in my assets file, without luck..
However I realized removing turbolinks from application.html.erb solved the problem.
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
This does not seem right... How can I resolve this?
I had this exact same problem. The author named the library with the .js extension added and I assume it has something to do with application.js ignoring the .js part at the end. I had this problem when using rails-assets and once I poked around more in the gem source I saw two .js.js extensions added.
You can add it as so:
//= require typeahead.js.js
Then you can re-enable
'data-turbolinks-track' => true

Rails assets not available on production

I have this specific issue. On a (LARGE) rails setup I have a backbone project in /app/assets/reader/. All of my javascript assets are precompiling dynamically into reader.js, this works fine. My i10n files in locale/ don't play nice however because they don't need any precompiling. In development it works fine, but in production they are not available.
In my /app/views/layouts/reader.html.erb file I have the following lines:
<%= javascript_include_tag "reader" %>
<%= javascript_include_tag "locale/en" %>
The problem is that the lower one results in a 404 error on production.
I've tried the following alternatives:
<%= javascript_include_tag "en" %>
<%= javascript_include_tag "locale/en" %>
<%= javascript_include_tag "reader/locale/en" %>
None of these seem work. The last one even broke on development.
PS: in applicaton.rb I have:
...
config.assets.precompile += [
...
'reader.js',
...
]
...
config.assets.paths << File.join(Rails.root, 'app', 'assets', 'reader', 'locale')
You removed all files in public directory folder then restarted server? Also inside of your js folder you have a folder
reader/locale/en.js
? Double check all paths and if it works in development you should check out your error log in production to see where the problem is coming from.
The solution was not in the javascript_include_tag, but rather in the way config.assets.precompile was formatted.
By default Rails scans for any subfolder DIRECTLY within assets. That meant that the locale file had to be added as locale/en.js to config.assets.precompile, and that the config.assets.paths line was not even necessary at all.
The way rails scans subfolder is really specific and important. Get that right, and it should all work like a breeze. Once you know how it works, it actually gets quite powerful.
Pro tip:
I ended up using locale/*.js in combination with <%= javascript_include_tag "locale/#{I18n.locale}" %>, as I actually have a lot of locale files.
Had the same issue, turns out there is a line in config/environments/production.rb:
config.public_file_server.enabled = ENV["RAILS_SERVE_STATIC_FILES"].present?
which didn't allow Rails to serve static files, including the precompiled assets. Changing it to
config.public_file_server.enabled = true
fixes the issue.
This is caused by the fact that Nginx and Apache handle static serving on their own. But Rails is configured to use Puma by default so this doesn't really make too much sense for it to default to these settings.

Where should javascript files and stylesheets be added to a Rails project?

I'm unclear about where javascript files and stylesheets should be added to a Rails project. Perhaps they should be added to public/javascripts and public/stylesheets respectively. Then they're copied to app/assets? Or perhaps it's the other way around.
I've experimented with <%= stylesheet_link_tag :all %> and :default and just explicitly naming my stylesheets but I'm still confused.
Where should javascript files and stylesheets be added to a Rails project?
It is the other way around. You add stylesheets and javascripts to their respectable folders in assets.
You then use:
= stylesheet_link_tag "application"
= javascript_include_tag "application"
Check the guide for details http://guides.rubyonrails.org/asset_pipeline.html
In a Rails 3.1 application, where the asset pipeline is enabled, you want to place your script/stylesheet assets in app/assets. Rails will automagically find them via Sprockets and serve them up minimized and contaminated (in production).

Categories