27

I'm currently trying Rails 6.0.0.rc1 which seems to have moved the default javascript folder from app/assets/javascript to app/javascript. The application.js file is now located in app/javascript/packs. Now, I want to add a couple of js files, but for some reason they don't get imported and I can't find any documentation on how this can be done in Rails 6. I tried a couple of things:

  1. Create a new folder custom_js under app/javascript/packs, putting all my js files there and then add a require "custom_js" to application.js.

  2. Copy all my js files under app/javascript/channels (which should be included by default, since application.js has require("channels")).

  3. Adding require_tree . to application.js, which was the previous approach.

How can I load my own js files inside a Rails 6 application?

Severin
  • 8,508
  • 14
  • 68
  • 117
  • webpacker replaces the asset-pipeline in rails 6. i would advise to migrate to webpacker before upgrading to rails 6. – phoet May 21 '19 at 18:39

3 Answers3

65

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.

Steve
  • 117
  • 1
  • 10
Oliver Curting
  • 782
  • 6
  • 12
25

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.

Sunderam Dubey
  • 1
  • 11
  • 20
  • 40
asimhashmi
  • 4,258
  • 1
  • 14
  • 34
1

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>
carrottop
  • 73
  • 7