Develop Reference

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.

Node.js project with no package.json

Is it ok to have a node.js project with no package.json? The ones I see on the internet all come with package.json
What is the effect of having no package.json?
How is package.json created in the first place? Is it created automatically? I am wondering why I do not have package.json

Fundamentally, package.json is a meta file for your application. It lists all the configuration of your application.
What is the effect of having no package.json?
Nothing as far as you're running all your code locally and have no requirement for deployment whatsoever.
Let's setup a scene for you to understand this better.
Imagine that you wrote a brilliant application using node. Now all the chicks in your surrounding want it to play with. It is so fantastic!
Now you want to give it to them and during the development process you `npm install`ed so many things that your project grows beyond 4TB size.
There is no data storage device available to ship that huge code base.
Then the girl of your dream said I want it and I want it now. So you begin searching for app deployment process for node applications.
That is where you stumble upon a magical thing called package.json.
So what you do is you list all your npm installed modules under dependencies property. Then you delete node_modulesfolder, add package.json and commit the entire damn thing in github. Even the .zip file is of 10MB
Then she gets the code.
Types in npm install && npm start (which will install all the dependencies from the package.json` and start your application)
If you have package.json however, that is where you specify all your dependencies.
Using --save flag of npm install
Example.
npm install express --save
How is package.json created in the first place? Is it created automatically?
You can manually create a text file and save it as package.json
OR
A more sophisticated way is to use the command
npm init
I am wondering why I do not have package.json
Me too! :)
You're most probably following a tutorial that doesn't emphasize on initial configuration of the project OR the author of those tutorials presume that the reader has all the fundamentals down to begin with.

It is created automatically if you write npm init.
Then, every package you add using npm install packagename --save will be added to the dependencies list.
You need package.json so that when you want to use your project on another machine you don't have to copy all node_modules, but only your .js files you have written, assets and package.json. You can then run npm install command and it will automatically download and install all the required modules (found in the list of dependencies inside package.json).
You can also manually create or edit it, but it's easier to add --save when installing a module so you don't have to worry about package versions and stuff like that.
Also if you want to create a npm package, an open source project or stuff other people will use, it's either required or the norm to have this package.json file describing your project.

package.json is npm file, if you don't use npm you will not have this file, npm is a great tool if you want to use external libraries in your project but if you don't need it (which is very not likely unless you are doing something very simple), you don't need package.json file too.
To generate package.json file initialize npm in your project using npm init

possible reason thus it exist is you maybe you enter a wrong command like npm i -y, you must initialize the project first, just enter a command npm init -y
Welcome.

Well, if you are running it on your local machine, it's fine. now to answer your last question, package.json is not created automatically.
the npm command npm init -y creates the 'package.json' file. It basically makes sharing your code and installing your codebase easier.

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!

Generate bower file automatically?

In current project I have pretty big bower file. Many dependencies are out of dated and have hardcoded version like ~1.2. I have replaced it with "latest" and run bower install/update and everything went ok.
The problem is that I don't want to have such settings like "latest" on production server. What is the easiest way to grab current versions of bower components and put it to the bower file? aka generate bower file from existing dependencies.

Using bower init, you'll be able to regenerate from scratch your bower.json file with all the current dependencies

With bower install --save jquery#<version_number> you can install specific versions of bower components, e.g.
bower install --save jquery#1.10.2
the --save automatically adds the dependency to bower.json. Normally there is no need to edit bower.json manually.

How to update bower.json with installed packages?

In my project I've installed bower components without save option. Now, I would like update to bower.json?
How can I update bower.json with installed packages?

Just list your dependencies:
bower list
Then you should run all install command with param '--save' like this:
bower install bootstrap --save
It's a hard work, but if you have a thousand dependencies, could you create a script to automatize the task.

A little trick if you don't want to write a script for that:
before doing anything rename your bower.json in bower2.json for example.
then you can do a:
$ bower init
(automatically create a bower.json file).
note that all questions should be pre-filled with your current config.
When it will ask you:
set currently installed components as dependencies?
say yes,
You now have all your dependencies in the new bower.json file (and you can check if everything is right with the old bower2.json)

A bit arduous way is to run bower list, look for packages labeled extraneous and add those manually to the dependencies in the bower.json.
If there are a lot of extraneous packages, it might be easier to workaround this by running bower init and answering Yes to "set currently installed components as dependencies?". This will take your current bower.json, read it and then create new one using information from the old one. So in an ideal case you will have the same file just with extraneous packages added.
Warning: Firstly, there might be something lost in the process (e.g. devDependecies). Secondly in the last version of bower (v1.2.7) this will not preserve current packages info! I feel it is a bug. However you can save the old file and (manually) merge it with the generated one.
Also, you should ask for an option or something by opening a bower issue as this would be welcomed by many developers.

You can use bower-check-updates (you need installed node.js on your machine):
bower-check-updates is a utility that automatically adjusts a bower.json with the latest version of all dependencies
bower-check-updates - is a fork of npm-check-updates, so it's all the same but updates bower.json, instead of package.json
npm install -g bower-check-updates
bower-check-updates -u
bower install
This will install bower-check-updates globally, so you can launch it from anywhere.
P.S. for more information about npm-check-updates pleas see this topic

If there aren't that many bower packages you have installed, try writing bower install [package_name] --save. This will just update your bower.json file.

After bower-check-updates -u you must run bower install instead of npm install