How to call js and css files inside a html.erb file

Question

I'm quite new to Ruby and ERB and for this case I'm using only Ruby and not rails.

E:\ruby
   -app.rb
   -plan.html.erb
   -check.css
   -track.js [js + jquery framework]

Inside app.rb I've the following lines

text = File.open(("final.html"), "w+")
text.puts ERB.new(File.read("plan.html.erb")).result binding

I'm not sure how to call the .js and .css files inside the .html.erb file. Kindly let me know if I've to post the .html.erb file in case that would be helpful to debug further, thanks.

If you want to embed js/css, you could use the same approach, open the file, read its contents and insert into the html file via ERB's <%= %>. But why are you doing this? If you don't like the size/complexity of rails, there are many smaller frameworks. — Sergio Tulentsev
– Sergio Tulentsev, Commented Jul 18, 2018 at 18:03
I don't understand. If you want to link .js and .css files inside html, don't use just use <link> and <script> tags? — Joseph Cho
– Joseph Cho, Commented Jul 18, 2018 at 18:12
@JosephCho: this implies having a server, capable of serving static files. For all we know, this here is a static site generator, not a web app. — Sergio Tulentsev
– Sergio Tulentsev, Commented Jul 18, 2018 at 18:13
@SergioTulentsev : Thank you for your suggestions. I'm very new to Ruby , so still not sure about the supporting frameworks, I come from the system admin side, so these are bit tricky for me. is no other way I can call js and css inside the .html.erb — Rookie1999
– Rookie1999, Commented Jul 18, 2018 at 18:14
@SergioTulentsev Not even, can't you hardcode paths and those files will load when you load html in a browser? Don't need sinatra for that. (btw it is an honor speaking to you) — Joseph Cho
– Joseph Cho, Commented Jul 18, 2018 at 18:15

3limin4t0r · Accepted Answer · 2018-07-18 19:20:43Z

2

You can include the JavaScript in the .html.erb file in the same way you load the text file. The simplest (code wise) solution is doing something along the lines of this:

plan.html.erb

<script>
<%= File.read('some/file.js') %>
</script>

However if you are expecting a <script src="some/file.js"></script> as result you'll have to create your own helper or use an existing one from some light weight web framework. A simple example might be:

lib/html_helpers.rb

require 'builder'

module HtmlHelpers

  def javascript_include_tag(path)
    Builder::XmlMarkup.new.script('', src: path)
    #=> %{<script src="#{html_escaped_path}"></script>}
  end

end

plan.html.erb

<% require 'html_helpers' %>
<% include HtmlHelpers %>
<%= javascript_include_tag('some/file.js') %>

Keep in mind that the first solution doesn't escape any HTML characters. Meaning that if your script contains </script> everything following that tag will be interpreted as HTML.

edited Jul 18, 2018 at 19:20

answered Jul 18, 2018 at 19:08

3limin4t0r

21.4k3 gold badges38 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rookie1999 Over a year ago

Thanks a lot for the vivid explanation, that really helped :)

Collectives™ on Stack Overflow

How to call js and css files inside a html.erb file

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related