How to require custom JS files in Rails 6

My custom js has functions which will be called by embedded javascript of serveral html pages. Following snippet works in Rails6, compiled by webpacker:

  1. put custom js file in folder app/javascript/packs e.g. app/javascript/packs/my_functions.js

say_hello = function(a_text){ 
    console.log("HELLO "+ a_text);  
}
  1. add javascript_pack_tag in html file, e.g. index.html.erb .

<%= javascript_pack_tag 'my_functions' %>
<!-- html here -->

<script>
$(document).ready(function(){
    say_hello('ABer')
});
</script>

Note : This line is inside html body, not in head

<script src="/packs/js/my_functions-1db66368ebbd2fe31abd.js"></script>

Get better-organized code and avoid multiple javascript_pack_tags in your application.html.erb file with this approach:

  1. Add your custom example.js javascript file to app/javascript/packs.
  2. Add require("packs/example") to your application.js file.

I would have liked to add a comment to Asim Hashmi's correct answer. But I don't have enough reputation, so I'll add my suggestion as an answer instead.

It isn't necessary to include the ".js" extension inside of the require.


You need to do the following steps to add custom javascript file to rails 6 (webpacker)

1.Create your custom file named custom.js in app/javascript/packs directory.

For testing purpose, write any console.log in it.

// app/javascript/packs/custom.js

console.log("custom js file loaded")

2. Go to your application.html.erb and add the following line at the end of your <head></head>

<%= javascript_pack_tag 'custom', 'data-turbolinks-track': 'reload' %>

3. Now execute rake assets:precompile This will pack your javascript code (including our custom file we just added)

Now reload your page and you should see the message

custom js file loaded

In your browser console.

Tags:

Ruby On Rails

Ruby On Rails 6

Recent Posts