Rails 5.1.4: Third-party assets in /vendor wont show in view

Question

I am trying to run a simple rails (-v 5.1.4) application which implements one of the samples that ship with the amcharts library.

Here's what work: 工作：

• create /app/assets/javascripts/amcharts folder
• copy third party content to /app/assets/javascripts/amcharts
• add //= require amcharts to /app/assets/javascripts/application.js

I run the rails server and the graph is displayed as expected from watching the original stand-alone html view. Therefore I assume the edited code is working correctly.

Here's what work: 工作：

• create /vendor/assets(/javascripts)/amcharts folder
• copy third party content to /vendor/assets(/javascripts)/amcharts
• add //= require amcharts to /app/assets/javascripts/application.js
• add config.assets.paths << Rails.root.join('vendor/assets(/javascripts)/amcharts') to config/application.rb
• add relative paths ../../../vendor/assets(/javascripts)/amcharts/$name$.js to app/assets/application.js

When I run the rails server no error is given but the application displays an blank white page instead of the graph, the source-code of the page shows the code of my view-file as expected.

Since my respective view is called amcharts.html.erb I have a amcharts.coffee -file in my app/assets/javascripts/ -folder. Could it be sprockets falsely assumes that's the file it needs?

Also I wonder what the app/config/manifest.js is for. All manifest related changes seem to be made in the app/assets/javascript/application.js file anyways...

EDIT: An shortened version of my view-file app/views/amcharts/index.html.erb (modified code of the samples from amcharts lib)

<div id="chartdiv" style="width: 100%; height: 400px;"></div>
<script type="text/javascript">
var chart;
var chartData = [ { $data } ];
AmCharts.ready(function () { 
  chart = new AmCharts.AmSerialChart();
  chart.dataProvider = chartData;
  $AmCharts.funs
  chart.write("chartdiv");
});
</script>

Answer 1

I got the opportunity to share my files with a professional and he fixed the problem. The way to go was:

• Install gems 'amcharts-rails', 'rails-assets-amcharts3'
• add //= require amcharts3 , //= require amcharts3/serial to app/assets/javascripts/application.js

I still wonder how to include third-party-content from vendor/assets. But since the whole thing is working now without files in wrong folders, I'll mark this as answered. Thanks to everybody who tried to help!

Answer 2

Put the JS package directly under vendor/assets , not in vendor/assets/javascripts . For example, add the /vendor/assets/amcharts/amcharts.js library to your application via //= require amcharts .

For a more concrete example, here's how I've structured including the DataTables library in a Rails 5 application:

vendor/assets/DataTables-1.10.16/js/dataTables.bootstrap4.js
vendor/assets/DataTables-1.10.16/js/jquery.dataTables.js
vendor/assets/DataTables-1.10.16/css/dataTables.bootstrap4.css

(Note the folder hierarchy below vendor/assets is exactly what the DataTables package provides.)

application.css:

/*
 *= css/dataTables.bootstrap4
 */

application.js:

//= require js/jquery.dataTables
//= require js/dataTables.bootstrap4