We Keep Coding

How do I link to Bootstrap 4 and its scripts?

According to this blog (which is written for BS3), I should add the following lines to the angular.cli.json file.
...
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
...
The problem is that in the distribution I'm using (BS4 Alpha 6), there's no such file. In the dist directory, there's a bunch of files as follows.
alert.js
button.js
carousel.js
collapse.js
dropdown.js
modal.js
popover.js
scrollspy.js
tab.js
tooltip.js
util.js
Do I have to link to them each individually? Am I missing a minified file somewhere? I'm in dist so I assumed that it's the production version.
Should I go about it in a totally different way, perhaps? I'm trying the Angular CLI package since I want to test without Gulp, Grunt nor Webpack. Is there an approach where I can include, reqest, demand or append those file (preferably minified) to my web site?
The styles I've included my simply importing what I needed from the dist like this.
#import "~bootstrap/dist/css/bootstrap.min.css";
However, I'm a bit confused on how to handle JS of the BS.

You're looking in the wrong place.
The files you are seeing are in js/dist/. You should be looking in dist/js/.

Gulp: how to use CDN for js lib?

I'm new in AngularJS and Gulp.
In one example, some libs are copied by Gulp from the node_modules folder in a js/lib/angular2 folder:
gulp.task('libs', function() {
return gulp.src([
'node_modules/angular2/bundles/angular2.dev.js'
... // other libs
]).pipe(gulp.dest(src + 'js/lib/angular2'));
});
then added in index.html via script tag
<script src="js/lib/angular2/angular2.dev.js"></script>
What if I would load them via CDN?
During development I can use local js files, copied by Gulp, but in production have I substitute them "by hand" with their corresponding CDN file (if any)? or there is a way to do it directly with Gulp?
EDIT
I found the plugin gulp-cdnizer

There is a plugin for gulp, gulp-processhtml, that can do this. It uses conditional comments that will remove/replace/add to your HTML files based on the gulp task.
https://www.npmjs.com/package/gulp-processhtml

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.

Ember build output (dist folder)

In Ember JS project, we have package.json (for NPM managed) and bower.json (Bower managed) where we have all our dependencies/devDependencies (e.g. bootstrap, jquery, ember, etc)
Now these get downloaded from their respective registries and get downloaded locally into node_modules/bower_components folder.
Now my question is while these folders (node_modules/bower_components) contain a lot of code dependencies, when we do a build, I see some code in the "dist" folder.
I want to understand what actually goes into this dist ?
I see things like vendor.css, vendor.js, myappName.css, myappName.js, etc
So how do these get constructed and what code actually goes inside these ?
Is it also base on what we have in our package/bower json config files ?
Or is it based on what we have in ember-cli-build.js ?

What is put under /dist should be everything you need to publish your application. Components from bower_components are typically loaded via app.import() in ember-cli-build.js and stuff from node_modules by addons you've installed (which ember-cli picks up automatically).
Here is a quick rundown of the files.
index.html --> Generated by ember-cli upon project creation
* --> Everything from /public
assets/
appName.css --> All css from under /app
appName.js --> All js and compiled templates from /app
vendor.css --> Any css imported from bower_components/node_modules (via ember-cli-build.js)
vendor.js --> Any js imported from bower_components/node_modules (via ember-cli-build.js)
test-*.js --> Test loader/support for ember-cli if you've run "ember test"
Most files also come with sourcemaps as .map which you can exclude when publishing the site.

As you said, the dependencies you declare in your bower.json and package.json get downloaded to bower_components and node_modules
When you do you an ember build command what happens is that all the code you decide to import in your ember-cli-build.js will get dumped to the vendor.js / vendor.css file. All your application code (templates/routes/components/controllers/services) will be placed in my-app-name.js. All your application styles will go to the my-app-name.css file. All these files will be placed in the dist directory so that you can deploy it.
See this sample ember-cli-build.js file:
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
//CSS - Content of these files will go to "vendor.css"
app.import('vendor/css/bootstrap.css');
app.import('bower_components/datatables/media/css/jquery.dataTables.css');
app.import('bower_components/datatables/media/css/dataTables.bootstrap.css');
app.import('vendor/css/plugins/toastr/toastr.min.css');
// Javascript - Content of these files will go to "vendor.js"
app.import('vendor/js/bootstrap.js');
app.import('vendor/js/plugins/metisMenu/jquery.metisMenu.js');
app.import('vendor/js/plugins/toastr/toastr.min.js');
app.import('bower_components/datatables/media/js/jquery.dataTables.js');
return app.toTree();
};
The CSS imports will go to the vendor.css file and the JS imports will go to the vendor.js files.
The content of your my-app-name.css comes from the app/styles folder.
If you do ember build --environment production the ember build process will also fingertring your assets (append a hash at the end of the filename and generate an appropriate reference in the index.html file).

How to avoid code duplication using Browserify

CommonJS noob here, I read about browserify and thought it was simpler than my existing RequireJS setup, so I went ahead and changed them. What I have found out is I am going to have code duplication in each bundle. Let me explain:
Lets say, I have page1.js and page2.js make use of jquery.js and jquery-ui.js
Now I have to create bundle1.js and bundle2.js and the content of jquery.js and jquery-ui.js is duplicated in each bundle.
I have tried separated into different files in browser by only bundling the jquery.js and jquery-ui.js such as:
<script src="lib_bundle.js">
<script src="page1.js">
Problem is that the require within page1.js will fail because it's not a commonjs bundle.

This situation is what external requires are for. I'm not familiar with the command line for browserify, but when using the JavaScript API, you can do the following. This will bundle common dependencies together. They can then be referenced as "externals" by your other bundles.
var browserify = require('browserify');
var externalDependencies = [
'jquery',
'jquery-ui'
];
// shared libraries bundle (i.e. jquery, jquery-ui)
var libsBundle = browserify({
// your options
// ...
require: externalDependencies
});
// main bundle (i.e. page1, page2)
var mainBundle = browserify({
// your options
// ...
});
mainBundle.external(externalDependencies);
libsBundle.bundle();
mainBundle.bundle();
Script tags:
<script src="libsBundle.js">
<script src="mainBundle.js">

you could also create a seperate bundle for jquery and jquery-ui with this command line:
browserify -r jquery -r jquery-ui > modules.js
add <script src="modules.js"></script> to html and add -x jquery -x jquery-ui to your two bundles.
browserify -x jquery -x jquery-ui page1.js > bundle1.js
browserify -x jquery -x jquery-ui page2.js > bundle2.js