Develop Reference

How do I use an NPM package in a vanilla HTML/CSS/JS project?

I have a simple website built with HTML, CSS, and some in-line JS. I want to be able to use this NPM package Simple MDE Markdown Editor, but I don't know how. I tried running npm install simplemde --save in my project directory. That created a node_modules folder with the NPM package inside it, but how do I import that into my project? If I just try to use the package without importing it in any way, I get an error:
Uncaught ReferenceError: SimpleMDE is not defined.

Using node_modules requires tools like Webpack.
If your project is fully vanilla, you can try to add the cdn (I guess you need the links below), should work as npm module.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>

Customizing bower packages

I am using several open source js libraries in my project. I recently moved to use bower for all the front-end dependencies. I liked how I can just provide a github url instead of a proper package name.
I have customized few libraries. So to manage them using bower, I created a single private repository called myLibs in an organization account on Github.
I am creating branches for each customized library. For example, customized angular-bootstrap library will be in angular-bootstrap branch and customized angular-material library will be in angular-material branch.
Now I am creating tags for each release in each library. The naming convention that I am using is branch-name/x.y.z For example, I have angular-bootstrap/1.0.0 and angular-material/1.1.1 tags.
This was good till I had to install these libraries using bower. To install the custom libraries I called the following command (It's a dummy url, don't try it)
bower install --save-exact library-patch=https://github.com/test_org/myLibs.git#branch-name/1.0.0
The library gets installed and I can see it in bower_components too, but in my bower.json the dependency entry turns up like this -
"library-patch":"https://github.com/test_org/myLibs.git#undefined"
This is not what I wanted. I wanted to have the proper tag name to be saved. I don't want to manually make changes in the bower.json file every time I want to add a custom library.
My first thought was that the naming convention of the tags will be a problem. So I changed it to branch-name-x.y.z from branch-name/x.y.z which allowed me to have the exact version in the bower.json to install it properly, but when trying to install the libraries using the terminal, instead of using bower.json, I am getting the#undefined` tag in the end of the dependencies.
Here's the log I am getting while installing the library from terminal.
bower install --save-exact library-patch=https://github.com/test_org/myLibs.git#branch-name-1.0.0
bower not-cached https://github.com/test_org/myLibs.git#branch-name-1.0.0
bower resolve https://github.com/test_org/myLibs.git#branch-name-1.0.0
bower download https://github.com/test_org/myLibs/archive/branch-name-1.0.0.tar.gz
bower retry Download of https://github.com/test_org/myLibs/archive/branch-name-1.0.0.tar.gz failed with EHTTP, trying with git..
bower checkout library-patch#branch-name-1.0.0
bower resolved https://github.com/test_org/myLibs.git#branch-name-1.0.0
bower install library-patch#branch-name-1.0.0
library-patch#branch-name-1.0.0 bower_components/library-patch
└── angular#1.4.8
Why am I getting undefined in the release/tag name? Am I making any mistake while naming the tags? Is there any way I can install those custom libs from terminal and save the exact tag in bower.json?

The solution for the problem was to use --save instead of --save-exact. I have no explanation for the same right now, but I'll update the answer as soon as I can.
As far as I can tell, it's because the package was getting installed from github directly, instead of from bower registry.

How Does One Include Bootstrap in Node Project

I have a MEAN stack project that was scaffolded using the basic npm command. At the moment, the Bootstrap is included using CDN:
link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css')
My question is how can I add bootstrap using npm so the project works same as with CDN inclusion. In particular, when I run
npm install bootstrap
a boostrap directory is created within node_modules. However, if I try to include the bootstrap.css from that directory, it breaks the glyphicon fonts. Could anyone advise on how to do it?
P.S. I would also pose the same question regarding the AngularJS itself.

You can use the browser package manager i.e
bower
Bower offers a generic, unopinionated solution to the problem of front-end package management, while exposing the package dependency model via an API that can be consumed by a more opinionated build stack. There are no system wide dependencies, no dependencies are shared between different apps, and the dependency tree is flat.
If you want more Knowledge about which is better and reliable you read this link also.
Why Not npm
The main difference between npm and Bower is the approach for installing package dependencies. npm installs dependencies for each package separately, and as a result makes a big package dependency tree (node_modules/grunt/node_modules/glob/node_modules/...), where there could be several version of the same package. For client-side JavaScript this is unacceptable: you can't add two different version for jQuery or any other library to a page. With Bower each package is installed once (jQuery will always be in the bower_components/jquery folder, regardless of how many packages depend on it) and in the case of a dependency conflict, Bower simply won't install the package incompatible with one that's already installed.
Bower installation
You just simple install the packages
Syntax
npm install -g bower
You can refer the Doc for complete information.
For Example:
Directory structure
project Folder
+ bower_components
+ bootstrap
+ dist
+ css
+ bootstrap.css
+ jquery
+ jquery.js
+ public
+ index.html
+ app.js
Now you can set the static path in app.js
app.use(express.static(path.join(__dirname, 'bower_components')));
Now you can use simply in your index.html file
<!DOCTYPE html>
<html>
<head>
<title>{{ title }}</title>
<link rel='stylesheet' href='/bootstrap/dist/css/bootstrap.css' />
</head>
<body>
{{{ yield }}}
</body>
<script src="/bootstrap/dist/jquery/jquery.js"></script>
</html>
Screenshots
Directory structure with app.js file
Normal Html File

How to use installed package on node.js?

I'm using FoundationPress theme for WordPress and installed it using Node.js. Now I want to install Perfect Scrollbar and I did so using npm install perfect-scrollbar but I don't know how to use it. I can now see it under node_modules. I don't know where to import the css and the js file.
I import .scss using the foundation.scss file. I'm adding the js by adding a .js file to js/custom and then running grunt build.
Do I also put it there or there's a nicer way to use the installed package? I've also run grunt build but didn't see the script running in my theme.
I'm using Git Bash command line to do all this. Not sure if that helps. I have only started using Node.js

Add extra plugins to CKEditor using bower

I use bower to manage my js packages. I installed CKEditor into bower directory and it worked fine.
The question is: how should I add external plugins to ckeditor? I read here http://ckeditor.com/blog/CKEditor-Supports-Bower-and-Composer that this is possible by using extraPlugins property. But obviously I should somehow download plugin and add it to ckeditor/plugins folder. I'm quite new to bower but as I understand I shouldn't manually add any files or folders into bower directory. Instead I should use bower install plugin_name or something like that.
So, if I simple write it like:
CKEDITOR.replace('pageContent', {
extraPlugins: 'Syntaxhighlighter Interface'
});
I got an error that the plugins is not found

As far as I can see you can't just use Bower to care about the CKEditor plugins but at least you can add plugins from an external folder with this command:
CKEDITOR.plugins.addExternal( 'sample', '/myplugins/sample/' );
/myplugins/sample/ is a path to the folder where the plugin.js file is relative to the web root. sample is the name of the plugin.
Check out the docs on this:
http://docs.ckeditor.com/#!/api/CKEDITOR.resourceManager-method-addExternal

With the page you linked mentions that Ckeditor iteself can be downloaded with bower but not the plugins. After you download the plugins you need to enable them with the extraPlugins option. To download the actual plugin I would use the plugin's download link like so:
bower install http://mydomain/somefile.zip

Extending #codehitman's answer, you can manage the plugin via bower with at least two approaches:
Via CLI:
bower install panelbutton=https://download.ckeditor.com/panelbutton/releases/panelbutton_4.7.2.zip --save
The previous line will download the "panelbutton" addon and rename the downloaded addon to "panelbutton" (specified before the =) and the --save will write the command to bower.json (totally optional).
Via bower.json:
"dependencies": {
"panelbutton": "https://download.ckeditor.com/panelbutton/releases/panelbutton_4.7.2.zip",
"colorbutton": "https://download.ckeditor.com/colorbutton/releases/colorbutton_4.7.2.zip"
}
Just add the name you want to save the downloaded addon and the download url.
EXTRA: since you might want to store the downloaded addons into a ckeditor path, you can accomplish creating .bowerrc and pasting the following:
{
"directory" : "my/path/to/ckeditor/addons"
}
WARNING: If there is only a js on the package, bower renames it to index.js. I solved it running a postinstall script like this (adapt to your needs).
mv ./web/libraries/panelbutton/index.js ./web/libraries/panelbutton/plugin.js

You could try adding the following line to your bower.json file:
"ckeditor": "#full/4.4.7"
This should install all plugins for you!