We Keep Coding

Combining a new set of JavaScript files into a Rails app?

I am working on a fully functional, existing Rails app. A friend of mine just built a few new front-end pages for me, but he just built them in html, with some JavaScript files.
Adding in the HTML has been easy, but I cannot figure out how to get the corresponding JavaScript files working.
I have imported all the JavaScript files into the app/assets/javascripts folders, and added them to the application.js file like this:
//= require modules/alerts
//= require modules/dropdown
etc.
But none of the JavaScript shows up - I threw some console.log lines in them just to test, but the lines never show. What else do I need to do to connect these JavaScript files?
Current structure:
app
assets
javascripts
modules
application.js (also inside javascripts folder like modules folder)
I am also getting this alert in console:
mobile-nav.source.js:23 Uncaught ReferenceError: alerts is not defined
at mobile-nav.source.js:23
But just checked the mobile-nav.js file and line 23 has nothing about alerts.
I think my error is coming from modules/init-modules.js - I am adding in alerts: alerts to the var Modules object, and when I do that, it seems to break all the other js. Is there something I need to do first before I can add to this file?
EDIT: Found the issue! Thanks for everyone that helped. There was a variable being declared incorrectly, but the way it was throwing the error made it hard to find.

Include AngularJs javascript files into Angular cli

I have a legacy Angular JS application and now working in tandem with few new Angular 5 components using upgrade module. Following this post here
Currently, I need to include all my AngularJs code into my index.html.
But, I want to include all JS files (more than 200) in my angular-cli.json in scripts section like below:
"scripts": [
"../appjs/**"
],
But, ng-build gives me error no such file or directory:\appjs\**.
How to include all the files in the folder in on go avoiding to include all the files one by one.
Here is the image of the folder structure.
Please guide. Thanks.

Unfortunately the scripts: [] attribute doesn't accept globbing patterns. This is alluded to in the documentation:
scripts: An object containing JavaScript script files to add to the
global context of the project. The scripts are loaded exactly as if
you had added them in a tag inside index.html.
So the alternative is to use a powershell script or DOS cmd to list the files and output them to the screen/file and then add all the necessary quotes to paste them into the scripts attribute in the config file.

Transfer a file, then inline it without Webpack bundling/loader code

I cannot come up with a working solution. I guess I should somehow be using html-webpack-inline-source-plugin or a combination of multiple entry points but this is too much for me to handle.
What I want to have is:
all my js files bundled together and injected (not inlined) into index.html [this works of course!]
one js file, which is not included in the bundle described above, inlined into index.html
the inlined js file has to go through the Webpack "transformation pipe" since that js file depends on the Webpack build step
Example of the file to be inlined:
const asset = "require('./assets/blob.json')";
fetch(asset).then(.......)
This file should first go through the Webpack transformation since what should actually be inlined is something like:
<script>
var asset = "/static/json/blob.md5hashofblobjson.json";
fetch(asset).then(.......)
</script>
So basically the file that is to be inlined depends on the Webpack build process and cannot be just read with the fs module and written directly into index.html by hand.
Also, the inlined JavaScript should not include any WebpackJSONP bundle loading code, just the pure JS. Below that inlined piece of JS should come the usual bundled scripts that are injected (not inlined).
How should I configure my build process? Thanks a mil!

Incorporating vendor js files (from wrap bootstrap) into Rails 4

I'm struggling to understand how to incorporate vendor js assets into my Rails 4 application.
My app uses bootstrap. The vendor files include a js file, called npm.js. That file has the following in it:
// This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment.
require('../../js/transition.js')
require('../../js/alert.js')
require('../../js/button.js')
require('../../js/carousel.js')
require('../../js/collapse.js')
require('../../js/dropdown.js')
require('../../js/modal.js')
require('../../js/tooltip.js')
require('../../js/popover.js')
require('../../js/scrollspy.js')
require('../../js/tab.js')
require('../../js/affix.js')
In my app/assets/javascript folder, I have a file called application.js. In that file, I have:
//= require npm
In my console inspector, I can see an error with the incorporation of the npm file. The error message is:
npm.self-f66d504….js?body=1:2 Uncaught ReferenceError: require is not defined
I think it might be something to do with the ../.. references that are set out in the npm.js file.
Does anyone know how to adapt this for use in rails 4 (hosted on heroku)?
Thanks very much.

Those require(...) statements in your JS are in the CommonJS format (hence the comment at top) and are commonly used in Node.js but aren't supported in browser environments which is why you're getting that error in the inspector.
One option is to use Browserify with Grunt to link and compile each of those JS files into a single npm.js (though I'd recommend a different name) file. Are you already using browserify_rails, Grunt, or a similar tool to manage your JS files?
If you haven't worked with Grunt/Browserify, or if the above statement is unclear, it's probably best and simplest to just stick to the Rails asset pipeline:
So application.js would become:
//= require('<path>/js/transition.js')
//= require('<path>/js/alert.js')
//= require('<path>/js/button.js')
//= require('<path>/js/carousel.js')
// etc...
Instead of:
//= require npm
And this should generate equivalent JS to your sample above.
Finally, make sure <path> is included in your config.assets.paths config variable.

Asset Pipeline in Ruby on Rails with Javascript

I've been having trouble using the Asset Pipeline. Although I read an excellent guide here I still have trouble.
I'm trying a javascript solution for adding form elements "on the fly" from this [guide] (http://jyrkis-blogs.blogspot.com/2014/06/adding-fields-on-fly-with-ruby-on-rails.html#code4Div)
When I put the javascript into a <script> tag at the bottom of my page, everything works as expected.
If I simply copy and paste the script into application.js the code also works.
However, when I try to move the code to app/assets/javascripts/people.js my site throws a Reference Error.
This is a similar problem to the questions on SO titled 'Ruby on Rails 3.1 RC1 Javascript Asset Pipeline Problem' (not enough rep for the link), but I only have one script, so the alphabetical solution doesn't help. Moving the file to vendor/assets/javascript also didn't help.
Application.js currently looks like:
This is a manifest file that'll be compiled into application.js, which will include all the files
listed below.
Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
compiled file.
Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
about supported directives.
= require people.js
= require_tree .